jmgraph 3.2.1 → 3.2.3

package/dist/jmgraph.js

@@ -146,6 +146,10 @@ function _construct(Parent, args, Class) { if (_isNativeReflectConstruct()) { _c
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
 
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
@@ -206,6 +210,13 @@ var jmGraph = /*#__PURE__*/function (_jmGraphCore) {
     return _super.call(this, canvas, option, callback);
   }
 
+  _createClass(jmGraph, null, [{
+    key: "create",
+    value: function create() {
+      return createJmGraph.apply(void 0, arguments);
+    }
+  }]);
+
   return jmGraph;
 }(_jmGraph.jmGraph); //创建实例
 
@@ -222,7 +233,7 @@ var createJmGraph = function createJmGraph() {
 
 exports.create = createJmGraph;
 
-},{"./src/core/jmGraph.js":5,"./src/shapes/jmArc.js":12,"./src/shapes/jmArrow.js":13,"./src/shapes/jmArrowLine.js":14,"./src/shapes/jmBezier.js":15,"./src/shapes/jmCircle.js":16,"./src/shapes/jmHArc.js":17,"./src/shapes/jmImage.js":18,"./src/shapes/jmLabel.js":19,"./src/shapes/jmLine.js":20,"./src/shapes/jmPrismatic.js":21,"./src/shapes/jmRect.js":22,"./src/shapes/jmResize.js":23}],2:[function(require,module,exports){
+},{"./src/core/jmGraph.js":5,"./src/shapes/jmArc.js":22,"./src/shapes/jmArrow.js":23,"./src/shapes/jmArrowLine.js":24,"./src/shapes/jmBezier.js":25,"./src/shapes/jmCircle.js":26,"./src/shapes/jmHArc.js":27,"./src/shapes/jmImage.js":28,"./src/shapes/jmLabel.js":29,"./src/shapes/jmLine.js":30,"./src/shapes/jmPrismatic.js":31,"./src/shapes/jmRect.js":32,"./src/shapes/jmResize.js":33}],2:[function(require,module,exports){
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -240,10 +251,22 @@ var _jmShadow = require("./jmShadow.js");
 
 var _jmProperty2 = require("./jmProperty.js");
 
+var _path = _interopRequireDefault(require("../lib/webgl/path.js"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
 
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
@@ -271,6 +294,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 //样式名称，也当做白名单使用		
 var jmStyleMap = {
   'fill': 'fillStyle',
+  'fillImage': 'fillImage',
   'stroke': 'strokeStyle',
   'shadow.blur': 'shadowBlur',
   'shadow.x': 'shadowOffsetX',
@@ -312,9 +336,9 @@ var jmControl = /*#__PURE__*/function (_jmProperty) {
     _classCallCheck(this, jmControl);
 
     params = params || {};
-    _this2 = _super.call(this);
+    _this2 = _super.call(this, params);
 
-    _this2.__pro('type', t || (this instanceof jmControl ? this.constructor : void 0).name);
+    _this2.property('type', t || (this instanceof jmControl ? this.constructor : void 0).name);
 
     _this2.style = params && params.style ? params.style : {}; //this.position = params.position || {x:0,y:0};
 
@@ -327,7 +351,15 @@ var jmControl = /*#__PURE__*/function (_jmProperty) {
 
     _this2.graph = params.graph || null;
     _this2.zIndex = params.zIndex || 0;
-    _this2.interactive = typeof params.interactive == 'undefined' ? true : params.interactive;
+    _this2.interactive = typeof params.interactive == 'undefined' ? true : params.interactive; // webgl模式
+
+    if (_this2.mode === 'webgl') {
+      _this2.webglControl = new _path["default"](_this2.graph, {
+        style: _this2.style,
+        isRegular: params.isRegular,
+        needCut: params.needCut
+      });
+    }
 
     _this2.initializing();
 
@@ -347,7 +379,7 @@ var jmControl = /*#__PURE__*/function (_jmProperty) {
   _createClass(jmControl, [{
     key: "type",
     get: function get() {
-      return this.__pro('type');
+      return this.property('type');
     }
     /**
      * 当前canvas的context
@@ -358,17 +390,16 @@ var jmControl = /*#__PURE__*/function (_jmProperty) {
   }, {
     key: "context",
     get: function get() {
-      var s = this.__pro('context');
-
+      var s = this.property('context');
       if (s) return s;else if (this.is('jmGraph') && this.canvas && this.canvas.getContext) {
-        return this.context = this.canvas.getContext('2d');
+        return this.context = this.canvas.getContext(this.mode || '2d');
       }
       var g = this.graph;
       if (g) return g.context;
-      return g.canvas.getContext('2d');
+      return g.canvas.getContext(this.mode || '2d');
     },
     set: function set(v) {
-      return this.__pro('context', v);
+      return this.property('context', v);
     }
     /**
      * 样式
@@ -379,14 +410,13 @@ var jmControl = /*#__PURE__*/function (_jmProperty) {
   }, {
     key: "style",
     get: function get() {
-      var s = this.__pro('style');
-
-      if (!s) s = this.__pro('style', {});
+      var s = this.property('style');
+      if (!s) s = this.property('style', {});
       return s;
     },
     set: function set(v) {
       this.needUpdate = true;
-      return this.__pro('style', v);
+      return this.property('style', v);
     }
     /**
      * 当前控件是否可见
@@ -398,14 +428,13 @@ var jmControl = /*#__PURE__*/function (_jmProperty) {
   }, {
     key: "visible",
     get: function get() {
-      var s = this.__pro('visible');
-
-      if (typeof s == 'undefined') s = this.__pro('visible', true);
+      var s = this.property('visible');
+      if (typeof s == 'undefined') s = this.property('visible', true);
       return s;
     },
     set: function set(v) {
       this.needUpdate = true;
-      return this.__pro('visible', v);
+      return this.property('visible', v);
     }
     /**
      * 当前控件是否是交互式的，如果是则会响应鼠标或touch事件。
@@ -418,12 +447,11 @@ var jmControl = /*#__PURE__*/function (_jmProperty) {
   }, {
     key: "interactive",
     get: function get() {
-      var s = this.__pro('interactive');
-
+      var s = this.property('interactive');
       return s;
     },
     set: function set(v) {
-      return this.__pro('interactive', v);
+      return this.property('interactive', v);
     }
     /**
      * 当前控件的子控件集合
@@ -434,14 +462,13 @@ var jmControl = /*#__PURE__*/function (_jmProperty) {
   }, {
     key: "children",
     get: function get() {
-      var s = this.__pro('children');
-
-      if (!s) s = this.__pro('children', new _jmList.jmList());
+      var s = this.property('children');
+      if (!s) s = this.property('children', new _jmList.jmList());
       return s;
     },
     set: function set(v) {
       this.needUpdate = true;
-      return this.__pro('children', v);
+      return this.property('children', v);
     }
     /**
      * 宽度
@@ -452,14 +479,13 @@ var jmControl = /*#__PURE__*/function (_jmProperty) {
   }, {
     key: "width",
     get: function get() {
-      var s = this.__pro('width');
-
-      if (typeof s == 'undefined') s = this.__pro('width', 0);
+      var s = this.property('width');
+      if (typeof s == 'undefined') s = this.property('width', 0);
       return s;
     },
     set: function set(v) {
       this.needUpdate = true;
-      return this.__pro('width', v);
+      return this.property('width', v);
     }
     /**
      * 高度
@@ -470,14 +496,13 @@ var jmControl = /*#__PURE__*/function (_jmProperty) {
   }, {
     key: "height",
     get: function get() {
-      var s = this.__pro('height');
-
-      if (typeof s == 'undefined') s = this.__pro('height', 0);
+      var s = this.property('height');
+      if (typeof s == 'undefined') s = this.property('height', 0);
       return s;
     },
     set: function set(v) {
       this.needUpdate = true;
-      return this.__pro('height', v);
+      return this.property('height', v);
     }
     /**
      * 控件层级关系，发生改变时，需要重新调整排序
@@ -488,16 +513,13 @@ var jmControl = /*#__PURE__*/function (_jmProperty) {
   }, {
     key: "zIndex",
     get: function get() {
-      var s = this.__pro('zIndex');
-
-      if (!s) s = this.__pro('zIndex', 0);
+      var s = this.property('zIndex');
+      if (!s) s = this.property('zIndex', 0);
       return s;
     },
     set: function set(v) {
       this.needUpdate = true;
-
-      this.__pro('zIndex', v);
-
+      this.property('zIndex', v);
       this.children.sort(); //层级发生改变，需要重新排序
 
       this.needUpdate = true;
@@ -695,13 +717,23 @@ var jmControl = /*#__PURE__*/function (_jmProperty) {
 
             __setStyle(styleValue.toGradient(_this3), mpname || name);
           } else if (mpname) {
-            //只有存在白名单中才处理
-            //颜色转换
-            if (t == 'string' && ['fillStyle', 'strokeStyle', 'shadowColor'].indexOf(mpname) > -1) {
-              styleValue = _jmUtils.jmUtils.toColor(styleValue);
-            }
+            if (_this3.webglControl) {
+              //只有存在白名单中才处理
+              //颜色转换
+              if (t == 'string' && ['fillStyle', 'strokeStyle', 'shadowColor'].indexOf(mpname) > -1) {
+                styleValue = _jmUtils.jmUtils.hexToRGBA(styleValue);
+              }
+
+              _this3.webglControl.setStyle(mpname, styleValue);
+            } else {
+              //只有存在白名单中才处理
+              //颜色转换
+              if (t == 'string' && ['fillStyle', 'strokeStyle', 'shadowColor'].indexOf(mpname) > -1) {
+                styleValue = _jmUtils.jmUtils.toColor(styleValue);
+              }
 
-            _this3.context[mpname] = styleValue;
+              _this3.context[mpname] = styleValue;
+            }
           } else {
             switch (name) {
               //阴影样式
@@ -723,8 +755,7 @@ var jmControl = /*#__PURE__*/function (_jmProperty) {
 
               case 'translate':
                 {
-                  _this3.context.translate(styleValue.x, styleValue.y);
-
+                  _this3.context.translate && _this3.context.translate(styleValue.x, styleValue.y);
                   break;
                 }
               //旋转
@@ -744,11 +775,11 @@ var jmControl = /*#__PURE__*/function (_jmProperty) {
                     tranY = styleValue.rotateY + bounds.top;
                   }
 
-                  if (tranX != 0 || tranY != 0) _this3.context.translate(tranX, tranY);
+                  if (tranX != 0 || tranY != 0) _this3.context.translate && _this3.context.translate(tranX, tranY);
 
                   _this3.context.rotate(styleValue.angle);
 
-                  if (tranX != 0 || tranY != 0) _this3.context.translate(-tranX, -tranY);
+                  if (tranX != 0 || tranY != 0) _this3.context.translate && _this3.context.translate(-tranX, -tranY);
                   break;
                 }
 
@@ -1154,7 +1185,8 @@ var jmControl = /*#__PURE__*/function (_jmProperty) {
     value: function beginDraw() {
       this.getLocation(true); //重置位置信息
 
-      this.context.beginPath();
+      this.context.beginPath && this.context.beginPath();
+      if (this.webglControl && this.webglControl.beginDraw) this.webglControl.beginDraw();
     }
     /**
      * 结束控件绘制
@@ -1167,17 +1199,21 @@ var jmControl = /*#__PURE__*/function (_jmProperty) {
     value: function endDraw() {
       //如果当前为封闭路径
       if (this.style.close) {
-        this.context.closePath();
+        if (this.webglControl) this.webglControl.closePath();else this.context.closePath && this.context.closePath();
       }
 
       if (this.style['fill']) {
-        this.context.fill();
+        if (this.webglControl) {
+          var bounds = this.getBounds();
+          this.webglControl.fill(bounds);
+        } else this.context.fill && this.context.fill();
       }
 
-      if (this.style['stroke'] || !this.style['fill']) {
-        this.context.stroke();
+      if (this.style['stroke'] || !this.style['fill'] && !this.is('jmGraph')) {
+        if (this.webglControl) this.webglControl.stroke();else this.context.stroke && this.context.stroke();
       }
 
+      if (this.webglControl && this.webglControl.endDraw) this.webglControl.endDraw();
       this.needUpdate = false;
     }
     /**
@@ -1193,16 +1229,22 @@ var jmControl = /*#__PURE__*/function (_jmProperty) {
       if (this.points && this.points.length > 0) {
         //获取当前控件的绝对位置
         var bounds = this.parent && this.parent.absoluteBounds ? this.parent.absoluteBounds : this.absoluteBounds;
-        this.context.moveTo(this.points[0].x + bounds.left, this.points[0].y + bounds.top);
-        var len = this.points.length;
 
-        for (var i = 1; i < len; i++) {
-          var p = this.points[i]; //移至当前坐标
+        if (this.webglControl) {
+          this.webglControl.setParentBounds(bounds);
+          this.webglControl.draw(_toConsumableArray(this.points));
+        } else if (this.context && this.context.moveTo) {
+          this.context.moveTo(this.points[0].x + bounds.left, this.points[0].y + bounds.top);
+          var len = this.points.length;
 
-          if (p.m) {
-            this.context.moveTo(p.x + bounds.left, p.y + bounds.top);
-          } else {
-            this.context.lineTo(p.x + bounds.left, p.y + bounds.top);
+          for (var i = 1; i < len; i++) {
+            var p = this.points[i]; //移至当前坐标
+
+            if (p.m) {
+              this.context.moveTo(p.x + bounds.left, p.y + bounds.top);
+            } else {
+              this.context.lineTo(p.x + bounds.left, p.y + bounds.top);
+            }
           }
         }
       }
@@ -1228,7 +1270,7 @@ var jmControl = /*#__PURE__*/function (_jmProperty) {
           if (this.absoluteBounds.left >= this.graph.width) needDraw = false;else if (this.absoluteBounds.top >= this.graph.height) needDraw = false;else if (this.absoluteBounds.right <= 0) needDraw = false;else if (this.absoluteBounds.bottom <= 0) needDraw = false;
         }
 
-        this.context.save();
+        this.context.save && this.context.save();
         this.emit('beginDraw', this);
         this.setStyle(); //设定样式
 
@@ -1243,7 +1285,7 @@ var jmControl = /*#__PURE__*/function (_jmProperty) {
         }
 
         this.emit('endDraw', this);
-        this.context.restore();
+        this.context.restore && this.context.restore();
         this.needUpdate = false;
       }
     }
@@ -1845,7 +1887,7 @@ var jmControl = /*#__PURE__*/function (_jmProperty) {
 exports.jmControl = exports["default"] = jmControl;
 ;
 
-},{"./jmGradient.js":4,"./jmList.js":6,"./jmProperty.js":9,"./jmShadow.js":10,"./jmUtils.js":11}],3:[function(require,module,exports){
+},{"../lib/webgl/path.js":21,"./jmGradient.js":4,"./jmList.js":6,"./jmProperty.js":9,"./jmShadow.js":10,"./jmUtils.js":11}],3:[function(require,module,exports){
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -2272,7 +2314,11 @@ var jmGradient = /*#__PURE__*/function () {
       var sy2 = Number(y2) + bounds.top;
 
       if (this.type === 'linear') {
-        gradient = context.createLinearGradient(sx1, sy1, sx2, sy2);
+        if (control.mode === 'webgl' && control.webglControl) {
+          gradient = control.webglControl.createLinearGradient(x1, y1, x2, y2, bounds);
+        } else {
+          context.createLinearGradient && (gradient = context.createLinearGradient(sx1, sy1, sx2, sy2));
+        }
       } else if (this.type === 'radial') {
         var r1 = this.r1 || 0;
         var r2 = this.r2;
@@ -2285,24 +2331,32 @@ var jmGradient = /*#__PURE__*/function () {
         if (_jmUtils.jmUtils.checkPercent(r2)) {
           r2 = _jmUtils.jmUtils.percentToNumber(r2);
           r2 = d * r2;
-        } //offsetLine = Math.abs(r2 - r1);//二圆半径差
-        //小程序的接口特殊
-
+        }
 
-        if (context.createCircularGradient) {
-          gradient = context.createCircularGradient(sx1, sy1, r2);
-        } else {
+        if (control.mode === 'webgl' && control.webglControl) {
+          gradient = control.webglControl.createRadialGradient(x1, y1, r1, x2, y2, r2, bounds);
+        } //offsetLine = Math.abs(r2 - r1);//二圆半径差
+        else if (context.createRadialGradient) {
           gradient = context.createRadialGradient(sx1, sy1, r1, sx2, sy2, r2);
+        } //小程序的接口特殊
+        else if (context.createCircularGradient) {
+          gradient = context.createCircularGradient(sx1, sy1, r2);
         }
       } //颜色渐变
 
 
-      this.stops.each(function (i, s) {
-        var c = _jmUtils.jmUtils.toColor(s.color); //s.offset 0.0 ~ 1.0
+      if (gradient) {
+        this.stops.each(function (i, s) {
+          var c = _jmUtils.jmUtils.toColor(s.color); //s.offset 0.0 ~ 1.0
 
 
-        gradient.addColorStop(s.offset, c);
-      });
+          gradient && gradient.addColorStop(s.offset, c);
+        });
+      } else {
+        var s = this.stops.get(0);
+        return s && s.color || '#000';
+      }
+
       return gradient;
     }
     /**
@@ -2389,14 +2443,14 @@ var jmGradient = /*#__PURE__*/function () {
       var str = this.type + '-gradient(';
 
       if (this.type == 'linear') {
-        str += this.x1 + ' ' + this.y1 + ' ' + this.x2 + ' ' + this.y2;
+        str += this.x1.toFixed(2) + ' ' + this.y1.toFixed(2) + ' ' + this.x2.toFixed(2) + ' ' + this.y2.toFixed(2);
       } else {
-        str += this.x1 + ' ' + this.y1 + ' ' + this.r1 + ' ' + this.x2 + ' ' + this.y2 + ' ' + this.r2;
+        str += this.x1.toFixed(2) + ' ' + this.y1.toFixed(2) + ' ' + this.r1.toFixed(2) + ' ' + this.x2.toFixed(2) + ' ' + this.y2.toFixed(2) + ' ' + this.r2.toFixed(2);
       } //颜色渐变
 
 
       this.stops.each(function (i, s) {
-        str += ',' + s.color + ' ' + s.offset;
+        str += ',' + s.color + ' ' + s.offset.toFixed(2);
       });
       return str + ')';
     }
@@ -2483,6 +2537,12 @@ var _jmPath = require("./jmPath.js");
 
 function _construct(Parent, args, Class) { if (_isNativeReflectConstruct()) { _construct = Reflect.construct; } else { _construct = function _construct(Parent, args, Class) { var a = [null]; a.push.apply(a, args); var Constructor = Function.bind.apply(Parent, a); var instance = new Constructor(); if (Class) _setPrototypeOf(instance, Class.prototype); return instance; }; } return _construct.apply(null, arguments); }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -2533,6 +2593,8 @@ var jmGraph = /*#__PURE__*/function (_jmControl) {
     option.mode = option.mode || '2d'; // webgl | 2d
 
     option.interactive = true;
+    option.isRegular = true; // 规则的
+
     _this = _super.call(this, option, 'jmGraph');
     _this.option = option || {};
     _this.devicePixelRatio = 1; // 根据屏幕的缩放倍数
@@ -2543,11 +2605,15 @@ var jmGraph = /*#__PURE__*/function (_jmControl) {
      * @type {jmUtils}
      */
 
-    _this.util = _this.utils = _jmUtils.jmUtils; //如果是小程序
+    _this.util = _this.utils = _jmUtils.jmUtils; // 模式 webgl | 2d
+
+    _this.mode = option.mode; //如果是小程序
 
     if (typeof wx != 'undefined' && wx.canIUse && wx.canIUse('canvas')) {
       if (typeof canvas === 'string') canvas = wx.createSelectorQuery().select('#' + canvas);
       _this.isWXMiniApp = true; // 微信小程序平台
+
+      _this.container = canvas;
     } else {
       if (typeof canvas === 'string' && typeof document != 'undefined') {
         canvas = document.getElementById(canvas);
@@ -2568,7 +2634,29 @@ var jmGraph = /*#__PURE__*/function (_jmControl) {
     }
 
     _this.canvas = canvas;
-    _this.context = canvas.getContext('2d');
+    _this.context = canvas.getContext(_this.mode);
+    _this.textureCanvas = option.textureCanvas || null; // webgl模式
+
+    if (_this.mode === 'webgl') {
+      _this.context.enable(_this.context.BLEND); // 开启混合功能：（注意，它不可和gl.DEPTH_TEST一起使用）
+
+
+      _this.context.blendFunc(_this.context.SRC_ALPHA, _this.context.ONE_MINUS_SRC_ALPHA); // 指定混合函数：
+      // webglcontextlost webglcontextrestored
+
+
+      _jmUtils.jmUtils.bindEvent(canvas, 'webglcontextlost', function (e) {
+        console.log('canvas webglcontextlost', e);
+
+        _this.emit('webglcontextlost', e);
+      });
+
+      _jmUtils.jmUtils.bindEvent(canvas, 'webglcontextrestored', function (e) {
+        console.log('canvas webglcontextrestored', e);
+
+        _this.emit('webglcontextrestored', e);
+      });
+    }
 
     _this.__init(callback);
 
@@ -2597,14 +2685,14 @@ var jmGraph = /*#__PURE__*/function (_jmControl) {
        */
 
       this.on('beginDraw', function () {
-        this.context.translate(0.5, 0.5);
+        this.context.translate && this.context.translate(0.5, 0.5);
       });
       /**
        * 结束控件绘制 为了解决一像素线条问题
        */
 
       this.on('endDraw', function () {
-        this.context.translate(-0.5, -0.5);
+        this.context.translate && this.context.translate(-0.5, -0.5);
       }); // devicePixelRatio初始化
 
       var dpr = typeof window != 'undefined' && window.devicePixelRatio > 1 ? window.devicePixelRatio : 1;
@@ -2642,9 +2730,17 @@ var jmGraph = /*#__PURE__*/function (_jmControl) {
       if (h) this.__normalSize.height = h;
       this.css('width', w + "px");
       this.css('height', h + "px");
-      this.canvas.height = h * this.dprScaleSize;
-      this.canvas.width = w * this.dprScaleSize;
-      this.context.scale(this.dprScaleSize, this.dprScaleSize);
+
+      if (this.mode === '2d') {
+        this.canvas.height = h * this.dprScaleSize;
+        this.canvas.width = w * this.dprScaleSize;
+        if (this.dprScaleSize !== 1) this.context.scale && this.context.scale(this.dprScaleSize, this.dprScaleSize);
+      } else {
+        this.canvas.width = w;
+        this.canvas.height = h;
+      }
+
+      this.context.viewport && this.context.viewport(0, 0, w, h);
     }
     /**
      * 内部坐标转为页面坐标，这里主要是有devicePixelRatio倍数问题
@@ -2886,24 +2982,38 @@ var jmGraph = /*#__PURE__*/function (_jmControl) {
         	w = w / this.scaleSize.x;
         	h = h / this.scaleSize.y;
         }*/
-      } //如果有指定背景，则等到draw再全屏绘制一次，也同样达到清除画布的功能
+      }
 
+      if (this.context.clearRect) {
+        if (this.style && this.style.fill) {
+          this.points = [{
+            x: 0,
+            y: 0
+          }, {
+            x: w,
+            y: 0
+          }, {
+            x: w,
+            y: h
+          }, {
+            x: 0,
+            y: h
+          }];
+          this.style.close = true; // 封闭填充
+        }
 
-      if (this.style && this.style.fill) {
-        this.points = [{
-          x: 0,
-          y: 0
-        }, {
-          x: w,
-          y: 0
-        }, {
-          x: w,
-          y: h
-        }, {
-          x: 0,
-          y: h
-        }];
-      } else if (this.context.clearRect) this.context.clearRect(0, 0, w, h);
+        this.context.clearRect(0, 0, w, h);
+      } else if (this.mode === 'webgl' && this.context.clear) {
+        var color = this.style && this.style.fill ? this.utils.hexToRGBA(this.style.fill) : {
+          r: 0,
+          g: 0,
+          b: 0,
+          a: 0
+        };
+        this.context.clearColor(color.r, color.g, color.b, color.a); // 设置清空颜色缓冲时的颜色值
+
+        this.context.clear(this.context.COLOR_BUFFER_BIT); // 清空颜色缓冲区，也就是清空画布
+      }
     }
     /**
     * 设置画布样式，此处只是设置其css样式
@@ -2933,10 +3043,11 @@ var jmGraph = /*#__PURE__*/function (_jmControl) {
   }, {
     key: "createPath",
     value: function createPath(points, style) {
-      var path = this.createShape('path', {
+      var option = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+      var path = this.createShape('path', _objectSpread({
         points: points,
         style: style
-      });
+      }, option));
       return path;
     }
     /**
@@ -3351,7 +3462,7 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
 
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
 
-var ANICOUNTER = Symbol('jmchart#animate#counter');
+var control_id_counter = 0;
 /**
  *  所有jm对象的基础对象
  * 
@@ -3366,8 +3477,9 @@ var jmObject = /*#__PURE__*/function () {
 
     if (g && g.type == 'jmGraph') {
       this.graph = g;
-    } //this.id = Symbol("id"); //生成一个唯一id
+    }
 
+    this.id = ++control_id_counter; //生成一个唯一id
   }
   /**
    * 检 查对象是否为指定类型
@@ -3526,6 +3638,7 @@ var jmPath = /*#__PURE__*/function (_jmControl) {
 
     _this = _super.call(this, params, t);
     _this.points = params && params.points ? params.points : [];
+    _this.polygonIndices = params && params.polygonIndices ? params.polygonIndices : [];
     return _this;
   }
   /**
@@ -3539,13 +3652,28 @@ var jmPath = /*#__PURE__*/function (_jmControl) {
   _createClass(jmPath, [{
     key: "points",
     get: function get() {
-      var s = this.__pro('points');
+      var s = this.property('points');
+      return s;
+    },
+    set: function set(v) {
+      this.needUpdate = true;
+      return this.property('points', v);
+    }
+    /**
+     * 顶点数组索引，对应points中的顶点
+     * @property polygonIndices
+     * @type {array} 
+     */
 
+  }, {
+    key: "polygonIndices",
+    get: function get() {
+      var s = this.property('polygonIndices');
       return s;
     },
     set: function set(v) {
       this.needUpdate = true;
-      return this.__pro('points', v);
+      return this.property('polygonIndices', v);
     }
   }]);
 
@@ -3602,18 +3730,19 @@ var jmProperty = /*#__PURE__*/function (_jmObject) {
 
   var _super = _createSuper(jmProperty);
 
-  function jmProperty() {
+  function jmProperty(params) {
     var _this;
 
     _classCallCheck(this, jmProperty);
 
     _this = _super.call(this);
     _this[PROPERTY_KEY] = {};
+    if (params && params.mode) _this.mode = params.mode;
     return _this;
   }
   /**
    * 基础属性读写接口
-   * @method __pro
+   * @method property
    * @param {string} name 属性名
    * @param {any} value 属性的值
    * @returns {any} 属性的值
@@ -3621,8 +3750,8 @@ var jmProperty = /*#__PURE__*/function (_jmObject) {
 
 
   _createClass(jmProperty, [{
-    key: "__pro",
-    value: function __pro() {
+    key: "property",
+    value: function property() {
       for (var _len = arguments.length, pars = new Array(_len), _key = 0; _key < _len; _key++) {
         pars[_key] = arguments[_key];
       }
@@ -3640,7 +3769,7 @@ var jmProperty = /*#__PURE__*/function (_jmObject) {
           pros[name] = pars[1];
           if (this.emit) this.emit('propertyChange', name, args);
           return pars[1];
-        } else if (pars.length == 1) {
+        } else if (name) {
           return pros[name];
         }
       }
@@ -3654,11 +3783,10 @@ var jmProperty = /*#__PURE__*/function (_jmObject) {
   }, {
     key: "needUpdate",
     get: function get() {
-      return this.__pro('needUpdate');
+      return this.property('needUpdate');
     },
     set: function set(v) {
-      this.__pro('needUpdate', v); //子控件属性改变，需要更新整个画板
-
+      this.property('needUpdate', v); //子控件属性改变，需要更新整个画板
 
       if (v && !this.is('jmGraph') && this.graph) {
         this.graph.needUpdate = true;
@@ -3673,13 +3801,28 @@ var jmProperty = /*#__PURE__*/function (_jmObject) {
   }, {
     key: "graph",
     get: function get() {
-      var g = this.__pro('graph');
-
-      g = g || this.__pro('graph', this.findParent('jmGraph'));
+      var g = this.property('graph');
+      g = g || this.property('graph', this.findParent('jmGraph'));
       return g;
     },
     set: function set(v) {
-      return this.__pro('graph', v);
+      return this.property('graph', v);
+    }
+    /**
+     * 绘制模式 2d/webgl
+     * @property mode
+     * @type {string}
+     */
+
+  }, {
+    key: "mode",
+    get: function get() {
+      var m = this.property('mode');
+      if (m) return m;else if (this.is('jmGraph')) return this.property('mode');
+      return this.graph.mode;
+    },
+    set: function set(v) {
+      return this.property('mode', v);
     }
     /**
      * 在下次进行重绘时执行
@@ -3820,6 +3963,150 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
 
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
 
+var colorKeywords = {
+  aliceblue: "#f0f8ff",
+  antiquewhite: "#faebd7",
+  aqua: "#00ffff",
+  aquamarine: "#7fffd4",
+  azure: "#f0ffff",
+  beige: "#f5f5dc",
+  bisque: "#ffe4c4",
+  black: "#000000",
+  blanchedalmond: "#ffebcd",
+  blue: "#0000ff",
+  blueviolet: "#8a2be2",
+  brown: "#a52a2a",
+  burlywood: "#deb887",
+  cadetblue: "#5f9ea0",
+  chartreuse: "#7fff00",
+  chocolate: "#d2691e",
+  coral: "#ff7f50",
+  cornflowerblue: "#6495ed",
+  cornsilk: "#fff8dc",
+  crimson: "#dc143c",
+  cyan: "#00ffff",
+  darkblue: "#00008b",
+  darkcyan: "#008b8b",
+  darkgoldenrod: "#b8860b",
+  darkgray: "#a9a9a9",
+  darkgreen: "#006400",
+  darkkhaki: "#bdb76b",
+  darkmagenta: "#8b008b",
+  darkolivegreen: "#556b2f",
+  darkorange: "#ff8c00",
+  darkorchid: "#9932cc",
+  darkred: "#8b0000",
+  darksalmon: "#e9967a",
+  darkseagreen: "#8fbc8f",
+  darkslateblue: "#483d8b",
+  darkslategray: "#2f4f4f",
+  darkturquoise: "#00ced1",
+  darkviolet: "#9400d3",
+  deeppink: "#ff1493",
+  deepskyblue: "#00bfff",
+  dimgray: "#696969",
+  dodgerblue: "#1e90ff",
+  firebrick: "#b22222",
+  floralwhite: "#fffaf0",
+  forestgreen: "#228b22",
+  fuchsia: "#ff00ff",
+  gainsboro: "#dcdcdc",
+  ghostwhite: "#f8f8ff",
+  gold: "#ffd700",
+  goldenrod: "#daa520",
+  gray: "#808080",
+  green: "#008000",
+  greenyellow: "#adff2f",
+  grey: "#808080",
+  honeydew: "#f0fff0",
+  hotpink: "#ff69b4",
+  indianred: "#cd5c5c",
+  indigo: "#4b0082",
+  ivory: "#fffff0",
+  khaki: "#f0e68c",
+  lavender: "#e6e6fa",
+  lavenderblush: "#fff0f5",
+  lawngreen: "#7cfc00",
+  lemonchiffon: "#fffacd",
+  lightblue: "#add8e6",
+  lightcoral: "#f08080",
+  lightcyan: "#e0ffff",
+  lightgoldenrodyellow: "#fafad2",
+  lightgrey: "#d3d3d3",
+  lightgreen: "#90ee90",
+  lightpink: "#ffb6c1",
+  lightsalmon: "#ffa07a",
+  lightseagreen: "#20b2aa",
+  lightskyblue: "#87cefa",
+  lightslategray: "#778899",
+  lightsteelblue: "#b0c4de",
+  lightyellow: "#ffffe0",
+  lime: "#00ff00",
+  limegreen: "#32cd32",
+  linen: "#faf0e6",
+  magenta: "#ff00ff",
+  maroon: "#800000",
+  mediumaquamarine: "#66cdaa",
+  mediumblue: "#0000cd",
+  mediumorchid: "#ba55d3",
+  mediumpurple: "#9370d8",
+  mediumseagreen: "#3cb371",
+  mediumslateblue: "#7b68ee",
+  mediumspringgreen: "#00fa9a",
+  mediumturquoise: "#48d1cc",
+  mediumvioletred: "#c71585",
+  midnightblue: "#191970",
+  mintcream: "#f5fffa",
+  mistyrose: "#ffe4e1",
+  moccasin: "#ffe4b5",
+  navajowhite: "#ffdead",
+  navy: "#000080",
+  oldlace: "#fdf5e6",
+  olive: "#808000",
+  olivedrab: "#6b8e23",
+  orange: "#ffa500",
+  orangered: "#ff4500",
+  orchid: "#da70d6",
+  palegoldenrod: "#eee8aa",
+  palegreen: "#98fb98",
+  paleturquoise: "#afeeee",
+  palevioletred: "#d87093",
+  papayawhip: "#ffefd5",
+  peachpuff: "#ffdab9",
+  peru: "#cd853f",
+  pink: "#ffc0cb",
+  plum: "#dda0dd",
+  powderblue: "#b0e0e6",
+  purple: "#800080",
+  red: "#ff0000",
+  rosybrown: "#bc8f8f",
+  royalblue: "#4169e1",
+  saddlebrown: "#8b4513",
+  salmon: "#fa8072",
+  sandybrown: "#f4a460",
+  seagreen: "#2e8b57",
+  seashell: "#fff5ee",
+  sienna: "#a0522d",
+  silver: "#c0c0c0",
+  skyblue: "#87ceeb",
+  slateblue: "#6a5acd",
+  slategray: "#708090",
+  snow: "#fffafa",
+  springgreen: "#00ff7f",
+  steelblue: "#4682b4",
+  tan: "#d2b48c",
+  teal: "#008080",
+  thistle: "#d8bfd8",
+  tomato: "#ff6347",
+  turquoise: "#40e0d0",
+  violet: "#ee82ee",
+  wheat: "#f5deb3",
+  white: "#ffffff",
+  whitesmoke: "#f5f5f5",
+  yellow: "#ffff00",
+  yellowgreen: "#9acd32",
+  transparent: "rgba(0,0,0,0)"
+};
 /**
  * 画图基础对象
  * 当前库的工具类
@@ -3827,6 +4114,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
  * @class jmUtils
  * @static
  */
+
 var jmUtils = /*#__PURE__*/function () {
   function jmUtils() {
     _classCallCheck(this, jmUtils);
@@ -3895,7 +4183,11 @@ var jmUtils = /*#__PURE__*/function () {
           if (k === 'constructor') continue;
           var v = source[k]; // 不复制页面元素和class对象
 
-          if (v && (v.tagName || v.getContext)) continue; // 如果不是对象和空，则采用target的属性
+          if (v && (v.tagName || v.getContext)) {
+            target[k] = v;
+            continue;
+          } // 如果不是对象和空，则采用target的属性
+
 
           if (_typeof(target[k]) === 'object' || typeof target[k] === 'undefined') {
             target[k] = this.clone(v, target[k], deep, copyHandler, deepIndex);
@@ -4502,62 +4794,102 @@ var jmUtils = /*#__PURE__*/function () {
   }, {
     key: "hexToRGBA",
     value: function hexToRGBA(hex) {
-      hex = this.trim(hex); //当为7位时，表示需要转为带透明度的rgba
+      if (typeof hex === 'string') hex = this.trim(hex);else return hex; // 如果缓存存在，则直接返回
+
+      this.__hexToRGBA_Cache = this.__hexToRGBA_Cache || {};
+      if (this.__hexToRGBA_Cache[hex]) return this.__hexToRGBA_Cache[hex];
+      var res = hex; // 系统颜色
 
-      if (hex[0] == '#') {
+      if (colorKeywords[res]) res = colorKeywords[res]; //当为7位时，表示需要转为带透明度的rgba
+
+      if (res[0] == '#') {
         var color = {
           a: 1
         };
 
-        if (hex.length >= 8) {
-          color.a = hex.substr(1, 2);
-          color.g = hex.substr(5, 2);
-          color.b = hex.substr(7, 2);
-          color.r = hex.substr(3, 2); //透明度
+        if (res.length >= 8) {
+          color.a = res.substr(1, 2);
+          color.g = res.substr(5, 2);
+          color.b = res.substr(7, 2);
+          color.r = res.substr(3, 2); //透明度
 
-          color.a = (this.hexToNumber(color.a) / 255).toFixed(4);
+          color.a = Number((this.hexToNumber(color.a) / 255).toFixed(4));
           color.r = this.hexToNumber(color.r || 0);
           color.g = this.hexToNumber(color.g || 0);
           color.b = this.hexToNumber(color.b || 0);
-          return color;
+          res = color;
         } // #cccccc || #ccc
-        else if (hex.length === 7 || hex.length === 4) {
+        else if (res.length === 7 || res.length === 4) {
           // #ccc这种情况，把每个位复制一份
-          if (hex.length === 4) {
-            color.g = hex.substr(2, 1);
+          if (res.length === 4) {
+            color.g = res.substr(2, 1);
             color.g = color.g + color.g;
-            color.b = hex.substr(3, 1);
+            color.b = res.substr(3, 1);
             color.b = color.b + color.b;
-            color.r = hex.substr(1, 1);
+            color.r = res.substr(1, 1);
             color.r = color.r + color.r;
           } else {
-            color.g = hex.substr(3, 2); //除#号外的第二位
+            color.g = res.substr(3, 2); //除#号外的第二位
 
-            color.b = hex.substr(5, 2);
-            color.r = hex.substr(1, 2);
+            color.b = res.substr(5, 2);
+            color.r = res.substr(1, 2);
           }
 
           color.r = this.hexToNumber(color.r || 0);
           color.g = this.hexToNumber(color.g || 0);
           color.b = this.hexToNumber(color.b || 0);
-          return color;
+          res = color;
         } //如果是5位的话，# 则第2位表示A，后面依次是r,g,b
-        else if (hex.length === 5) {
-          color.a = hex.substr(1, 1);
-          color.g = hex.substr(3, 1); //除#号外的第二位
+        else if (res.length === 5) {
+          color.a = res.substr(1, 1);
+          color.g = res.substr(3, 1); //除#号外的第二位
 
-          color.b = hex.substr(4, 1);
-          color.r = hex.substr(2, 1);
+          color.b = res.substr(4, 1);
+          color.r = res.substr(2, 1);
           color.r = this.hexToNumber(color.r || 0);
           color.g = this.hexToNumber(color.g || 0);
           color.b = this.hexToNumber(color.b || 0); //透明度
 
-          color.a = (this.hexToNumber(color.a) / 255).toFixed(4);
-          return color;
+          color.a = Number((this.hexToNumber(color.a) / 255).toFixed(4));
+          res = color;
+        }
+      }
+
+      if (typeof res === 'string') {
+        var m = res.match(/rgb(a)?\s*\(\s*([\d\.]+)\s*,\s*([\d\.]+)\s*,\s*([\d\.]+)\s*(,\s*[\d\.]+)?\s*\)/i);
+
+        if (m && m.length === 6) {
+          var _color = {
+            r: Number(m[2]),
+            g: Number(m[3]),
+            b: Number(m[4]),
+            a: Number(this.trimStart(m[5] || '1', ','))
+          };
+          res = _color;
         }
       }
 
-      return hex;
+      return this.__hexToRGBA_Cache[hex] = res;
+    }
+    /**
+     * 把255的rgb值转为0-1的值
+     * @param {rgba} color 颜色
+     */
+
+  }, {
+    key: "rgbToDecimal",
+    value: function rgbToDecimal(color) {
+      color = this.clone(color);
+      color.r = this.byteToDecimal(color.r);
+      color.g = this.byteToDecimal(color.g);
+      color.b = this.byteToDecimal(color.b);
+      return color;
+    } //255值转为0-1的小数
+
+  }, {
+    key: "byteToDecimal",
+    value: function byteToDecimal(b) {
+      return b / 255;
     }
     /**
      * 转换颜色格式，如果输入r,g,b则转为hex格式,如果为hex则转为r,g,b格式
@@ -4577,10 +4909,10 @@ var jmUtils = /*#__PURE__*/function () {
         if (r[0] === '#' && (r.length === 4 || r.length === 7)) return r;
         var color = this.hexToRGBA(r);
         if (typeof color === 'string') return color;
-        r = color.r || r;
-        g = color.g || g;
-        b = color.b || b;
-        a = color.a || a;
+        r = typeof color.r !== 'undefined' ? color.r : r;
+        g = typeof color.g !== 'undefined' ? color.g : g;
+        b = typeof color.b !== 'undefined' ? color.b : b;
+        a = typeof color.a !== 'undefined' ? color.a : a;
       }
 
       if (typeof r != 'undefined' && typeof g != 'undefined' && typeof b != 'undefined') {
@@ -4614,150 +4946,2478 @@ var jmUtils = /*#__PURE__*/function () {
 exports.jmUtils = exports["default"] = jmUtils;
 
 },{"./jmList.js":6}],12:[function(require,module,exports){
-"use strict";
-
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+'use strict';
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.jmArc = exports["default"] = void 0;
+exports["default"] = void 0;
+var _default = earcut;
+exports["default"] = _default;
+
+function earcut(data, holeIndices, dim) {
+  dim = dim || 2;
+  var hasHoles = holeIndices && holeIndices.length,
+      outerLen = hasHoles ? holeIndices[0] * dim : data.length,
+      outerNode = linkedList(data, 0, outerLen, dim, true),
+      triangles = [];
+  if (!outerNode || outerNode.next === outerNode.prev) return triangles;
+  var minX, minY, maxX, maxY, x, y, invSize;
+  if (hasHoles) outerNode = eliminateHoles(data, holeIndices, outerNode, dim); // if the shape is not too simple, we'll use z-order curve hash later; calculate polygon bbox
+
+  if (data.length > 80 * dim) {
+    minX = maxX = data[0];
+    minY = maxY = data[1];
+
+    for (var i = dim; i < outerLen; i += dim) {
+      x = data[i];
+      y = data[i + 1];
+      if (x < minX) minX = x;
+      if (y < minY) minY = y;
+      if (x > maxX) maxX = x;
+      if (y > maxY) maxY = y;
+    } // minX, minY and invSize are later used to transform coords into integers for z-order calculation
+
+
+    invSize = Math.max(maxX - minX, maxY - minY);
+    invSize = invSize !== 0 ? 32767 / invSize : 0;
+  }
 
-var _jmPath2 = require("../core/jmPath.js");
+  earcutLinked(outerNode, triangles, dim, minX, minY, invSize, 0);
+  return triangles;
+} // create a circular doubly linked list from polygon points in the specified winding order
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+function linkedList(data, start, end, dim, clockwise) {
+  var i, last;
 
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+  if (clockwise === signedArea(data, start, end, dim) > 0) {
+    for (i = start; i < end; i += dim) {
+      last = insertNode(i, data[i], data[i + 1], last);
+    }
+  } else {
+    for (i = end - dim; i >= start; i -= dim) {
+      last = insertNode(i, data[i], data[i + 1], last);
+    }
+  }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+  if (last && equals(last, last.next)) {
+    removeNode(last);
+    last = last.next;
+  }
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+  return last;
+} // eliminate colinear or duplicate points
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function filterPoints(start, end) {
+  if (!start) return start;
+  if (!end) end = start;
+  var p = start,
+      again;
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+  do {
+    again = false;
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+    if (!p.steiner && (equals(p, p.next) || area(p.prev, p, p.next) === 0)) {
+      removeNode(p);
+      p = end = p.prev;
+      if (p === p.next) break;
+      again = true;
+    } else {
+      p = p.next;
+    }
+  } while (again || p !== end);
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+  return end;
+} // main ear slicing loop which triangulates a polygon (given as a linked list)
 
-/**
- * 圆弧图型 继承自jmPath
- *
- * @class jmArc
- * @extends jmPath
- * @param {object} params center=当前圆弧中心,radius=圆弧半径,start=圆弧起始角度,end=圆弧结束角度,anticlockwise=  false  顺时针，true 逆时针
- */
-var jmArc = /*#__PURE__*/function (_jmPath) {
-  _inherits(jmArc, _jmPath);
 
-  var _super = _createSuper(jmArc);
+function earcutLinked(ear, triangles, dim, minX, minY, invSize, pass) {
+  if (!ear) return; // interlink polygon nodes in z-order
 
-  function jmArc(params) {
-    var _this;
+  if (!pass && invSize) indexCurve(ear, minX, minY, invSize);
+  var stop = ear,
+      prev,
+      next; // iterate through ears, slicing them one by one
 
-    var t = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'jmArc';
+  while (ear.prev !== ear.next) {
+    prev = ear.prev;
+    next = ear.next;
 
-    _classCallCheck(this, jmArc);
+    if (invSize ? isEarHashed(ear, minX, minY, invSize) : isEar(ear)) {
+      // cut off the triangle
+      triangles.push(prev.i / dim | 0);
+      triangles.push(ear.i / dim | 0);
+      triangles.push(next.i / dim | 0);
+      removeNode(ear); // skipping the next vertex leads to less sliver triangles
 
-    if (!params) params = {};
-    _this = _super.call(this, params, t);
-    _this.center = params.center || {
-      x: 0,
-      y: 0
-    };
-    _this.radius = params.radius || 0;
-    _this.startAngle = params.start || params.startAngle || 0;
-    _this.endAngle = params.end || params.endAngle || Math.PI * 2;
-    _this.anticlockwise = params.anticlockwise || 0;
-    _this.isFan = !!params.isFan;
-    return _this;
-  }
-  /**
-   * 中心点
-   * point格式：{x:0,y:0,m:true}
-   * @property center
-   * @type {point}
-   */
+      ear = next.next;
+      stop = next.next;
+      continue;
+    }
 
+    ear = next; // if we looped through the whole remaining polygon and can't find any more ears
 
-  _createClass(jmArc, [{
-    key: "center",
-    get: function get() {
-      return this.__pro('center');
-    },
-    set: function set(v) {
-      this.needUpdate = true;
-      return this.__pro('center', v);
-    }
-    /**
-     * 半径
-     * @property radius
-     * @type {number}
-     */
+    if (ear === stop) {
+      // try filtering points and slicing again
+      if (!pass) {
+        earcutLinked(filterPoints(ear), triangles, dim, minX, minY, invSize, 1); // if this didn't work, try curing all small self-intersections locally
+      } else if (pass === 1) {
+        ear = cureLocalIntersections(filterPoints(ear), triangles, dim);
+        earcutLinked(ear, triangles, dim, minX, minY, invSize, 2); // as a last resort, try splitting the remaining polygon into two
+      } else if (pass === 2) {
+        splitEarcut(ear, triangles, dim, minX, minY, invSize);
+      }
 
-  }, {
-    key: "radius",
-    get: function get() {
-      return this.__pro('radius');
-    },
-    set: function set(v) {
-      this.needUpdate = true;
-      return this.__pro('radius', v);
+      break;
     }
-    /**
-     * 扇形起始角度
-     * @property startAngle
-     * @type {number}
-     */
+  }
+} // check whether a polygon node forms a valid ear with adjacent nodes
+
+
+function isEar(ear) {
+  var a = ear.prev,
+      b = ear,
+      c = ear.next;
+  if (area(a, b, c) >= 0) return false; // reflex, can't be an ear
+  // now make sure we don't have other points inside the potential ear
+
+  var ax = a.x,
+      bx = b.x,
+      cx = c.x,
+      ay = a.y,
+      by = b.y,
+      cy = c.y; // triangle bbox; min & max are calculated like this for speed
+
+  var x0 = ax < bx ? ax < cx ? ax : cx : bx < cx ? bx : cx,
+      y0 = ay < by ? ay < cy ? ay : cy : by < cy ? by : cy,
+      x1 = ax > bx ? ax > cx ? ax : cx : bx > cx ? bx : cx,
+      y1 = ay > by ? ay > cy ? ay : cy : by > cy ? by : cy;
+  var p = c.next;
+
+  while (p !== a) {
+    if (p.x >= x0 && p.x <= x1 && p.y >= y0 && p.y <= y1 && pointInTriangle(ax, ay, bx, by, cx, cy, p.x, p.y) && area(p.prev, p, p.next) >= 0) return false;
+    p = p.next;
+  }
 
-  }, {
-    key: "startAngle",
-    get: function get() {
-      return this.__pro('startAngle');
-    },
-    set: function set(v) {
-      this.needUpdate = true;
-      return this.__pro('startAngle', v);
-    }
-    /**
-     * 扇形结束角度
-     * @property endAngle
-     * @type {number}
-     */
+  return true;
+}
+
+function isEarHashed(ear, minX, minY, invSize) {
+  var a = ear.prev,
+      b = ear,
+      c = ear.next;
+  if (area(a, b, c) >= 0) return false; // reflex, can't be an ear
+
+  var ax = a.x,
+      bx = b.x,
+      cx = c.x,
+      ay = a.y,
+      by = b.y,
+      cy = c.y; // triangle bbox; min & max are calculated like this for speed
+
+  var x0 = ax < bx ? ax < cx ? ax : cx : bx < cx ? bx : cx,
+      y0 = ay < by ? ay < cy ? ay : cy : by < cy ? by : cy,
+      x1 = ax > bx ? ax > cx ? ax : cx : bx > cx ? bx : cx,
+      y1 = ay > by ? ay > cy ? ay : cy : by > cy ? by : cy; // z-order range for the current triangle bbox;
+
+  var minZ = zOrder(x0, y0, minX, minY, invSize),
+      maxZ = zOrder(x1, y1, minX, minY, invSize);
+  var p = ear.prevZ,
+      n = ear.nextZ; // look for points inside the triangle in both directions
+
+  while (p && p.z >= minZ && n && n.z <= maxZ) {
+    if (p.x >= x0 && p.x <= x1 && p.y >= y0 && p.y <= y1 && p !== a && p !== c && pointInTriangle(ax, ay, bx, by, cx, cy, p.x, p.y) && area(p.prev, p, p.next) >= 0) return false;
+    p = p.prevZ;
+    if (n.x >= x0 && n.x <= x1 && n.y >= y0 && n.y <= y1 && n !== a && n !== c && pointInTriangle(ax, ay, bx, by, cx, cy, n.x, n.y) && area(n.prev, n, n.next) >= 0) return false;
+    n = n.nextZ;
+  } // look for remaining points in decreasing z-order
+
+
+  while (p && p.z >= minZ) {
+    if (p.x >= x0 && p.x <= x1 && p.y >= y0 && p.y <= y1 && p !== a && p !== c && pointInTriangle(ax, ay, bx, by, cx, cy, p.x, p.y) && area(p.prev, p, p.next) >= 0) return false;
+    p = p.prevZ;
+  } // look for remaining points in increasing z-order
+
+
+  while (n && n.z <= maxZ) {
+    if (n.x >= x0 && n.x <= x1 && n.y >= y0 && n.y <= y1 && n !== a && n !== c && pointInTriangle(ax, ay, bx, by, cx, cy, n.x, n.y) && area(n.prev, n, n.next) >= 0) return false;
+    n = n.nextZ;
+  }
 
-  }, {
-    key: "endAngle",
-    get: function get() {
-      return this.__pro('endAngle');
-    },
-    set: function set(v) {
-      this.needUpdate = true;
-      return this.__pro('endAngle', v);
-    }
-    /**
-     * 可选。规定应该逆时针还是顺时针绘图
-     * false  顺时针，true 逆时针
-     * @property anticlockwise
-     * @type {boolean}
-     */
+  return true;
+} // go through all polygon nodes and cure small local self-intersections
 
-  }, {
-    key: "anticlockwise",
-    get: function get() {
-      return this.__pro('anticlockwise');
-    },
-    set: function set(v) {
-      this.needUpdate = true;
-      return this.__pro('anticlockwise', v);
+
+function cureLocalIntersections(start, triangles, dim) {
+  var p = start;
+
+  do {
+    var a = p.prev,
+        b = p.next.next;
+
+    if (!equals(a, b) && intersects(a, p, p.next, b) && locallyInside(a, b) && locallyInside(b, a)) {
+      triangles.push(a.i / dim | 0);
+      triangles.push(p.i / dim | 0);
+      triangles.push(b.i / dim | 0); // remove two nodes involved
+
+      removeNode(p);
+      removeNode(p.next);
+      p = start = b;
     }
-    /**
-     * 初始化图形点
-     * 
+
+    p = p.next;
+  } while (p !== start);
+
+  return filterPoints(p);
+} // try splitting polygon into two and triangulate them independently
+
+
+function splitEarcut(start, triangles, dim, minX, minY, invSize) {
+  // look for a valid diagonal that divides the polygon into two
+  var a = start;
+
+  do {
+    var b = a.next.next;
+
+    while (b !== a.prev) {
+      if (a.i !== b.i && isValidDiagonal(a, b)) {
+        // split the polygon in two by the diagonal
+        var c = splitPolygon(a, b); // filter colinear points around the cuts
+
+        a = filterPoints(a, a.next);
+        c = filterPoints(c, c.next); // run earcut on each half
+
+        earcutLinked(a, triangles, dim, minX, minY, invSize, 0);
+        earcutLinked(c, triangles, dim, minX, minY, invSize, 0);
+        return;
+      }
+
+      b = b.next;
+    }
+
+    a = a.next;
+  } while (a !== start);
+} // link every hole into the outer loop, producing a single-ring polygon without holes
+
+
+function eliminateHoles(data, holeIndices, outerNode, dim) {
+  var queue = [],
+      i,
+      len,
+      start,
+      end,
+      list;
+
+  for (i = 0, len = holeIndices.length; i < len; i++) {
+    start = holeIndices[i] * dim;
+    end = i < len - 1 ? holeIndices[i + 1] * dim : data.length;
+    list = linkedList(data, start, end, dim, false);
+    if (list === list.next) list.steiner = true;
+    queue.push(getLeftmost(list));
+  }
+
+  queue.sort(compareX); // process holes from left to right
+
+  for (i = 0; i < queue.length; i++) {
+    outerNode = eliminateHole(queue[i], outerNode);
+  }
+
+  return outerNode;
+}
+
+function compareX(a, b) {
+  return a.x - b.x;
+} // find a bridge between vertices that connects hole with an outer ring and and link it
+
+
+function eliminateHole(hole, outerNode) {
+  var bridge = findHoleBridge(hole, outerNode);
+
+  if (!bridge) {
+    return outerNode;
+  }
+
+  var bridgeReverse = splitPolygon(bridge, hole); // filter collinear points around the cuts
+
+  filterPoints(bridgeReverse, bridgeReverse.next);
+  return filterPoints(bridge, bridge.next);
+} // David Eberly's algorithm for finding a bridge between hole and outer polygon
+
+
+function findHoleBridge(hole, outerNode) {
+  var p = outerNode,
+      hx = hole.x,
+      hy = hole.y,
+      qx = -Infinity,
+      m; // find a segment intersected by a ray from the hole's leftmost point to the left;
+  // segment's endpoint with lesser x will be potential connection point
+
+  do {
+    if (hy <= p.y && hy >= p.next.y && p.next.y !== p.y) {
+      var x = p.x + (hy - p.y) * (p.next.x - p.x) / (p.next.y - p.y);
+
+      if (x <= hx && x > qx) {
+        qx = x;
+        m = p.x < p.next.x ? p : p.next;
+        if (x === hx) return m; // hole touches outer segment; pick leftmost endpoint
+      }
+    }
+
+    p = p.next;
+  } while (p !== outerNode);
+
+  if (!m) return null; // look for points inside the triangle of hole point, segment intersection and endpoint;
+  // if there are no points found, we have a valid connection;
+  // otherwise choose the point of the minimum angle with the ray as connection point
+
+  var stop = m,
+      mx = m.x,
+      my = m.y,
+      tanMin = Infinity,
+      tan;
+  p = m;
+
+  do {
+    if (hx >= p.x && p.x >= mx && hx !== p.x && pointInTriangle(hy < my ? hx : qx, hy, mx, my, hy < my ? qx : hx, hy, p.x, p.y)) {
+      tan = Math.abs(hy - p.y) / (hx - p.x); // tangential
+
+      if (locallyInside(p, hole) && (tan < tanMin || tan === tanMin && (p.x > m.x || p.x === m.x && sectorContainsSector(m, p)))) {
+        m = p;
+        tanMin = tan;
+      }
+    }
+
+    p = p.next;
+  } while (p !== stop);
+
+  return m;
+} // whether sector in vertex m contains sector in vertex p in the same coordinates
+
+
+function sectorContainsSector(m, p) {
+  return area(m.prev, m, p.prev) < 0 && area(p.next, m, m.next) < 0;
+} // interlink polygon nodes in z-order
+
+
+function indexCurve(start, minX, minY, invSize) {
+  var p = start;
+
+  do {
+    if (p.z === 0) p.z = zOrder(p.x, p.y, minX, minY, invSize);
+    p.prevZ = p.prev;
+    p.nextZ = p.next;
+    p = p.next;
+  } while (p !== start);
+
+  p.prevZ.nextZ = null;
+  p.prevZ = null;
+  sortLinked(p);
+} // Simon Tatham's linked list merge sort algorithm
+// http://www.chiark.greenend.org.uk/~sgtatham/algorithms/listsort.html
+
+
+function sortLinked(list) {
+  var i,
+      p,
+      q,
+      e,
+      tail,
+      numMerges,
+      pSize,
+      qSize,
+      inSize = 1;
+
+  do {
+    p = list;
+    list = null;
+    tail = null;
+    numMerges = 0;
+
+    while (p) {
+      numMerges++;
+      q = p;
+      pSize = 0;
+
+      for (i = 0; i < inSize; i++) {
+        pSize++;
+        q = q.nextZ;
+        if (!q) break;
+      }
+
+      qSize = inSize;
+
+      while (pSize > 0 || qSize > 0 && q) {
+        if (pSize !== 0 && (qSize === 0 || !q || p.z <= q.z)) {
+          e = p;
+          p = p.nextZ;
+          pSize--;
+        } else {
+          e = q;
+          q = q.nextZ;
+          qSize--;
+        }
+
+        if (tail) tail.nextZ = e;else list = e;
+        e.prevZ = tail;
+        tail = e;
+      }
+
+      p = q;
+    }
+
+    tail.nextZ = null;
+    inSize *= 2;
+  } while (numMerges > 1);
+
+  return list;
+} // z-order of a point given coords and inverse of the longer side of data bbox
+
+
+function zOrder(x, y, minX, minY, invSize) {
+  // coords are transformed into non-negative 15-bit integer range
+  x = (x - minX) * invSize | 0;
+  y = (y - minY) * invSize | 0;
+  x = (x | x << 8) & 0x00FF00FF;
+  x = (x | x << 4) & 0x0F0F0F0F;
+  x = (x | x << 2) & 0x33333333;
+  x = (x | x << 1) & 0x55555555;
+  y = (y | y << 8) & 0x00FF00FF;
+  y = (y | y << 4) & 0x0F0F0F0F;
+  y = (y | y << 2) & 0x33333333;
+  y = (y | y << 1) & 0x55555555;
+  return x | y << 1;
+} // find the leftmost node of a polygon ring
+
+
+function getLeftmost(start) {
+  var p = start,
+      leftmost = start;
+
+  do {
+    if (p.x < leftmost.x || p.x === leftmost.x && p.y < leftmost.y) leftmost = p;
+    p = p.next;
+  } while (p !== start);
+
+  return leftmost;
+} // check if a point lies within a convex triangle
+
+
+function pointInTriangle(ax, ay, bx, by, cx, cy, px, py) {
+  return (cx - px) * (ay - py) >= (ax - px) * (cy - py) && (ax - px) * (by - py) >= (bx - px) * (ay - py) && (bx - px) * (cy - py) >= (cx - px) * (by - py);
+} // check if a diagonal between two polygon nodes is valid (lies in polygon interior)
+
+
+function isValidDiagonal(a, b) {
+  return a.next.i !== b.i && a.prev.i !== b.i && !intersectsPolygon(a, b) && (locallyInside(a, b) && locallyInside(b, a) && middleInside(a, b) && (area(a.prev, a, b.prev) || area(a, b.prev, b)) || // does not create opposite-facing sectors
+  equals(a, b) && area(a.prev, a, a.next) > 0 && area(b.prev, b, b.next) > 0); // special zero-length case
+} // signed area of a triangle
+
+
+function area(p, q, r) {
+  return (q.y - p.y) * (r.x - q.x) - (q.x - p.x) * (r.y - q.y);
+} // check if two points are equal
+
+
+function equals(p1, p2) {
+  return p1.x === p2.x && p1.y === p2.y;
+} // check if two segments intersect
+
+
+function intersects(p1, q1, p2, q2) {
+  var o1 = sign(area(p1, q1, p2));
+  var o2 = sign(area(p1, q1, q2));
+  var o3 = sign(area(p2, q2, p1));
+  var o4 = sign(area(p2, q2, q1));
+  if (o1 !== o2 && o3 !== o4) return true; // general case
+
+  if (o1 === 0 && onSegment(p1, p2, q1)) return true; // p1, q1 and p2 are collinear and p2 lies on p1q1
+
+  if (o2 === 0 && onSegment(p1, q2, q1)) return true; // p1, q1 and q2 are collinear and q2 lies on p1q1
+
+  if (o3 === 0 && onSegment(p2, p1, q2)) return true; // p2, q2 and p1 are collinear and p1 lies on p2q2
+
+  if (o4 === 0 && onSegment(p2, q1, q2)) return true; // p2, q2 and q1 are collinear and q1 lies on p2q2
+
+  return false;
+} // for collinear points p, q, r, check if point q lies on segment pr
+
+
+function onSegment(p, q, r) {
+  return q.x <= Math.max(p.x, r.x) && q.x >= Math.min(p.x, r.x) && q.y <= Math.max(p.y, r.y) && q.y >= Math.min(p.y, r.y);
+}
+
+function sign(num) {
+  return num > 0 ? 1 : num < 0 ? -1 : 0;
+} // check if a polygon diagonal intersects any polygon segments
+
+
+function intersectsPolygon(a, b) {
+  var p = a;
+
+  do {
+    if (p.i !== a.i && p.next.i !== a.i && p.i !== b.i && p.next.i !== b.i && intersects(p, p.next, a, b)) return true;
+    p = p.next;
+  } while (p !== a);
+
+  return false;
+} // check if a polygon diagonal is locally inside the polygon
+
+
+function locallyInside(a, b) {
+  return area(a.prev, a, a.next) < 0 ? area(a, b, a.next) >= 0 && area(a, a.prev, b) >= 0 : area(a, b, a.prev) < 0 || area(a, a.next, b) < 0;
+} // check if the middle point of a polygon diagonal is inside the polygon
+
+
+function middleInside(a, b) {
+  var p = a,
+      inside = false,
+      px = (a.x + b.x) / 2,
+      py = (a.y + b.y) / 2;
+
+  do {
+    if (p.y > py !== p.next.y > py && p.next.y !== p.y && px < (p.next.x - p.x) * (py - p.y) / (p.next.y - p.y) + p.x) inside = !inside;
+    p = p.next;
+  } while (p !== a);
+
+  return inside;
+} // link two polygon vertices with a bridge; if the vertices belong to the same ring, it splits polygon into two;
+// if one belongs to the outer ring and another to a hole, it merges it into a single ring
+
+
+function splitPolygon(a, b) {
+  var a2 = new Node(a.i, a.x, a.y),
+      b2 = new Node(b.i, b.x, b.y),
+      an = a.next,
+      bp = b.prev;
+  a.next = b;
+  b.prev = a;
+  a2.next = an;
+  an.prev = a2;
+  b2.next = a2;
+  a2.prev = b2;
+  bp.next = b2;
+  b2.prev = bp;
+  return b2;
+} // create a node and optionally link it with previous one (in a circular doubly linked list)
+
+
+function insertNode(i, x, y, last) {
+  var p = new Node(i, x, y);
+
+  if (!last) {
+    p.prev = p;
+    p.next = p;
+  } else {
+    p.next = last.next;
+    p.prev = last;
+    last.next.prev = p;
+    last.next = p;
+  }
+
+  return p;
+}
+
+function removeNode(p) {
+  p.next.prev = p.prev;
+  p.prev.next = p.next;
+  if (p.prevZ) p.prevZ.nextZ = p.nextZ;
+  if (p.nextZ) p.nextZ.prevZ = p.prevZ;
+}
+
+function Node(i, x, y) {
+  // vertex index in coordinates array
+  this.i = i; // vertex coordinates
+
+  this.x = x;
+  this.y = y; // previous and next vertex nodes in a polygon ring
+
+  this.prev = null;
+  this.next = null; // z-order curve value
+
+  this.z = 0; // previous and next nodes in z-order
+
+  this.prevZ = null;
+  this.nextZ = null; // indicates whether this is a steiner point
+
+  this.steiner = false;
+} // return a percentage difference between the polygon area and its triangulation area;
+// used to verify correctness of triangulation
+
+
+earcut.deviation = function (data, holeIndices, dim, triangles) {
+  var hasHoles = holeIndices && holeIndices.length;
+  var outerLen = hasHoles ? holeIndices[0] * dim : data.length;
+  var polygonArea = Math.abs(signedArea(data, 0, outerLen, dim));
+
+  if (hasHoles) {
+    for (var i = 0, len = holeIndices.length; i < len; i++) {
+      var start = holeIndices[i] * dim;
+      var end = i < len - 1 ? holeIndices[i + 1] * dim : data.length;
+      polygonArea -= Math.abs(signedArea(data, start, end, dim));
+    }
+  }
+
+  var trianglesArea = 0;
+
+  for (i = 0; i < triangles.length; i += 3) {
+    var a = triangles[i] * dim;
+    var b = triangles[i + 1] * dim;
+    var c = triangles[i + 2] * dim;
+    trianglesArea += Math.abs((data[a] - data[c]) * (data[b + 1] - data[a + 1]) - (data[a] - data[b]) * (data[c + 1] - data[a + 1]));
+  }
+
+  return polygonArea === 0 && trianglesArea === 0 ? 0 : Math.abs((trianglesArea - polygonArea) / polygonArea);
+};
+
+function signedArea(data, start, end, dim) {
+  var sum = 0;
+
+  for (var i = start, j = end - dim; i < end; i += dim) {
+    sum += (data[j] - data[i]) * (data[i + 1] + data[j + 1]);
+    j = i;
+  }
+
+  return sum;
+} // turn a polygon in a multi-dimensional array form (e.g. as in GeoJSON) into a form Earcut accepts
+
+
+earcut.flatten = function (data) {
+  var dim = data[0][0].length,
+      result = {
+    vertices: [],
+    holes: [],
+    dimensions: dim
+  },
+      holeIndex = 0;
+
+  for (var i = 0; i < data.length; i++) {
+    for (var j = 0; j < data[i].length; j++) {
+      for (var d = 0; d < dim; d++) {
+        result.vertices.push(data[i][j][d]);
+      }
+    }
+
+    if (i > 0) {
+      holeIndex += data[i - 1].length;
+      result.holes.push(holeIndex);
+    }
+  }
+
+  return result;
+};
+
+},{}],13:[function(require,module,exports){
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _earcut = _interopRequireDefault(require("../earcut.js"));
+
+var _gradient = _interopRequireDefault(require("./gradient.js"));
+
+var _program = require("./core/program.js");
+
+var _buffer = require("./core/buffer.js");
+
+var _texture = require("./core/texture.js");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+var WeblBase = /*#__PURE__*/function () {
+  function WeblBase(graph, option) {
+    _classCallCheck(this, WeblBase);
+
+    this.graph = graph;
+    this.option = option || {};
+    this.style = {
+      globalAlpha: 1
+    };
+  }
+
+  _createClass(WeblBase, [{
+    key: "context",
+    get: function get() {
+      if (this.graph) return this.graph.context;
+    } // 创建程序
+
+  }, {
+    key: "createProgram",
+    value: function createProgram(vertexSrc, fragmentSrc) {
+      return (0, _program.createProgram)(this.context, vertexSrc, fragmentSrc);
+    } // 指定使用某个程序
+
+  }, {
+    key: "useProgram",
+    value: function useProgram() {
+      var program = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.program;
+      program = program.program || program;
+      if (this.context.__curent_program === program) return program;
+      (0, _program.useProgram)(this.context, program.program || program);
+      this.context.__curent_program = program;
+      return program;
+    }
+  }, {
+    key: "getAttribLocation",
+    value: function getAttribLocation(name) {
+      return this.context.getAttribLocation(this.program.program, name);
+    }
+  }, {
+    key: "getUniformLocation",
+    value: function getUniformLocation(name) {
+      return this.context.getUniformLocation(this.program.program, name);
+    } // 把缓冲区的值写入变量
+    // buffer: 缓冲区
+    // size: 组成数量，必须是1，2，3或4.  每个单元由多少个数组成
+    // strip: 步长 数组中一行长度，0 表示数据是紧密的没有空隙，让OpenGL决定具体步长
+    // offset: 字节偏移量，必须是类型的字节长度的倍数。
+    // dataType: 每个元素的数据类型
+
+  }, {
+    key: "writeVertexAttrib",
+    value: function writeVertexAttrib(buffer, attr) {
+      var size = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 2;
+      var strip = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+      var offset = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+      var dataType = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : this.context.FLOAT;
+      buffer.attr = attr;
+      return (0, _program.writeVertexAttrib)(this.context, buffer, attr, size, strip, offset, dataType);
+    } // 禁用attri
+
+  }, {
+    key: "disableVertexAttribArray",
+    value: function disableVertexAttribArray(attr) {
+      try {
+        if (!attr) return attr;
+        return (0, _program.disableVertexAttribArray)(this.context, attr);
+      } catch (e) {
+        console.error(e);
+      }
+
+      return attr;
+    } // 创建float32的buffer
+
+  }, {
+    key: "createFloat32Buffer",
+    value: function createFloat32Buffer(data) {
+      var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.context.ARRAY_BUFFER;
+      var drawType = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this.context.STATIC_DRAW;
+      var buffer = (0, _buffer.createFloat32Buffer)(this.context, data, type, drawType);
+      return _objectSpread({
+        data: data
+      }, buffer);
+    }
+  }, {
+    key: "createUint16Buffer",
+    value: function createUint16Buffer(data) {
+      var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.context.ARRAY_BUFFER;
+      var drawType = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this.context.STATIC_DRAW;
+      var buffer = (0, _buffer.createUint16Buffer)(this.context, data, type, drawType);
+      return _objectSpread({
+        data: data
+      }, buffer);
+    } // 释放
+
+  }, {
+    key: "deleteBuffer",
+    value: function deleteBuffer(buffer) {
+      try {
+        if (!buffer) return;
+        var bufferHandler = buffer.buffer || buffer;
+        if (bufferHandler) return (0, _buffer.deleteBuffer)(this.context, bufferHandler);
+      } catch (e) {
+        console.log(buffer);
+        console.error(e);
+      }
+
+      return buffer;
+    } // 生成纹理
+
+  }, {
+    key: "create2DTexture",
+    value: function create2DTexture() {
+      return (0, _texture.create2DTexture)(this.context);
+    } // 创建图片纹理
+
+  }, {
+    key: "createImgTexture",
+    value: function createImgTexture(img) {
+      return (0, _texture.createImgTexture)(this.context, img);
+    } // 根根像素值生成纹理
+
+  }, {
+    key: "createDataTexture",
+    value: function createDataTexture(data) {
+      return (0, _texture.createDataTexture)(this.context, data);
+    } // 删除纹理
+
+  }, {
+    key: "deleteTexture",
+    value: function deleteTexture(texture) {
+      try {
+        return (0, _texture.deleteTexture)(this.context, texture.texture || texture);
+      } catch (e) {
+        console.error(e);
+      }
+
+      return texture;
+    } // 多边切割, 得到三角形顶点索引数组
+    // polygonIndices 顶点索引，
+
+  }, {
+    key: "earCutPoints",
+    value: function earCutPoints(points) {
+      var arr = this.pointsToArray(points);
+      var ps = (0, _earcut["default"])(arr); // 切割得到3角色顶点索引，
+
+      return ps;
+    } // 多边切割, 得到三角形顶点
+    // polygonIndices 顶点索引，
+
+  }, {
+    key: "earCutPointsToTriangles",
+    value: function earCutPointsToTriangles(points) {
+      var ps = this.earCutPoints(points); // 切割得到3角色顶点索引，
+
+      var triangles = []; // 用顶点索引再组合成坐标数组
+
+      for (var i = 0; i < ps.length; i += 3) {
+        var p1 = points[ps[i]];
+        var p2 = points[ps[i + 1]];
+        var p3 = points[ps[i + 2]];
+        triangles.push([p1, p2, p3]); // 每三个顶点构成一个三角
+      }
+
+      return triangles;
+    } // 点坐标数组转为一维数组
+
+  }, {
+    key: "pointsToArray",
+    value: function pointsToArray(points) {
+      var _ref;
+
+      return (_ref = []).concat.apply(_ref, _toConsumableArray(points.map(function (p) {
+        return [p.x, p.y];
+      }))); // 把x,y转为数组元素
+    } // 每2位表示坐标x,y转为坐标点对象
+
+  }, {
+    key: "arrayToPoints",
+    value: function arrayToPoints(arr) {
+      var points = [];
+
+      for (var i = 0; i < arr.length; i += 2) {
+        points.push({
+          x: arr[i],
+          y: arr[i + 1]
+        });
+      }
+
+      return points;
+    } // 创建线性渐变
+
+  }, {
+    key: "createLinearGradient",
+    value: function createLinearGradient(x1, y1, x2, y2, bounds) {
+      return new _gradient["default"]('linear', {
+        x1: x1,
+        y1: y1,
+        x2: x2,
+        y2: y2,
+        bounds: bounds,
+        control: this
+      });
+    } // 创建放射性渐变
+
+  }, {
+    key: "createRadialGradient",
+    value: function createRadialGradient(x1, y1, r1, x2, y2, r2, bounds) {
+      return new _gradient["default"]('radial', {
+        x1: x1,
+        y1: y1,
+        r1: r1,
+        x2: x2,
+        y2: y2,
+        r2: r2,
+        bounds: bounds,
+        control: this
+      });
+    } // 判断是否是一个渐变对象
+
+  }, {
+    key: "isGradient",
+    value: function isGradient(obj) {
+      return obj && obj instanceof _gradient["default"];
+    }
+  }]);
+
+  return WeblBase;
+}();
+
+var _default = WeblBase;
+exports["default"] = _default;
+
+},{"../earcut.js":12,"./core/buffer.js":14,"./core/program.js":17,"./core/texture.js":19,"./gradient.js":20}],14:[function(require,module,exports){
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createBuffer = createBuffer;
+exports.createUint16Buffer = createUint16Buffer;
+exports.createFloat32Buffer = createFloat32Buffer;
+exports.deleteBuffer = deleteBuffer;
+
+// 创建缓冲区
+function createBuffer(gl, data) {
+  var type = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : gl.ARRAY_BUFFER;
+  var drawType = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : gl.STATIC_DRAW;
+  //先创建一个缓存对象
+  var buffer = gl.createBuffer();
+
+  if (!buffer) {
+    throw Error('创建缓冲区对象失败');
+  } //说明缓存对象保存的类型
+
+
+  gl.bindBuffer(type, buffer); //写入坐标数据
+  // 因为会将数据发送到 GPU，为了省去数据解析，这里使用 Float32Array 直接传送数据
+
+  gl.bufferData(type, data, drawType); // 表示缓冲区的内容不会经常更改
+
+  return {
+    type: type,
+    drawType: drawType,
+    buffer: buffer,
+    // 获取到数组中单个元素的字节数
+    unitSize: data.BYTES_PER_ELEMENT
+  };
+} // 创建float32的buffer
+
+
+function createFloat32Buffer(gl, data) {
+  var type = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : gl.ARRAY_BUFFER;
+  var drawType = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : gl.STATIC_DRAW;
+  var vertices = new Float32Array(data);
+  var buffer = createBuffer(gl, vertices, type, drawType);
+  return buffer;
+} // 创建uint16的bugger
+
+
+function createUint16Buffer(gl, data) {
+  var type = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : gl.ARRAY_BUFFER;
+  var drawType = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : gl.STATIC_DRAW;
+  var vertices = new Uint16Array(data);
+  var buffer = createBuffer(gl, vertices, type, drawType);
+  return buffer;
+} // 释放
+
+
+function deleteBuffer(gl, buffer) {
+  gl.deleteBuffer(buffer.buffer || buffer);
+}
+
+},{}],15:[function(require,module,exports){
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mapSize = void 0;
+var GLSL_TO_SIZE = {
+  'float': 1,
+  'vec2': 2,
+  'vec3': 3,
+  'vec4': 4,
+  'int': 1,
+  'ivec2': 2,
+  'ivec3': 3,
+  'ivec4': 4,
+  'bool': 1,
+  'bvec2': 2,
+  'bvec3': 3,
+  'bvec4': 4,
+  'mat2': 4,
+  'mat3': 9,
+  'mat4': 16,
+  'sampler2D': 1
+};
+/**
+ * @class
+ * @memberof PIXI.glCore.shader
+ * @param type {String}
+ * @return {Number}
+ */
+
+var mapSize = function mapSize(type) {
+  return GLSL_TO_SIZE[type];
+};
+
+exports.mapSize = mapSize;
+
+},{}],16:[function(require,module,exports){
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mapType = void 0;
+var GL_TABLE = null;
+var GL_TO_GLSL_TYPES = {
+  'FLOAT': 'float',
+  'FLOAT_VEC2': 'vec2',
+  'FLOAT_VEC3': 'vec3',
+  'FLOAT_VEC4': 'vec4',
+  'INT': 'int',
+  'INT_VEC2': 'ivec2',
+  'INT_VEC3': 'ivec3',
+  'INT_VEC4': 'ivec4',
+  'BOOL': 'bool',
+  'BOOL_VEC2': 'bvec2',
+  'BOOL_VEC3': 'bvec3',
+  'BOOL_VEC4': 'bvec4',
+  'FLOAT_MAT2': 'mat2',
+  'FLOAT_MAT3': 'mat3',
+  'FLOAT_MAT4': 'mat4',
+  'SAMPLER_2D': 'sampler2D'
+};
+
+var mapType = function mapType(gl, type) {
+  if (!GL_TABLE) {
+    var typeNames = Object.keys(GL_TO_GLSL_TYPES);
+    GL_TABLE = {};
+
+    for (var i = 0; i < typeNames.length; ++i) {
+      var tn = typeNames[i];
+      GL_TABLE[gl[tn]] = GL_TO_GLSL_TYPES[tn];
+    }
+  }
+
+  return GL_TABLE[type];
+};
+
+exports.mapType = mapType;
+
+},{}],17:[function(require,module,exports){
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createProgram = createProgram;
+exports.useProgram = useProgram;
+exports.getAttribLocation = getAttribLocation;
+exports.getUniformLocation = getUniformLocation;
+exports.extractAttributes = extractAttributes;
+exports.extractUniforms = extractUniforms;
+exports.writeVertexAttrib = writeVertexAttrib;
+exports.disableVertexAttribArray = disableVertexAttribArray;
+
+var _shader = require("./shader.js");
+
+var _mapSize = require("./mapSize.js");
+
+var _mapType = require("./mapType.js");
+
+// 创建程序
+function createProgram(gl, vertexSrc, fragmentSrc) {
+  // 创建顶点着色器
+  var vertexShader = (0, _shader.createShader)(gl, gl.VERTEX_SHADER, vertexSrc); // 创建片段着色器
+
+  var fragmentShader = (0, _shader.createShader)(gl, gl.FRAGMENT_SHADER, fragmentSrc);
+  var program = gl.createProgram(); // 创建一个程序
+
+  gl.attachShader(program, vertexShader); // 添加顶点着色器
+
+  gl.attachShader(program, fragmentShader); // 添加片元着色器
+
+  gl.linkProgram(program); // 连接 program 中的着色器
+  // 检查程序链接状态
+
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    console.error('PError: Could not initialize shader.');
+    console.error('gl.VALIDATE_STATUS', gl.getProgramParameter(program, gl.VALIDATE_STATUS));
+    console.error('gl.getError()', gl.getError()); // if there is a program info log, log it
+
+    if (gl.getProgramInfoLog(program) !== '') {
+      console.warn('Warning: gl.getProgramInfoLog()', gl.getProgramInfoLog(program));
+    }
+
+    gl.deleteProgram(program);
+  }
+
+  useProgram(gl, program); // clean up some shaders
+
+  gl.deleteShader(vertexShader);
+  gl.deleteShader(fragmentShader);
+  var attrs = extractAttributes(gl, program);
+  var uniforms = extractUniforms(gl, program);
+  return {
+    program: program,
+    attrs: attrs,
+    uniforms: uniforms
+  };
+} // 采用program
+
+
+function useProgram(gl, program) {
+  return gl.useProgram(program); // 告诉 webgl 用这个 program 进行渲染
+}
+
+function extractAttributes(gl, program) {
+  var attributes = {};
+  var count = gl.getProgramParameter(program, gl.ACTIVE_ATTRIBUTES);
+
+  for (var i = 0; i < count; i++) {
+    var attribData = gl.getActiveAttrib(program, i);
+    var type = (0, _mapType.mapType)(gl, attribData.type);
+    attributes[attribData.name] = {
+      attribData: attribData,
+      size: (0, _mapSize.mapSize)(type),
+      type: type,
+      location: gl.getAttribLocation(program, attribData.name)
+    };
+  }
+
+  return attributes;
+}
+
+function extractUniforms(gl, program) {
+  var uniforms = {};
+  var count = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS);
+
+  for (var i = 0; i < count; i++) {
+    var uniformData = gl.getActiveUniform(program, i);
+    var name = uniformData.name.replace(/\[.*?\]/, "");
+    var type = (0, _mapType.mapType)(gl, uniformData.type);
+    uniforms[name] = {
+      uniformData: uniformData,
+      type: type,
+      size: uniformData.size,
+      location: gl.getUniformLocation(program, name)
+    };
+  }
+
+  return uniforms;
+}
+
+; // 把缓冲区的值写入变量
+// size: 组成数量，必须是1，2，3或4.  每个单元由多少个数组成
+// strip: 步长 数组中一行长度，0 表示数据是紧密的没有空隙，让OpenGL决定具体步长
+// offset: 字节偏移量，必须是类型的字节长度的倍数。
+// dataType: 每个元素的数据类型
+
+function writeVertexAttrib(gl, buffer, attr) {
+  var size = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 2;
+  var strip = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+  var offset = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 0;
+  var dataType = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : gl.FLOAT;
+  gl.bindBuffer(buffer.type, buffer.buffer);
+  gl.vertexAttribPointer( // 告诉 OpenGL 如何从 Buffer 中获取数据
+  attr.location, // 顶点属性的索引
+  size, // 组成数量，必须是1，2，3或4。我们只提供了 x 和 y
+  dataType, false, // 是否归一化到特定的范围，对 FLOAT 类型数据设置无效
+  strip * buffer.unitSize, offset);
+  gl.enableVertexAttribArray(attr.location);
+  return buffer;
+}
+
+function disableVertexAttribArray(gl, attr) {
+  return gl.disableVertexAttribArray(attr.location);
+}
+
+function getAttribLocation(gl, program, name) {
+  return gl.getAttribLocation(program, name);
+}
+
+function getUniformLocation(gl, program, name) {
+  return gl.getUniformLocation(program, name);
+}
+
+},{"./mapSize.js":15,"./mapType.js":16,"./shader.js":18}],18:[function(require,module,exports){
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createShader = createShader;
+
+// 生成着色器
+// type: gl.VERTEX_SHADER 顶点着色器  , gl.FRAGMENT_SHADER  片段着色器
+// src: 着色器代码
+function createShader(gl, type, src) {
+  var shader = gl.createShader(type); // 创建一个顶点着色器
+
+  gl.shaderSource(shader, src); // 编写顶点着色器代码
+
+  gl.compileShader(shader); // 编译着色器
+
+  return shader;
+}
+
+},{}],19:[function(require,module,exports){
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.create2DTexture = create2DTexture;
+exports.createImgTexture = createImgTexture;
+exports.createDataTexture = createDataTexture;
+exports.deleteTexture = deleteTexture;
+
+// 生成纹理
+function create2DTexture(gl) {
+  var texture = gl.createTexture();
+  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1); // 图像反转Y轴
+
+  gl.activeTexture(gl.TEXTURE0); // 激活纹理单元
+
+  gl.bindTexture(gl.TEXTURE_2D, texture); // 绑定纹理对象
+
+  gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); // 放大处理方式
+
+  gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); // 缩小处理方式
+
+  gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); // 水平平铺方式
+
+  gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); // 竖直平铺方式
+
+  return texture;
+} // 创建图片纹理
+
+
+function createImgTexture(gl, img) {
+  var texture = create2DTexture(gl);
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img); // 配置纹理图像
+
+  return {
+    texture: texture
+  };
+} // 用像素值来绘制纹理
+
+
+function createDataTexture(gl, pixels) {
+  var data = new Uint8Array(pixels.data || pixels);
+  var texture = create2DTexture(gl);
+  gl.texImage2D(gl.TEXTURE_2D, // 纹理目标
+  0, // 细节级别,指定详细级别。0 级是基本图像等级，n 级是第 n 个金字塔简化级。
+  gl.RGBA, // 纹理内部格式
+  pixels.width || 1, // 指定纹理的宽度
+  pixels.height || 1, // 指定纹理的高度
+  0, // 指定纹理的边框宽度。必须为 0。
+  gl.RGBA, // 源图像数据格式
+  gl.UNSIGNED_BYTE, // 纹理数据类型
+  data // 数据
+  );
+  return {
+    texture: texture
+  };
+} // 删除纹理
+
+
+function deleteTexture(gl, texture) {
+  return gl.deleteTexture(texture);
+}
+
+},{}],20:[function(require,module,exports){
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+var WebglGradientTextureCache = {}; // 渐变
+
+var WeblGradient = /*#__PURE__*/function () {
+  // type:[linear= 线性渐变,radial=放射性渐变] 
+  function WeblGradient() {
+    var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'linear';
+    var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+    _classCallCheck(this, WeblGradient);
+
+    this.type = type || 'linear';
+    this.x1 = params.x1 || 0;
+    this.y1 = params.y1 || 0;
+    this.r1 = params.r1 || 0;
+    this.x2 = params.x2 || 0;
+    this.y2 = params.y2 || 0;
+    this.r2 = params.r2 || 0;
+    this.bounds = params.bounds || {
+      left: 0,
+      top: 0,
+      width: 0,
+      height: 0
+    };
+    this.control = params.control;
+    this.stops = [];
+    this.init();
+  }
+
+  _createClass(WeblGradient, [{
+    key: "init",
+    value: function init() {
+      var dx = this.x2 - this.x1;
+      var dy = this.y2 - this.y1;
+
+      if (this.type === 'radial') {
+        this.length = this.r2 - this.r1;
+      } else if (dx === 0 && dy === 0) {
+        this.length = 0;
+      } else {
+        // 渐变中心的距离
+        this.length = Math.sqrt(Math.pow(dx, 2), Math.pow(dy, 2));
+        this.sin = dy / this.length;
+        this.cos = dx / this.length;
+      }
+    } // 渐变颜色
+
+  }, {
+    key: "addColorStop",
+    value: function addColorStop(offset, color) {
+      this.stops.push({
+        offset: offset,
+        color: color
+      });
+    } // 转为渐变为纹理
+
+  }, {
+    key: "toImageData",
+    value: function toImageData(control, bounds) {
+      var key = this.toString() + "-".concat(bounds.width.toFixed(4), "x").concat(bounds.height.toFixed(4));
+      if (WebglGradientTextureCache[key]) return WebglGradientTextureCache[key];
+      var canvas = control.graph.textureCanvas;
+
+      if (!canvas) {
+        canvas = control.graph.textureCanvas = document.createElement('canvas');
+      }
+
+      canvas.width = bounds.width;
+      canvas.height = bounds.height;
+
+      if (!canvas.width || !canvas.height) {
+        return null;
+      }
+
+      var ctx = canvas.getContext('2d', {
+        willReadFrequently: true
+      });
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      var gradient = null;
+
+      if (this.type === 'linear') {
+        gradient = ctx.createLinearGradient(this.x1, this.y1, this.x2, this.y2);
+      } else {
+        gradient = ctx.createRadialGradient(this.x1, this.y1, this.r1, this.x2, this.y2, this.r2);
+      }
+
+      this.stops.forEach(function (s, i) {
+        var c = control.graph.utils.toColor(s.color);
+        gradient && gradient.addColorStop(s.offset, c);
+      });
+      ctx.fillStyle = gradient;
+      ctx.beginPath();
+      ctx.moveTo(0, 0);
+      ctx.lineTo(bounds.width, 0);
+      ctx.lineTo(bounds.width, bounds.height);
+      ctx.lineTo(0, bounds.height);
+      ctx.lineTo(0, 0);
+      ctx.closePath();
+      ctx.fill();
+      var data = ctx.getImageData(0, 0, canvas.width, canvas.height);
+      WebglGradientTextureCache[key] = data;
+      return data;
+    } // 根据绘制图形的坐标计算出对应点的颜色
+
+    /*
+    toPointColors(points) {
+        const stops = this.getStops();
+        const colors = [];
+        for(let i=0; i<points.length; i+=2) {
+            const p = {
+                x: points[i],
+                y: points[i+1]
+            }
+            if(this.type === 'radial') {
+                const dx = p.x - this.x1;
+                const dy = p.y - this.y1;
+                const len = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));
+                const rang = this.getStopRange(len, stops);
+                if(!rang.start && rang.end) {
+                    colors.push(rang.end.color);
+                }
+                else if(!rang.end && rang.start) {
+                    colors.push(rang.start.color);
+                }
+                else {
+                    const rangLength = rang.end.length - rang.start.length;
+                    const offlen = len - rang.start.length;
+                    const per = offlen / rangLength;
+                    const color = {
+                        r: rang.start.color.r + (rang.end.color.r - rang.start.color.r) * per,
+                        g: rang.start.color.g + (rang.end.color.g - rang.start.color.g) * per,
+                        b: rang.start.color.b + (rang.end.color.b - rang.start.color.b) * per,
+                        a: rang.start.color.a + (rang.end.color.a - rang.start.color.a) * per,
+                    };
+                    colors.push(color);
+                }
+            }
+        }
+        return colors;
+    }
+    */
+    // 根据起点距离获取边界stop
+
+    /*
+    getStopRange(len, stops) {
+        const res = {};
+        for(const s of stops) {
+            if(s.length <= len) {
+                res.start = s;
+            }
+            else {
+                res.end = s;
+            }
+        }
+        return res;
+    }
+      // 根据stop计算offset长度
+    getStops() {
+        const stops = this.stops.sort((p1, p2) => p1.offset - p2.offset); // 渐变色排序从小于大
+        for(const s of stops) {
+            
+            const color = typeof s.color === 'string'? this.control.graph.utils.hexToRGBA(s.color) : s.color;
+            console.log(s, color);
+            s.color = this.control.graph.utils.rgbToDecimal(color);
+            s.length = s.offset * this.length;
+        }
+        return stops;
+    }
+    */
+
+    /**
+    * 转换为渐变的字符串表达
+    *
+    * @method toString
+    * @for jmGradient
+    * @return {string} linear-gradient(x1 y1 x2 y2, color1 step, color2 step, ...);	//radial-gradient(x1 y1 r1 x2 y2 r2, color1 step,color2 step, ...);
+    */
+
+  }, {
+    key: "toString",
+    value: function toString() {
+      var str = this.type + '-gradient(';
+
+      if (this.type == 'linear') {
+        str += this.x1 + ' ' + this.y1 + ' ' + this.x2 + ' ' + this.y2;
+      } else {
+        str += this.x1 + ' ' + this.y1 + ' ' + this.r1 + ' ' + this.x2 + ' ' + this.y2 + ' ' + this.r2;
+      } //颜色渐变
+
+
+      this.stops.forEach(function (s) {
+        str += ',' + s.color + ' ' + s.offset;
+      });
+      return str + ')';
+    }
+  }]);
+
+  return WeblGradient;
+}();
+
+var _default = WeblGradient;
+exports["default"] = _default;
+
+},{}],21:[function(require,module,exports){
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _base = _interopRequireDefault(require("./base.js"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+// 把canvas坐标转为webgl坐标系
+var convertPointSource = "\n    vec4 translatePosition(vec4 point, float x, float y) {\n        point.x = (point.x-x)/x;\n        point.y = (y-point.y)/y;\n        return point;\n    }"; // 把纹理的canvas坐标转为纹理的坐标系
+
+var convertTexturePosition = "\n    vec2 translateTexturePosition(in vec2 point, vec4 bounds) {\n        point.x = (point.x-bounds.x)/bounds.z; // \u79BB\u5DE6\u4E0A\u89D2\u4F4D\u7F6E\u7684X\u957F\u6BD4\u4E0A\u7EB9\u7406\u5BBD 0-1\n        point.y = 1.0-(point.y-bounds.y)/bounds.w; // \u79BB\u5DE6\u4E0A\u89D2\u4F4D\u7F6E\u7684Y\u957F\u6BD4\u4E0A\u9AD8\uFF0C\u56E0\u4E3A\u7EB9\u7406\u5750\u6807\u662F\u5DE6\u4E0B\u89D2\u8D77\uFF0C\u6240\u4EE5\u8981\u75281-\n        return point;\n    }"; // path顶点着色器源码
+
+var pathVertexSource = "\n    attribute vec4 a_position;\n    attribute vec4 a_color;\n    attribute vec2 a_text_coord;\n    uniform vec2 a_center_point; // \u5F53\u524Dcanvas\u7684\u4E2D\u5FC3\u4F4D\u7F6E\n    uniform float a_point_size; // \u70B9\u7684\u5927\u5C0F\n    uniform int a_type;\n    varying vec4 v_color;\n    varying vec2 v_text_coord;\n    varying float v_type;\n\n    ".concat(convertPointSource, "\n\n    void main() {\n        gl_PointSize = a_point_size == 0.0? 1.0 : a_point_size;\n        v_type = float(a_type);\n        vec4 pos = translatePosition(a_position, a_center_point.x, a_center_point.y);\n        gl_Position = pos;\n        v_color = a_color;\n        if(a_type == 2) {\n            v_text_coord = a_text_coord;\n        }\n    }\n"); // path 片段着色器源码
+
+var pathFragmentSource = "\n    precision highp float;\n    uniform sampler2D u_sample;\n    uniform vec4 v_texture_bounds; // \u7EB9\u7406\u7684\u5DE6\u4E0A\u5750\u6807\u548C\u5927\u5C0F x,y,z,w\n    uniform vec4 v_single_color;\n    varying float v_type;\n    varying vec4 v_color;\n    varying vec2 v_text_coord;\n\n    ".concat(convertTexturePosition, "\n\n    void main() {\n        // \u5982\u679C\u662Ffill\uFF0C\u5219\u76F4\u63A5\u586B\u5145\u989C\u8272\n        if(v_type == 1.0) {\n            gl_FragColor = v_single_color;\n        }\n        // \u6E10\u53D8\u8272\n        else if(v_type == 3.0) {\n            gl_FragColor = v_color;\n        }\n        else if(v_type == 2.0) {\n            vec2 pos = translateTexturePosition(v_text_coord, v_texture_bounds);\n            gl_FragColor = texture2D(u_sample, pos);\n        }\n        else {\n            float r = distance(gl_PointCoord, vec2(0.5, 0.5));\n            //\u6839\u636E\u8DDD\u79BB\u8BBE\u7F6E\u7247\u5143\n            if(r <= 0.5){\n                // \u65B9\u5F62\u533A\u57DF\u7247\u5143\u8DDD\u79BB\u51E0\u4F55\u4E2D\u5FC3\u534A\u5F84\u5C0F\u4E8E0.5\uFF0C\u50CF\u7D20\u989C\u8272\u8BBE\u7F6E\u7EA2\u8272\n                gl_FragColor = v_single_color;\n            }else {\n                // \u65B9\u5F62\u533A\u57DF\u8DDD\u79BB\u51E0\u4F55\u4E2D\u5FC3\u534A\u5F84\u4E0D\u5C0F\u4E8E0.5\u7684\u7247\u5143\u526A\u88C1\u820D\u5F03\u6389\uFF1A\n                discard;\n            }\n        }\n    }\n"); // path 绘制类
+
+var WebglPath = /*#__PURE__*/function (_WebglBase) {
+  _inherits(WebglPath, _WebglBase);
+
+  var _super = _createSuper(WebglPath);
+
+  function WebglPath(graph, option) {
+    var _this;
+
+    _classCallCheck(this, WebglPath);
+
+    _this = _super.call(this, graph, option); // 是否是规则的，不规则的处理方式更为复杂和耗性能
+
+    _this.isRegular = option.isRegular || false;
+    _this.needCut = option.needCut || false;
+    _this.points = [];
+    return _this;
+  } // i当前程序
+
+
+  _createClass(WebglPath, [{
+    key: "program",
+    get: function get() {
+      // 默认所有path用同一个编译好的program
+      return this.graph.context.pathProgram || (this.graph.context.pathProgram = this.createProgram(pathVertexSource, pathFragmentSource));
+    } // 设置样式
+
+  }, {
+    key: "setStyle",
+    value: function setStyle() {
+      var style = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.style;
+      var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+      this.useProgram();
+
+      if (typeof style === 'string') {
+        var obj = {};
+        obj[style] = value;
+        style = obj;
+      } // 设置线条颜色或填充色
+
+
+      if (style.strokeStyle) {
+        var color = style.strokeStyle;
+        if (typeof color === 'string') color = this.graph.utils.hexToRGBA(color);
+        this.style.strokeStyle = this.graph.utils.rgbToDecimal(color);
+        delete style.strokeStyle;
+      } else if (style.fillStyle) {
+        var _color = style.fillStyle;
+
+        if (this.isGradient(_color)) {
+          this.style.fillStyle = _color;
+        } else {
+          if (typeof _color === 'string') _color = this.graph.utils.hexToRGBA(_color);
+          this.style.fillStyle = this.graph.utils.rgbToDecimal(_color);
+        }
+
+        delete style.fillStyle;
+      }
+
+      this.style = _objectSpread(_objectSpread({}, this.style), style);
+    }
+  }, {
+    key: "setParentBounds",
+    value: function setParentBounds() {
+      var parentBounds = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.parentAbsoluteBounds;
+      //this.useProgram();
+      if (parentBounds) this.parentAbsoluteBounds = parentBounds; // 写入当前canvas大小
+
+      this.context.uniform2f(this.program.uniforms.a_center_point.location, this.graph.width / 2, this.graph.height / 2);
+    }
+  }, {
+    key: "setFragColor",
+    value: function setFragColor(color) {
+      if (!Array.isArray(color)) {
+        if (typeof color === 'string') color = this.graph.utils.hexToRGBA(color);
+        if (typeof color.a === 'undefined') color.a = 1;
+        this.context.uniform4f(this.program.uniforms.v_single_color.location, color.r, color.g, color.b, color.a * this.style.globalAlpha);
+        return null;
+      }
+
+      var colorData = [];
+
+      var _iterator = _createForOfIteratorHelper(color),
+          _step;
+
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var c = _step.value;
+          if (typeof c === 'string') c = this.graph.utils.hexToRGBA(c);
+          if (typeof c.a === 'undefined') c.a = 1;
+          colorData.push(c.r, c.g, c.b, c.a * this.style.globalAlpha);
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+
+      var colorBuffer = this.createFloat32Buffer(colorData);
+      this.writeVertexAttrib(colorBuffer, this.program.attrs.a_color, 4, 0, 0);
+      colorBuffer.attr = this.program.attrs.a_color;
+      return colorBuffer;
+    }
+  }, {
+    key: "beginDraw",
+    value: function beginDraw() {
+      this.useProgram();
+    } // 开始绘制
+
+  }, {
+    key: "draw",
+    value: function draw(points) {
+      var parentBounds = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.parentAbsoluteBounds;
+      //this.useProgram();
+      this.setParentBounds(parentBounds);
+      this.points = points;
+    }
+  }, {
+    key: "endDraw",
+    value: function endDraw() {
+      if (this.points) delete this.points;
+      if (this.pathPoints) delete this.pathPoints;
+    } // 图形封闭
+
+  }, {
+    key: "closePath",
+    value: function closePath() {
+      if (this.points && this.points.length > 2 && this.points[0] !== this.points[this.points.length - 1]) {
+        var start = this.points[0];
+        var end = this.points[this.points.length - 1];
+        if (start != end && !(start.x === end.x && start.y === end.y)) this.points.push(start);
+      }
+    } // 绘制点数组
+
+  }, {
+    key: "writePoints",
+    value: function writePoints(points) {
+      var attr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.program.attrs.a_position;
+      var fixedPoints = [];
+
+      var _iterator2 = _createForOfIteratorHelper(points),
+          _step2;
+
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var p = _step2.value;
+          fixedPoints.push(p.x + this.parentAbsoluteBounds.left, p.y + this.parentAbsoluteBounds.top);
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+
+      var vertexBuffer = this.createFloat32Buffer(fixedPoints);
+      this.writeVertexAttrib(vertexBuffer, attr, 2, 0, 0);
+      vertexBuffer.attr = attr;
+      return vertexBuffer;
+    } // 连接二个点
+
+  }, {
+    key: "genLinePoints",
+    value: function genLinePoints(start, end) {
+      var points = [start];
+      var dx = end.x - start.x;
+      var dy = end.y - start.y;
+
+      if (dx !== 0 || dy !== 0) {
+        var len = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));
+        var cos = dx / len;
+        var sin = dy / len;
+        var step = 0.5;
+
+        for (var l = step; l < len; l += step) {
+          var x = start.x + cos * l;
+          var y = start.y + sin * l;
+          points.push({
+            x: Number(x.toFixed(2)),
+            y: Number(y.toFixed(2))
+          });
+        }
+      }
+
+      points.push(end);
+      return points;
+    } // 把path坐标集合分解成一个个点，并且处理moveTo线段能力
+
+  }, {
+    key: "pathToPoints",
+    value: function pathToPoints() {
+      var points = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.points;
+      var start = null;
+      var res = [];
+
+      for (var i = 0; i < points.length; i++) {
+        var p = points[i];
+
+        if (start && !p.m) {
+          var linePoints = this.genLinePoints(start, p);
+          res.push.apply(res, _toConsumableArray(linePoints));
+        } else if (start && !res.includes(start)) {
+          res.push(start);
+        }
+
+        start = p;
+      }
+
+      if (!res.includes(start)) res.push(start);
+      return res;
+    } // 二点是否重合
+
+  }, {
+    key: "equalPoint",
+    value: function equalPoint(p1, p2) {
+      return p1.x === p2.x && p1.y === p2.y;
+    } // 把path坐标集合转为线段集
+
+  }, {
+    key: "pathToLines",
+    value: function pathToLines(points) {
+      var start = null;
+      var res = [];
+
+      for (var i = 0; i < points.length; i++) {
+        var p = points[i]; // 不重合的二个点，组成线段
+
+        if (start && !p.m && !(start.x == p.x && start.y == p.y)) {
+          var line = {
+            start: start,
+            end: p
+          };
+          res.push(line);
+        }
+
+        start = p;
+      }
+
+      return res;
+    } // 裁剪线段，如果二段线段有交点，则分割成四段， 端头相交的线段不用分割
+
+  }, {
+    key: "cutLines",
+    value: function cutLines(lines) {
+      var index1 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+      var index2 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+      if (lines && lines.length < 3) return lines;
+      index2 = Math.max(index1 + 1, index2); //如果指定了比下一个更大的索引，则用更大的，说明前面的已经处理过了，不需要重复
+      // 找出线段相交的点，并切割线段
+
+      while (index1 < lines.length) {
+        var line1 = lines[index1];
+
+        while (index2 < lines.length) {
+          var line2 = lines[index2]; // 如果二条线顶点有重合，则不用处理
+
+          if (this.equalPoint(line1.start, line2.start) || this.equalPoint(line1.end, line2.end) || this.equalPoint(line1.start, line2.end) || this.equalPoint(line1.end, line2.start)) {
+            index2++;
+            continue;
+          }
+
+          var cuted = false;
+          var intersection = this.getIntersection(line1, line2); // 计算交点
+
+          if (intersection) {
+            // 如果交点不是线段的端点，则分割成二条线段
+            if (!this.equalPoint(line1.start, intersection) && !this.equalPoint(line1.end, intersection)) {
+              var sub1 = {
+                start: line1.start,
+                end: intersection
+              };
+              var sub2 = {
+                start: intersection,
+                end: line1.end
+              }; // 从原数组中删除当前线段，替换成新的线段
+
+              lines.splice(index1, 1, sub1, sub2); // 当前线段被重新替换，需要重新从它开始处理
+
+              cuted = true;
+              index2++; // 因为多加入了一个线段，则对比线索引需要加1
+            } // 如果交点不是线段的端点，则分割成二条线段
+
+
+            if (!this.equalPoint(line2.start, intersection) && !this.equalPoint(line2.end, intersection)) {
+              var _sub = {
+                start: line2.start,
+                end: intersection
+              };
+              var _sub2 = {
+                start: intersection,
+                end: line2.end
+              }; // 从原数组中删除当前线段，替换成新的线段
+
+              lines.splice(index2, 1, _sub, _sub2);
+              index2++; // 线段2也切成了二段，对比索引要继续加1
+            }
+          }
+
+          index2++; // 如果已经分割了起始线段，则第一个子线段开始，重新对比后面还未对比完的。直接所有对比完成返回
+
+          if (cuted) return this.cutLines(lines, index1, index2);
+        }
+
+        index1++;
+        index2 = index1 + 1;
+      }
+
+      return lines;
+    } // 计算二个线段的交点
+
+  }, {
+    key: "getIntersection",
+    value: function getIntersection(line1, line2) {
+      // 如果首尾相接，也认为是有交点
+      if (this.equalPoint(line1.start, line2.start) || this.equalPoint(line1.start, line2.end)) return line1.start;
+      if (this.equalPoint(line1.end, line2.start) || this.equalPoint(line1.end, line2.end)) return line1.end; // 三角形abc 面积的2倍
+
+      var area_abc = (line1.start.x - line2.start.x) * (line1.end.y - line2.start.y) - (line1.start.y - line2.start.y) * (line1.end.x - line2.start.x); // 三角形abd 面积的2倍
+
+      var area_abd = (line1.start.x - line2.end.x) * (line1.end.y - line2.end.y) - (line1.start.y - line2.end.y) * (line1.end.x - line2.end.x); // 面积符号相同则两点在线段同侧,不相交 (=0表示在线段顶点上);
+
+      if (area_abc * area_abd > 0) {
+        return null;
+      } // 三角形cda 面积的2倍
+
+
+      var area_cda = (line2.start.x - line1.start.x) * (line2.end.y - line1.start.y) - (line2.start.y - line1.start.y) * (line2.end.x - line1.start.x); // 三角形cdb 面积的2倍
+      // 注意: 这里有一个小优化.不需要再用公式计算面积,而是通过已知的三个面积加减得出.
+
+      var area_cdb = area_cda + area_abc - area_abd;
+
+      if (area_cda * area_cdb > 0) {
+        return null;
+      }
+
+      if (area_abd === area_abc) return null; //计算交点坐标
+
+      var t = area_cda / (area_abd - area_abc);
+      var dx = t * (line1.end.x - line1.start.x);
+      var dy = t * (line1.end.y - line1.start.y);
+      return {
+        x: Number((line1.start.x + dx).toFixed(2)),
+        y: Number((line1.start.y + dy).toFixed(2))
+      };
+    } // 找出跟当前线段尾部相交的所有线段
+
+  }, {
+    key: "getIntersectionLines",
+    value: function getIntersectionLines(line, lines, index) {
+      var point = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : line.end;
+      var points = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [];
+      var root = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : null;
+      var res = {
+        line: line,
+        polygons: []
+      };
+      points.push(point);
+
+      if (root && this.equalPoint(root.line.start, point)) {
+        points.unshift(root.line.start); // 把起始地址加入进去
+
+        root.polygons.push(points);
+        return res;
+      }
+
+      for (; index < lines.length; index++) {
+        var l = lines[index];
+
+        if (this.equalPoint(point, l.start)) {
+          if (points.includes(l.end)) continue;
+          this.getIntersectionLines(l, lines, index + 1, l.end, _toConsumableArray(points), root || res);
+        } else if (this.equalPoint(point, l.end)) {
+          if (points.includes(l.start)) continue;
+          this.getIntersectionLines(l, lines, index + 1, l.start, _toConsumableArray(points), root || res);
+        }
+      }
+
+      return res;
+    } // 根据路径点坐标，切割出封闭的多边形
+
+  }, {
+    key: "getPolygon",
+    value: function getPolygon(points) {
+      var polygons = [];
+      var lines = this.pathToLines(points); // 分解得到线段
+
+      if (lines && lines.length > 2) {
+        lines = this.cutLines(lines); // 把所有相交点切割线段找出来
+
+        for (var i = 0; i < lines.length - 1; i++) {
+          var line1 = lines[i];
+          var polygon = []; // 当前图形
+
+          var treeLine = this.getIntersectionLines(line1, lines, i + 1);
+          if (treeLine.polygons.length) polygons.push.apply(polygons, _toConsumableArray(treeLine.polygons));
+          continue;
+          var lastLine = line1; // 下一个还在连接状态的线
+
+          for (var j = i + 1; j < lines.length; j++) {
+            var line2 = lines[j]; // 如果跟下一条线相接，则表示还在形成图形中
+
+            if (this.equalPoint(lastLine.end, line2.start)) {
+              polygon.push(lastLine.end);
+              lastLine = line2;
+              if (i === j + 1) continue; //下一条相连 则不需要处理相交情况
+            } else {
+              polygon = [];
+            } // 因为前面进行了分割线段，则里只有处理端点相连的情况
+
+
+            var intersection = this.equalPoint(line1.start, line2.end) ? line1.start : null; //this.getIntersection(line1, line2);// 计算交点
+
+            if (intersection) {
+              polygon.push(intersection); // 交叉点为图形顶点
+              // 如果上一个连接线不是当前交叉线，则表示重新开始闭合
+              // 如果上一个连接线是当前交叉线，形成了封闭的图形
+
+              if (lastLine === line2 && polygon.length > 1) {
+                polygons.push(polygon); // 封闭后，下一个起始线条就是从交点开始计算起
+
+                /*lastLine = {
+                    start: intersection,
+                    end: line2.end
+                };*/
+
+                polygon = []; // 重新开始新一轮找图形
+
+                /*
+                // 如果交点是上一条线的终点，则新图形为空
+                if(this.equalPoint(line2.end, intersection)) {
+                    polygon = [];// 重新开始新一轮找图形
+                }
+                else {
+                    // 同时交点也要加到上一个图形中第一个点，形成封闭
+                    polygon.unshift(intersection);
+                      polygon = [ intersection ];// 重新开始新一轮找图形
+                }*/
+              } else {
+                lastLine = line2;
+              }
+            }
+          }
+        }
+      } // 当有多个封闭图形时，再弟归一下，里面是不是有封闭图形内还有子封闭图形
+
+      /*if(polygons.length > 1) {
+          const newPolygons = [];
+          for(const polygon of polygons) {
+              // 只有大于4才有可能有子封闭图形
+              if(polygon.length > 4) {
+                  const childPolygons = this.getPolygon(polygon);
+                  // 当有多个子图形时，表示它不是最终封闭图形，跳过，
+                  // 因为它的子图形之前有加入的，不需要重复加入
+                  if(childPolygons.length > 1) {
+                      //newPolygons.push(...childPolygons);
+                      continue;
+                  }
+              }
+              newPolygons.push(polygon);
+          }
+          polygons = newPolygons;
+      }*/
+
+
+      return polygons;
+    } // 画线条
+
+  }, {
+    key: "stroke",
+    value: function stroke() {
+      var points = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.points;
+      var color = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.style.strokeStyle;
+      var lineWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this.style.lineWidth;
+      if (!points || !points.length) return; // this.useProgram();
+
+      var colorBuffer = null;
+
+      if (color) {
+        colorBuffer = this.setFragColor(color);
+      } // 线宽
+
+
+      if (lineWidth) {
+        this.context.uniform1f(this.program.uniforms.a_point_size.location, lineWidth); // * this.graph.devicePixelRatio
+      } // 标注为stroke
+
+
+      if (this.program.uniforms.a_type) {
+        // 4表示单画一个圆点，1表示方块形成的线条
+        this.context.uniform1i(this.program.uniforms.a_type.location, points.length === 1 ? 4 : 1);
+      }
+
+      if (points && points.length) {
+        var regular = this.isRegular && lineWidth == 1;
+        points = regular ? points : this.pathToPoints(points); //this.context.lineWidth(10);
+
+        var buffer = this.writePoints(points);
+        this.context.drawArrays(regular ? this.context.LINES : this.context.POINTS, 0, points.length);
+        this.deleteBuffer(buffer);
+      }
+
+      colorBuffer && this.deleteBuffer(colorBuffer);
+      colorBuffer && this.disableVertexAttribArray(colorBuffer.attr);
+    } // 填充图形
+
+  }, {
+    key: "fill",
+    value: function fill() {
+      var bounds = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+        left: 0,
+        top: 0,
+        width: 0,
+        height: 0
+      };
+      var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+
+      //this.useProgram();
+      if (this.points && this.points.length) {
+        // 如果是颜色rgba
+        if (this.style.fillStyle) {
+          var filled = false; // 是否成功填充
+          // 3个以上的点，且非规则图形才需要切割
+
+          if (this.points.length > 3) {
+            if (this.isRegular && this.needCut) {
+              // 需要分割三角形，不然填充会有问题
+              var triangles = this.earCutPointsToTriangles(this.points); // 切割得到三角形顶点二维数组
+
+              if (triangles && triangles.length) {
+                var _iterator3 = _createForOfIteratorHelper(triangles),
+                    _step3;
+
+                try {
+                  for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+                    var triangle = _step3.value;
+                    this.fillColor(triangle, this.style.fillStyle, bounds, type); // 单独为每个分割的图形填充
+                    // 如果指定的是img，则采用填充图片的方式
+
+                    if (this.style.fillImage) {
+                      this.fillImage(this.style.fillImage, triangle, bounds);
+                    }
+                  }
+                } catch (err) {
+                  _iterator3.e(err);
+                } finally {
+                  _iterator3.f();
+                }
+
+                filled = true; // 表示已填充过了
+              }
+            } else if (!this.isRegular) {
+              var polygons = this.getPolygon(this.points);
+
+              if (polygons.length) {
+                var _iterator4 = _createForOfIteratorHelper(polygons),
+                    _step4;
+
+                try {
+                  for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+                    var polygon = _step4.value;
+
+                    // 需要分割三角形，不然填充会有问题
+                    var _triangles = this.earCutPointsToTriangles(polygon); // 切割得到三角形顶点二维数组
+
+
+                    if (_triangles && _triangles.length) {
+                      var _iterator5 = _createForOfIteratorHelper(_triangles),
+                          _step5;
+
+                      try {
+                        for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
+                          var _triangle = _step5.value;
+                          this.fillColor(_triangle, this.style.fillStyle, bounds, type); // 单独为每个分割的图形填充
+                          // 如果指定的是img，则采用填充图片的方式
+
+                          if (this.style.fillImage) {
+                            this.fillImage(this.style.fillImage, _triangle, bounds);
+                          }
+                        }
+                      } catch (err) {
+                        _iterator5.e(err);
+                      } finally {
+                        _iterator5.f();
+                      }
+
+                      filled = true; // 表示已填充过了
+                    }
+                  }
+                } catch (err) {
+                  _iterator4.e(err);
+                } finally {
+                  _iterator4.f();
+                }
+              }
+            }
+          } // 如果前面的条件没有填充成功，则直接按正常填充         
+
+
+          if (!filled) {
+            this.fillColor(this.points, this.style.fillStyle, bounds, type); // 如果指定的是img，则采用填充图片的方式
+
+            if (this.style.fillImage) {
+              this.fillImage(this.style.fillImage, this.points, bounds);
+            }
+          }
+        }
+      }
+    }
+  }, {
+    key: "fillColor",
+    value: function fillColor(points, color, bounds) {
+      var type = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
+
+      // 如果是渐变色，则需要计算偏移量的颜色
+      if (this.isGradient(color)) {
+        var imgData = color.toImageData(this, bounds);
+        return this.fillImage(imgData, points, bounds);
+      } // 标注为fill
+
+
+      this.context.uniform1i(this.program.uniforms.a_type.location, type);
+      var colorBuffer = this.setFragColor(color);
+      var buffer = this.writePoints(points);
+      this.context.drawArrays(this.context.TRIANGLE_FAN, 0, points.length);
+
+      if (buffer) {
+        this.deleteBuffer(buffer);
+        this.disableVertexAttribArray(buffer.attr);
+      }
+
+      colorBuffer && this.deleteBuffer(colorBuffer);
+      colorBuffer && this.disableVertexAttribArray(colorBuffer.attr); // 为线段顶点绘制
+
+      /*for(const p of points) {
+          this.stroke([p], 'red', 10);
+      }*/
+    } // 区域填充图片
+    // points绘制的图形顶点
+    // 图片整体绘制区域
+
+  }, {
+    key: "fillImage",
+    value: function fillImage(img, points, bounds) {
+      if (!img) return; // 设置纹理
+
+      var texture = img instanceof ImageData ? this.createDataTexture(img) : this.createImgTexture(img);
+      this.context.uniform1i(this.program.uniforms.u_sample.location, 0); // 纹理单元传递给着色器
+      // 指定纹理区域尺寸
+
+      this.context.uniform4f(this.program.uniforms.v_texture_bounds.location, bounds.left + this.parentAbsoluteBounds.left, bounds.top + this.parentAbsoluteBounds.top, bounds.width, bounds.height); // 纹理单元传递给着色器
+      // 标注为纹理对象
+
+      this.context.uniform1i(this.program.uniforms.a_type.location, 2);
+      var filled = false; // 是否成功填充
+      // 3个以上的点，且非规则图形才需要切割
+
+      if (points.length > 3 && !this.isRegular) {
+        var polygons = this.getPolygon(points);
+
+        if (polygons.length) {
+          var _iterator6 = _createForOfIteratorHelper(polygons),
+              _step6;
+
+          try {
+            for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
+              var polygon = _step6.value;
+              // 需要分割三角形，不然填充会有问题
+              var triangles = this.earCutPointsToTriangles(polygon); // 切割得到三角形顶点二维数组
+
+              if (triangles && triangles.length) {
+                var _iterator7 = _createForOfIteratorHelper(triangles),
+                    _step7;
+
+                try {
+                  for (_iterator7.s(); !(_step7 = _iterator7.n()).done;) {
+                    var triangle = _step7.value;
+                    this.fillTexture(triangle); // 单独为每个分割的图形填充
+                  }
+                } catch (err) {
+                  _iterator7.e(err);
+                } finally {
+                  _iterator7.f();
+                }
+
+                filled = true; // 表示已填充过了
+              }
+            }
+          } catch (err) {
+            _iterator6.e(err);
+          } finally {
+            _iterator6.f();
+          }
+        }
+      } // 如果前面的条件没有填充成功，则直接按正常填充         
+
+
+      if (!filled) {
+        this.fillTexture(points);
+      }
+
+      this.deleteTexture(texture);
+    } // 填充图形
+
+  }, {
+    key: "drawImage",
+    value: function drawImage(img) {
+      var left = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+      var top = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+      var width = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : img.width;
+      var height = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : img.height;
+      width = width || img.width;
+      height = height || img.height; //this.useProgram();
+
+      this.fillImage(img, this.points, {
+        left: left,
+        top: top,
+        width: width,
+        height: height
+      });
+    }
+  }, {
+    key: "fillTexture",
+    value: function fillTexture(points) {
+      // 纹理坐标
+      var coordBuffer = this.writePoints(points, this.program.attrs.a_text_coord);
+
+      if (points && points.length) {
+        var buffer = this.writePoints(points);
+        this.context.drawArrays(this.context.TRIANGLE_FAN, 0, points.length);
+        this.deleteBuffer(buffer);
+        this.disableVertexAttribArray(buffer.attr);
+      }
+
+      this.disableVertexAttribArray(coordBuffer.attr);
+      this.deleteBuffer(coordBuffer);
+    }
+  }]);
+
+  return WebglPath;
+}(_base["default"]);
+
+var _default = WebglPath;
+exports["default"] = _default;
+
+},{"./base.js":13}],22:[function(require,module,exports){
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.jmArc = exports["default"] = void 0;
+
+var _jmPath2 = require("../core/jmPath.js");
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+/**
+ * 圆弧图型 继承自jmPath
+ *
+ * @class jmArc
+ * @extends jmPath
+ * @param {object} params center=当前圆弧中心,radius=圆弧半径,start=圆弧起始角度,end=圆弧结束角度,anticlockwise=  false  顺时针，true 逆时针
+ */
+var jmArc = /*#__PURE__*/function (_jmPath) {
+  _inherits(jmArc, _jmPath);
+
+  var _super = _createSuper(jmArc);
+
+  function jmArc(params) {
+    var _this;
+
+    var t = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'jmArc';
+
+    _classCallCheck(this, jmArc);
+
+    if (!params) params = {};
+    params.isRegular = params.isRegular === false ? false : true; // 规则的
+
+    params.needCut = params.needCut === true ? true : false; // 规则的
+
+    _this = _super.call(this, params, t);
+    _this.center = params.center || {
+      x: 0,
+      y: 0
+    };
+    _this.radius = params.radius || 0;
+    _this.startAngle = params.start || params.startAngle || 0;
+    _this.endAngle = params.end || params.endAngle || Math.PI * 2;
+    _this.anticlockwise = params.anticlockwise || 0;
+    _this.isFan = !!params.isFan;
+    return _this;
+  }
+  /**
+   * 中心点
+   * point格式：{x:0,y:0,m:true}
+   * @property center
+   * @type {point}
+   */
+
+
+  _createClass(jmArc, [{
+    key: "center",
+    get: function get() {
+      return this.property('center');
+    },
+    set: function set(v) {
+      this.needUpdate = true;
+      return this.property('center', v);
+    }
+    /**
+     * 半径
+     * @property radius
+     * @type {number}
+     */
+
+  }, {
+    key: "radius",
+    get: function get() {
+      return this.property('radius');
+    },
+    set: function set(v) {
+      this.needUpdate = true;
+      return this.property('radius', v);
+    }
+    /**
+     * 扇形起始角度
+     * @property startAngle
+     * @type {number}
+     */
+
+  }, {
+    key: "startAngle",
+    get: function get() {
+      return this.property('startAngle');
+    },
+    set: function set(v) {
+      this.needUpdate = true;
+      return this.property('startAngle', v);
+    }
+    /**
+     * 扇形结束角度
+     * @property endAngle
+     * @type {number}
+     */
+
+  }, {
+    key: "endAngle",
+    get: function get() {
+      return this.property('endAngle');
+    },
+    set: function set(v) {
+      this.needUpdate = true;
+      return this.property('endAngle', v);
+    }
+    /**
+     * 可选。规定应该逆时针还是顺时针绘图
+     * false  顺时针，true 逆时针
+     * @property anticlockwise
+     * @type {boolean}
+     */
+
+  }, {
+    key: "anticlockwise",
+    get: function get() {
+      return this.property('anticlockwise');
+    },
+    set: function set(v) {
+      this.needUpdate = true;
+      return this.property('anticlockwise', v);
+    }
+    /**
+     * 初始化图形点
+     * 
      * @method initPoint
      * @private
      * @for jmArc
@@ -4816,7 +7476,7 @@ var jmArc = /*#__PURE__*/function (_jmPath) {
 
 exports.jmArc = exports["default"] = jmArc;
 
-},{"../core/jmPath.js":8}],13:[function(require,module,exports){
+},{"../core/jmPath.js":8}],23:[function(require,module,exports){
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
@@ -4897,11 +7557,11 @@ var jmArrow = /*#__PURE__*/function (_jmPath) {
   _createClass(jmArrow, [{
     key: "start",
     get: function get() {
-      return this.__pro('start');
+      return this.property('start');
     },
     set: function set(v) {
       this.needUpdate = true;
-      return this.__pro('start', v);
+      return this.property('start', v);
     }
     /**
      * 控制结束点
@@ -4914,11 +7574,11 @@ var jmArrow = /*#__PURE__*/function (_jmPath) {
   }, {
     key: "end",
     get: function get() {
-      return this.__pro('end');
+      return this.property('end');
     },
     set: function set(v) {
       this.needUpdate = true;
-      return this.__pro('end', v);
+      return this.property('end', v);
     }
     /**
      * 箭头角度
@@ -4931,11 +7591,11 @@ var jmArrow = /*#__PURE__*/function (_jmPath) {
   }, {
     key: "angle",
     get: function get() {
-      return this.__pro('angle');
+      return this.property('angle');
     },
     set: function set(v) {
       this.needUpdate = true;
-      return this.__pro('angle', v);
+      return this.property('angle', v);
     }
     /**
      * 箭头X偏移量
@@ -4948,11 +7608,11 @@ var jmArrow = /*#__PURE__*/function (_jmPath) {
   }, {
     key: "offsetX",
     get: function get() {
-      return this.__pro('offsetX');
+      return this.property('offsetX');
     },
     set: function set(v) {
       this.needUpdate = true;
-      return this.__pro('offsetX', v);
+      return this.property('offsetX', v);
     }
     /**
      * 箭头Y偏移量
@@ -4965,11 +7625,11 @@ var jmArrow = /*#__PURE__*/function (_jmPath) {
   }, {
     key: "offsetY",
     get: function get() {
-      return this.__pro('offsetY');
+      return this.property('offsetY');
     },
     set: function set(v) {
       this.needUpdate = true;
-      return this.__pro('offsetY', v);
+      return this.property('offsetY', v);
     }
     /**
      * 初始化图形点
@@ -5040,7 +7700,7 @@ var jmArrow = /*#__PURE__*/function (_jmPath) {
 
 exports.jmArrow = exports["default"] = jmArrow;
 
-},{"../core/jmPath.js":8,"../core/jmUtils.js":11}],14:[function(require,module,exports){
+},{"../core/jmPath.js":8,"../core/jmUtils.js":11}],24:[function(require,module,exports){
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
@@ -5134,7 +7794,7 @@ var jmArrowLine = /*#__PURE__*/function (_jmLine) {
 
 exports.jmArrowLine = exports["default"] = jmArrowLine;
 
-},{"./jmArrow.js":13,"./jmLine.js":20}],15:[function(require,module,exports){
+},{"./jmArrow.js":23,"./jmLine.js":30}],25:[function(require,module,exports){
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
@@ -5207,11 +7867,11 @@ var jmBezier = /*#__PURE__*/function (_jmPath) {
   _createClass(jmBezier, [{
     key: "cpoints",
     get: function get() {
-      return this.__pro('cpoints');
+      return this.property('cpoints');
     },
     set: function set(v) {
       this.needUpdate = true;
-      return this.__pro('cpoints', v);
+      return this.property('cpoints', v);
     }
     /**
      * 初始化图形点
@@ -5306,7 +7966,7 @@ var jmBezier = /*#__PURE__*/function (_jmPath) {
 
 exports.jmBezier = exports["default"] = jmBezier;
 
-},{"../core/jmPath.js":8}],16:[function(require,module,exports){
+},{"../core/jmPath.js":8}],26:[function(require,module,exports){
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
@@ -5324,6 +7984,10 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
 
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
 
+function _get(target, property, receiver) { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get; } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(receiver); } return desc.value; }; } return _get(target, property, receiver || target); }
+
+function _superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = _getPrototypeOf(object); if (object === null) break; } return object; }
+
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
 
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
@@ -5355,6 +8019,8 @@ var jmCircle = /*#__PURE__*/function (_jmArc) {
 
     _classCallCheck(this, jmCircle);
 
+    params.isRegular = true; // 规则的
+
     return _super.call(this, params, t);
   }
   /**
@@ -5369,6 +8035,10 @@ var jmCircle = /*#__PURE__*/function (_jmArc) {
   _createClass(jmCircle, [{
     key: "initPoints",
     value: function initPoints() {
+      if (this.graph.mode === 'webgl') {
+        return _get(_getPrototypeOf(jmCircle.prototype), "initPoints", this).call(this);
+      }
+
       var location = this.getLocation();
 
       if (!location.radius) {
@@ -5402,6 +8072,10 @@ var jmCircle = /*#__PURE__*/function (_jmArc) {
   }, {
     key: "draw",
     value: function draw() {
+      if (this.graph.mode === 'webgl') {
+        return _get(_getPrototypeOf(jmCircle.prototype), "draw", this).call(this);
+      }
+
       var bounds = this.parent && this.parent.absoluteBounds ? this.parent.absoluteBounds : this.absoluteBounds;
       var location = this.getLocation();
 
@@ -5422,7 +8096,7 @@ var jmCircle = /*#__PURE__*/function (_jmArc) {
 
 exports.jmCircle = exports["default"] = jmCircle;
 
-},{"./jmArc.js":12}],17:[function(require,module,exports){
+},{"./jmArc.js":22}],27:[function(require,module,exports){
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
@@ -5473,6 +8147,9 @@ var jmHArc = /*#__PURE__*/function (_jmArc) {
 
     _classCallCheck(this, jmHArc);
 
+    params.isRegular = true; // 规则的
+
+    params.needCut = true;
     _this = _super.call(this, params, t);
     _this.minRadius = params.minRadius || _this.style.minRadius || 0;
     _this.maxRadius = params.maxRadius || _this.style.maxRadius || 0;
@@ -5490,11 +8167,11 @@ var jmHArc = /*#__PURE__*/function (_jmArc) {
   _createClass(jmHArc, [{
     key: "minRadius",
     get: function get() {
-      return this.__pro('minRadius');
+      return this.property('minRadius');
     },
     set: function set(v) {
       this.needUpdate = true;
-      return this.__pro('minRadius', v);
+      return this.property('minRadius', v);
     }
     /**
      * 设定或获取外空心圆半径
@@ -5507,11 +8184,11 @@ var jmHArc = /*#__PURE__*/function (_jmArc) {
   }, {
     key: "maxRadius",
     get: function get() {
-      return this.__pro('maxRadius');
+      return this.property('maxRadius');
     },
     set: function set(v) {
       this.needUpdate = true;
-      return this.__pro('maxRadius', v);
+      return this.property('maxRadius', v);
     }
     /**
      * 初始化图形点
@@ -5579,7 +8256,7 @@ var jmHArc = /*#__PURE__*/function (_jmArc) {
 
 exports.jmHArc = exports["default"] = jmHArc;
 
-},{"./jmArc.js":12}],18:[function(require,module,exports){
+},{"./jmArc.js":22}],28:[function(require,module,exports){
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
@@ -5631,6 +8308,8 @@ var jmImage = /*#__PURE__*/function (_jmControl) {
     _classCallCheck(this, jmImage);
 
     params = params || {};
+    params.isRegular = true; // 规则的
+
     _this = _super.call(this, params, t || 'jmImage');
     _this.style.fill = _this.fill || 'transparent'; //默认指定一个fill，为了可以鼠标选中
 
@@ -5651,10 +8330,10 @@ var jmImage = /*#__PURE__*/function (_jmControl) {
   _createClass(jmImage, [{
     key: "sourcePosition",
     get: function get() {
-      return this.__pro('sourcePosition');
+      return this.property('sourcePosition');
     },
     set: function set(v) {
-      return this.__pro('sourcePosition', v);
+      return this.property('sourcePosition', v);
     }
     /**
      * 被剪切宽度
@@ -5666,11 +8345,11 @@ var jmImage = /*#__PURE__*/function (_jmControl) {
   }, {
     key: "sourceWidth",
     get: function get() {
-      return this.__pro('sourceWidth');
+      return this.property('sourceWidth');
     },
     set: function set(v) {
       this.needUpdate = true;
-      return this.__pro('sourceWidth', v);
+      return this.property('sourceWidth', v);
     }
     /**
      * 被剪切高度
@@ -5682,11 +8361,11 @@ var jmImage = /*#__PURE__*/function (_jmControl) {
   }, {
     key: "sourceHeight",
     get: function get() {
-      return this.__pro('sourceHeight');
+      return this.property('sourceHeight');
     },
     set: function set(v) {
       this.needUpdate = true;
-      return this.__pro('sourceHeight', v);
+      return this.property('sourceHeight', v);
     }
     /**
      * 设定要绘制的图像或其它多媒体对象，可以是图片地址，或图片image对象
@@ -5698,11 +8377,11 @@ var jmImage = /*#__PURE__*/function (_jmControl) {
   }, {
     key: "image",
     get: function get() {
-      return this.__pro('image');
+      return this.property('image');
     },
     set: function set(v) {
       this.needUpdate = true;
-      return this.__pro('image', v);
+      return this.property('image', v);
     }
     /**
      * 重写控件绘制
@@ -5714,25 +8393,9 @@ var jmImage = /*#__PURE__*/function (_jmControl) {
   }, {
     key: "draw",
     value: function draw() {
-      var _this2 = this;
-
       try {
         var img = this.getImage();
-
-        if (this.graph.isWXMiniApp && this.graph.canvas && typeof img === 'string') {
-          // 图片对象
-          var image = this.graph.canvas.createImage(); // 图片加载完成回调
-
-          image.onload = function () {
-            // 将图片绘制到 canvas 上
-            _this2.drawImg(image);
-          }; // 设置图片src
-
-
-          image.src = img;
-        } else {
-          this.drawImg(img);
-        }
+        this.drawImg(img);
       } catch (e) {
         console.error && console.error(e);
       }
@@ -5741,7 +8404,7 @@ var jmImage = /*#__PURE__*/function (_jmControl) {
   }, {
     key: "drawImg",
     value: function drawImg(img) {
-      if (!img) {
+      if (!img || !img.complete) {
         console.warn('image is empty');
         return;
       }
@@ -5749,11 +8412,35 @@ var jmImage = /*#__PURE__*/function (_jmControl) {
       var bounds = this.parent && this.parent.absoluteBounds ? this.parent.absoluteBounds : this.absoluteBounds;
       if (!bounds) bounds = this.parent && this.parent.getAbsoluteBounds ? this.parent.getAbsoluteBounds() : this.getAbsoluteBounds();
       var p = this.getLocation();
-      p.left += bounds.left;
-      p.top += bounds.top;
       var sp = this.sourcePosition;
       var sw = this.sourceWidth;
       var sh = this.sourceHeight;
+      var ctx = this.webglControl || this.context;
+
+      if (this.webglControl) {
+        ctx.setParentBounds && ctx.setParentBounds(bounds);
+        var localBounds = this.getBounds(); // 给图片给定顶点
+
+        ctx.draw([{
+          x: localBounds.left,
+          y: localBounds.top
+        }, {
+          x: localBounds.left + localBounds.width,
+          y: localBounds.top
+        }, {
+          x: localBounds.left + localBounds.width,
+          y: localBounds.top + localBounds.height
+        }, {
+          x: localBounds.left,
+          y: localBounds.top + localBounds.height
+        }], bounds);
+        ctx.drawImage(img, localBounds.left, localBounds.top, localBounds.width, localBounds.height);
+        return;
+      } // 计算绝对定位
+
+
+      p.left += bounds.left;
+      p.top += bounds.top;
 
       if (sp || typeof sw != 'undefined' || typeof sh != 'undefined') {
         if (typeof sw == 'undefined') sw = p.width || img.width || 0;
@@ -5762,15 +8449,15 @@ var jmImage = /*#__PURE__*/function (_jmControl) {
           x: 0,
           y: 0
         };
-        if (p.width && p.height) this.context.drawImage(img, sp.x, sp.y, sw, sh, p.left, p.top, p.width, p.height);else if (p.width) {
-          this.context.drawImage(img, sp.x, sp.y, sw, sh, p.left, p.top, p.width, sh);
+        if (p.width && p.height) ctx.drawImage(img, sp.x, sp.y, sw, sh, p.left, p.top, p.width, p.height);else if (p.width) {
+          ctx.drawImage(img, sp.x, sp.y, sw, sh, p.left, p.top, p.width, sh);
         } else if (p.height) {
-          this.context.drawImage(img, sp.x, sp.y, sw, sh, p.left, p.top, sw, p.height);
-        } else this.context.drawImage(img, sp.x, sp.y, sw, sh, p.left, p.top, sw, sh);
+          ctx.drawImage(img, sp.x, sp.y, sw, sh, p.left, p.top, sw, p.height);
+        } else ctx.drawImage(img, sp.x, sp.y, sw, sh, p.left, p.top, sw, sh);
       } else if (p) {
-        if (p.width && p.height) this.context.drawImage(img, p.left, p.top, p.width, p.height);else if (p.width) this.context.drawImage(img, p.left, p.top, p.width, img.height);else if (p.height) this.context.drawImage(img, p.left, p.top, img.width, p.height);else this.context.drawImage(img, p.left, p.top);
+        if (p.width && p.height) ctx.drawImage(img, p.left, p.top, p.width, p.height);else if (p.width) ctx.drawImage(img, p.left, p.top, p.width, img.height);else if (p.height) ctx.drawImage(img, p.left, p.top, img.width, p.height);else ctx.drawImage(img, p.left, p.top);
       } else {
-        this.context.drawImage(img);
+        ctx.drawImage(img);
       }
     }
     /**
@@ -5806,6 +8493,8 @@ var jmImage = /*#__PURE__*/function (_jmControl) {
   }, {
     key: "getImage",
     value: function getImage() {
+      var _this2 = this;
+
       var src = this.image || this.style.src || this.style.image;
 
       if (this.__img && this.__img.src && this.__img.src.indexOf(src) != -1) {
@@ -5814,11 +8503,27 @@ var jmImage = /*#__PURE__*/function (_jmControl) {
         this.__img = src;
       } else if (typeof document !== 'undefined' && document.createElement) {
         this.__img = document.createElement('img');
+
+        this.__img.onload = function () {
+          _this2.needUpdate = true;
+        };
+
         if (src && typeof src == 'string') this.__img.src = src;
+      } else if (this.graph.isWXMiniApp && this.graph.canvas && typeof src === 'string') {
+        // 图片对象
+        this.__img = this.graph.canvas.createImage();
+
+        this.__img.onload = function () {
+          _this2.needUpdate = true;
+        }; // 设置图片src
+
+
+        this.__img.src = src;
       } else {
         this.__img = src;
       }
 
+      this.image = this.__img.src;
       return this.__img;
     }
   }]);
@@ -5828,7 +8533,7 @@ var jmImage = /*#__PURE__*/function (_jmControl) {
 
 exports.jmImage = exports["default"] = jmImage;
 
-},{"../core/jmControl.js":2}],19:[function(require,module,exports){
+},{"../core/jmControl.js":2}],29:[function(require,module,exports){
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
@@ -5882,6 +8587,8 @@ var jmLabel = /*#__PURE__*/function (_jmControl) {
     _classCallCheck(this, jmLabel);
 
     params = params || {};
+    params.isRegular = true; // 规则的
+
     _this = _super.call(this, params, t || 'jmLabel');
     _this.style.font = _this.style.font || "15px Arial";
     _this.style.fontFamily = _this.style.fontFamily || 'Arial';
@@ -5905,11 +8612,11 @@ var jmLabel = /*#__PURE__*/function (_jmControl) {
   _createClass(jmLabel, [{
     key: "text",
     get: function get() {
-      return this.__pro('text');
+      return this.property('text');
     },
     set: function set(v) {
       this.needUpdate = true;
-      return this.__pro('text', v);
+      return this.property('text', v);
     }
     /**
      * 中心点
@@ -5921,11 +8628,11 @@ var jmLabel = /*#__PURE__*/function (_jmControl) {
   }, {
     key: "center",
     get: function get() {
-      return this.__pro('center');
+      return this.property('center');
     },
     set: function set(v) {
       this.needUpdate = true;
-      return this.__pro('center', v);
+      return this.property('center', v);
     }
     /**
      * 当前位置左上角
@@ -5936,11 +8643,11 @@ var jmLabel = /*#__PURE__*/function (_jmControl) {
   }, {
     key: "position",
     get: function get() {
-      return this.__pro('position');
+      return this.property('position');
     },
     set: function set(v) {
       this.needUpdate = true;
-      return this.__pro('position', v);
+      return this.property('position', v);
     }
     /**
      * 在基础的getLocation上，再加上一个特殊的center处理
@@ -6007,7 +8714,7 @@ var jmLabel = /*#__PURE__*/function (_jmControl) {
     key: "testSize",
     value: function testSize() {
       if (this.__size) return this.__size;
-      this.context.save(); // 修改字体，用来计算
+      this.context.save && this.context.save(); // 修改字体，用来计算
 
       this.setStyle({
         font: this.style.font || this.style.fontSize + 'px ' + this.style.fontFamily
@@ -6016,7 +8723,7 @@ var jmLabel = /*#__PURE__*/function (_jmControl) {
       this.__size = this.context.measureText ? this.context.measureText(this.text) : {
         width: 15
       };
-      this.context.restore();
+      this.context.restore && this.context.restore();
       this.__size.height = this.style.fontSize ? this.style.fontSize : 15;
       if (!this.width) this.width = this.__size.width;
       if (!this.height) this.height = this.__size.height;
@@ -6091,7 +8798,7 @@ var jmLabel = /*#__PURE__*/function (_jmControl) {
       if (this.style.border) {
         //如果指定了边框样式
         if (this.style.border.style) {
-          this.context.save();
+          this.context.save && this.context.save();
           this.setStyle(this.style.border.style);
         }
 
@@ -6118,7 +8825,7 @@ var jmLabel = /*#__PURE__*/function (_jmControl) {
 
 
         if (this.style.border.style) {
-          this.context.restore();
+          this.context.restore && this.context.restore();
         }
       }
     }
@@ -6129,7 +8836,7 @@ var jmLabel = /*#__PURE__*/function (_jmControl) {
 
 exports.jmLabel = exports["default"] = jmLabel;
 
-},{"../core/jmControl.js":2}],20:[function(require,module,exports){
+},{"../core/jmControl.js":2}],30:[function(require,module,exports){
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
@@ -6180,6 +8887,8 @@ var jmLine = /*#__PURE__*/function (_jmPath) {
 
     _classCallCheck(this, jmLine);
 
+    params.isRegular = true; // 规则的
+
     _this = _super.call(this, params, t);
     _this.start = params.start || {
       x: 0,
@@ -6191,6 +8900,7 @@ var jmLine = /*#__PURE__*/function (_jmPath) {
     };
     _this.style.lineType = _this.style.lineType || 'solid';
     _this.style.dashLength = _this.style.dashLength || 4;
+    _this.style.close = false;
     return _this;
   }
   /**
@@ -6205,11 +8915,11 @@ var jmLine = /*#__PURE__*/function (_jmPath) {
   _createClass(jmLine, [{
     key: "start",
     get: function get() {
-      return this.__pro('start');
+      return this.property('start');
     },
     set: function set(v) {
       this.needUpdate = true;
-      return this.__pro('start', v);
+      return this.property('start', v);
     }
     /**
      * 控制结束点
@@ -6222,11 +8932,11 @@ var jmLine = /*#__PURE__*/function (_jmPath) {
   }, {
     key: "end",
     get: function get() {
-      return this.__pro('end');
+      return this.property('end');
     },
     set: function set(v) {
       this.needUpdate = true;
-      return this.__pro('end', v);
+      return this.property('end', v);
     }
     /**
      * 初始化图形点,如呆为虚线则根据跳跃间隔描点
@@ -6253,21 +8963,20 @@ var jmLine = /*#__PURE__*/function (_jmPath) {
         var dottedsp = dashLen / 2;
 
         for (var l = dashLen; l <= lineLen;) {
-          if (dottedstart == false) {
-            this.points.push({
-              x: start.x + dx * l,
-              y: start.y + dy * l
-            });
+          var p = {
+            x: start.x + dx * l,
+            y: start.y + dy * l
+          };
+
+          if (dottedstart === false) {
             l += dottedsp;
           } else {
-            this.points.push({
-              x: start.x + dx * l,
-              y: start.y + dy * l,
-              m: true
-            });
+            p.m = true; // 移动到当时坐标
+
             l += dashLen;
           }
 
+          this.points.push(p);
           dottedstart = !dottedstart;
         }
       }
@@ -6282,7 +8991,7 @@ var jmLine = /*#__PURE__*/function (_jmPath) {
 
 exports.jmLine = exports["default"] = jmLine;
 
-},{"../core/jmPath.js":8}],21:[function(require,module,exports){
+},{"../core/jmPath.js":8}],31:[function(require,module,exports){
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
@@ -6333,6 +9042,8 @@ var jmPrismatic = /*#__PURE__*/function (_jmPath) {
 
     _classCallCheck(this, jmPrismatic);
 
+    params.isRegular = true; // 规则的
+
     _this = _super.call(this, params, t);
     _this.style.close = typeof _this.style.close == 'undefined' ? true : _this.style.close;
     _this.center = params.center || {
@@ -6355,11 +9066,11 @@ var jmPrismatic = /*#__PURE__*/function (_jmPath) {
   _createClass(jmPrismatic, [{
     key: "center",
     get: function get() {
-      return this.__pro('center');
+      return this.property('center');
     },
     set: function set(v) {
       this.needUpdate = true;
-      return this.__pro('center', v);
+      return this.property('center', v);
     }
     /**
      * 初始化图形点
@@ -6400,7 +9111,7 @@ var jmPrismatic = /*#__PURE__*/function (_jmPath) {
 
 exports.jmPrismatic = exports["default"] = jmPrismatic;
 
-},{"../core/jmPath.js":8}],22:[function(require,module,exports){
+},{"../core/jmPath.js":8}],32:[function(require,module,exports){
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
@@ -6456,6 +9167,8 @@ var jmRect = /*#__PURE__*/function (_jmPath) {
     _classCallCheck(this, jmRect);
 
     params = params || {};
+    params.isRegular = true; // 规则的
+
     _this = _super.call(this, params, t);
     _this.style.close = true;
     _this.radius = params.radius || _this.style.radius || 0;
@@ -6471,11 +9184,11 @@ var jmRect = /*#__PURE__*/function (_jmPath) {
   _createClass(jmRect, [{
     key: "radius",
     get: function get() {
-      return this.__pro('radius');
+      return this.property('radius');
     },
     set: function set(v) {
       this.needUpdate = true;
-      return this.__pro('radius', v);
+      return this.property('radius', v);
     }
     /**
      * 当前位置左上角
@@ -6486,11 +9199,11 @@ var jmRect = /*#__PURE__*/function (_jmPath) {
   }, {
     key: "position",
     get: function get() {
-      return this.__pro('position');
+      return this.property('position');
     },
     set: function set(v) {
       this.needUpdate = true;
-      return this.__pro('position', v);
+      return this.property('position', v);
     }
     /**
      * 获取当前控件的边界
@@ -6662,7 +9375,7 @@ var jmRect = /*#__PURE__*/function (_jmPath) {
 
 exports.jmRect = exports["default"] = jmRect;
 
-},{"../core/jmPath.js":8,"./jmArc.js":12,"./jmLine.js":20}],23:[function(require,module,exports){
+},{"../core/jmPath.js":8,"./jmArc.js":22,"./jmLine.js":30}],33:[function(require,module,exports){
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
@@ -6715,6 +9428,8 @@ var jmResize = /*#__PURE__*/function (_jmRect) {
     _classCallCheck(this, jmResize);
 
     params = params || {};
+    params.isRegular = true; // 规则的
+
     _this = _super.call(this, params, t); //是否可拉伸
 
     _this.resizable = params.resizable === false ? false : true;
@@ -6736,10 +9451,10 @@ var jmResize = /*#__PURE__*/function (_jmRect) {
   _createClass(jmResize, [{
     key: "rectSize",
     get: function get() {
-      return this.__pro('rectSize');
+      return this.property('rectSize');
     },
     set: function set(v) {
-      return this.__pro('rectSize', v);
+      return this.property('rectSize', v);
     }
     /**
      * 是否可以拉大缩小
@@ -6750,10 +9465,10 @@ var jmResize = /*#__PURE__*/function (_jmRect) {
   }, {
     key: "resizable",
     get: function get() {
-      return this.__pro('resizable');
+      return this.property('resizable');
     },
     set: function set(v) {
-      return this.__pro('resizable', v);
+      return this.property('resizable', v);
     }
     /**
      * 初始化控件的8个拉伸方框
@@ -7015,5 +9730,5 @@ var jmResize = /*#__PURE__*/function (_jmRect) {
 
 exports.jmResize = exports["default"] = jmResize;
 
-},{"./jmRect.js":22}]},{},[1]);
+},{"./jmRect.js":32}]},{},[1]);
 var _r=_m(1);_g.jmGraph=_r;return _r;})})(typeof window!=='undefined'?window:(typeof global!=='undefined'?global:(typeof self!=='undefined'?self:this)));