sg-labeler-vue2 1.0.0

package/lib/sg-labeler.js

@@ -0,0 +1,3197 @@
+module.exports =
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId]) {
+/******/ 			return installedModules[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, {
+/******/ 				configurable: false,
+/******/ 				enumerable: true,
+/******/ 				get: getter
+/******/ 			});
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = 4);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ (function(module, exports) {
+
+module.exports = require("fabric");
+
+/***/ }),
+/* 1 */
+/***/ (function(module, exports) {
+
+module.exports = require("core-js/modules/web.dom.iterable");
+
+/***/ }),
+/* 2 */
+/***/ (function(module, exports) {
+
+module.exports = require("core-js/modules/es7.object.values");
+
+/***/ }),
+/* 3 */
+/***/ (function(module, exports) {
+
+module.exports = require("core-js/modules/es6.array.fill");
+
+/***/ }),
+/* 4 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
+
+// EXTERNAL MODULE: external "core-js/modules/es6.number.constructor"
+var es6_number_constructor_ = __webpack_require__(6);
+var es6_number_constructor__default = /*#__PURE__*/__webpack_require__.n(es6_number_constructor_);
+
+// EXTERNAL MODULE: external "core-js/modules/es6.array.find"
+var es6_array_find_ = __webpack_require__(7);
+var es6_array_find__default = /*#__PURE__*/__webpack_require__.n(es6_array_find_);
+
+// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/arrayLikeToArray.js
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+
+// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/arrayWithoutHoles.js
+
+function _arrayWithoutHoles(r) {
+  if (Array.isArray(r)) return _arrayLikeToArray(r);
+}
+
+// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/iterableToArray.js
+function _iterableToArray(r) {
+  if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
+}
+
+// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/unsupportedIterableToArray.js
+
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
+
+// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/nonIterableSpread.js
+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.");
+}
+
+// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/toConsumableArray.js
+
+
+
+
+function _toConsumableArray(r) {
+  return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
+}
+
+// EXTERNAL MODULE: external "core-js/modules/es7.object.values"
+var es7_object_values_ = __webpack_require__(2);
+var es7_object_values__default = /*#__PURE__*/__webpack_require__.n(es7_object_values_);
+
+// EXTERNAL MODULE: external "core-js/modules/es6.array.fill"
+var es6_array_fill_ = __webpack_require__(3);
+var es6_array_fill__default = /*#__PURE__*/__webpack_require__.n(es6_array_fill_);
+
+// EXTERNAL MODULE: external "core-js/modules/web.dom.iterable"
+var web_dom_iterable_ = __webpack_require__(1);
+var web_dom_iterable__default = /*#__PURE__*/__webpack_require__.n(web_dom_iterable_);
+
+// EXTERNAL MODULE: external "fabric"
+var external__fabric_ = __webpack_require__(0);
+var external__fabric__default = /*#__PURE__*/__webpack_require__.n(external__fabric_);
+
+// EXTERNAL MODULE: external "lodash.clonedeep"
+var external__lodash_clonedeep_ = __webpack_require__(8);
+var external__lodash_clonedeep__default = /*#__PURE__*/__webpack_require__.n(external__lodash_clonedeep_);
+
+// EXTERNAL MODULE: external "core-js/modules/es6.math.sign"
+var es6_math_sign_ = __webpack_require__(9);
+var es6_math_sign__default = /*#__PURE__*/__webpack_require__.n(es6_math_sign_);
+
+// EXTERNAL MODULE: external "core-js/modules/es7.array.includes"
+var es7_array_includes_ = __webpack_require__(10);
+var es7_array_includes__default = /*#__PURE__*/__webpack_require__.n(es7_array_includes_);
+
+// EXTERNAL MODULE: external "core-js/modules/es6.string.includes"
+var es6_string_includes_ = __webpack_require__(11);
+var es6_string_includes__default = /*#__PURE__*/__webpack_require__.n(es6_string_includes_);
+
+// CONCATENATED MODULE: ./src/components/labeler/model/drawType.js
+/* harmony default export */ var drawType = ({
+  // 自由绘制
+  free: 'free',
+  // 直线
+  line: 'line',
+  // 圆
+  circle: 'circle',
+  // 矩形
+  rectangle: 'rectangle',
+  // 三角形
+  triangle: 'triangle',
+  // 文字
+  textbox: 'textbox',
+  // 多边形
+  polygon: 'polygon',
+  // 点
+  point: 'point'
+});
+// CONCATENATED MODULE: ./src/components/labeler/model/message.js
+var notEditableMsg = '当前模式不可编辑，请切换至编辑模式';
+var setDataErrorMsg = '当前图片未加载完成，请在onImageLoad回调中使用setData设置标注';
+// EXTERNAL MODULE: external "core-js/modules/es6.regexp.to-string"
+var es6_regexp_to_string_ = __webpack_require__(12);
+var es6_regexp_to_string__default = /*#__PURE__*/__webpack_require__.n(es6_regexp_to_string_);
+
+// CONCATENATED MODULE: ./src/components/labeler/function/label.js
+
+// eslint-disable-next-line no-unused-vars
+
+
+/**
+ * 为添加的图形绑定标签
+ *
+ * @author pangyafei
+ * @date 2021-01-18
+ * @param {any} _this
+ * @returns {any}
+ */
+var shapeBindLabel = function shapeBindLabel(_this) {
+  // console.log('shape bind label')
+  // console.log(_this.drawingObject)
+  var shape = _this.drawingObject;
+  shape.objectCaching = false;
+  _this.canvas.remove(shape);
+  if (shape) {
+    shape.id = uuid();
+    shape.label = _this.label;
+    shape.description = _this.description;
+  }
+  _this.canvas.add(shape);
+  _this.canvas.requestRenderAll();
+
+  // const label = document.createElement('div')
+  // label.style.position = 'absolute'
+  // label.style.top = 0
+  // label.style.left = 0
+  // label.style.width = '60px'
+  // label.style.height = '18px'
+  // label.style.backgroundColor = 'red'
+  // document.body.appendChild(label)
+
+  // console.log(label)
+  // shape.on('moving', function() { positionLabel(_this, shape, label) })
+  // shape.on('scaling', function() { positionLabel(_this, shape, label) })
+  // shape.on('mousewheel', function() { positionLabel(_this, shape, label) })
+
+  // positionLabel(_this, shape, label)
+};
+
+/**
+ * 为文字绑定标签
+ *
+ * @author pangyafei
+ * @date 2021-01-28
+ * @param {any} _this
+ * @returns {any}
+ */
+var textBindLabel = function textBindLabel(_this) {
+  var textbox = _this.textObject;
+  textbox.objectCaching = false;
+  _this.canvas.remove(textbox);
+  if (textbox) {
+    textbox.id = uuid();
+    textbox.label = _this.label;
+    textbox.description = _this.description;
+  }
+  _this.canvas.add(textbox);
+  _this.canvas.requestRenderAll();
+};
+
+/**
+ * 构造一个textbox标签组件
+ *
+ * @author pangyafei
+ * @date 2021-03-15
+ * @param {any} _this
+ * @param {any} shape
+ * @returns {any}
+ */
+var getTextboxLabel = function getTextboxLabel(_this, shape) {
+  // const bound = shape.getBoundingRect()
+
+  // const textbox = new fabric.Textbox('test', {
+  //   top: bound.top + 0.5,
+  //   left: bound.left + 0.5,
+  //   width: 80,
+  //   height: 30,
+  //   fontSize: 16,
+  //   editable: false
+  // })
+
+  // _this.canvas.add(textbox)
+  // new fabric.Group([shape, textbox], {
+  //   top: bound.top + 0.5,
+  //   left: bound.left + 0.5
+  // })
+
+  // console.log('container rect')
+
+  // _this.canvas.contextContainer.strokeRect(
+  //   bound.left + 0.5,
+  //   bound.top + 0.5,
+  //   60,
+  //   30
+  // )
+};
+
+// eslint-disable-next-line no-unused-vars
+var positionLabel = function positionLabel(_this, shape, label) {
+  // console.log(_this.canvas)
+  // var absCoords = _this.canvas.getAbsoluteCoords(shape)
+  var absCoords = getAbsoluteCoords(_this, shape);
+  // console.log(absCoords)
+  // console.log(shape.aCoords)
+  // console.log(shape.lineCoords)
+
+  label.style.top = absCoords.top + 'px';
+  label.style.left = absCoords.left + 'px';
+};
+function getAbsoluteCoords(_this, shape) {
+  // console.log(_this.canvas._offset.left)
+  // console.log(_this.canvas._offset.top)
+  return {
+    left: shape.left + _this.canvas._offset.left,
+    top: shape.top + _this.canvas._offset.top
+  };
+}
+function uuid() {
+  // return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+  //   var r = Math.random() * 16 | 0
+  //   var v = c === 'x' ? r : (r & 0x3 | 0x8)
+  //   return v.toString(16)
+  // })
+
+  function s4() {
+    return ((1 + Math.random()) * 0x10000 | 0).toString(16).substring(1);
+  }
+  return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
+
+  // var s = []
+  // var hexDigits = '0123456789abcdef'
+  // for (var i = 0; i < 36; i++) {
+  //   s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1)
+  // }
+  // s[14] = '4'
+  // s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1)
+  // s[8] = s[13] = s[18] = s[23] = '-'
+
+  // var uuid = s.join('')
+  // return uuid
+}
+// CONCATENATED MODULE: ./src/components/labeler/event/shape.js
+// eslint-disable-next-line no-unused-vars
+
+
+
+
+/**
+ * 对象添加监听(fabric.js)
+ *
+ * @author pangyafei
+ * @date 2021-01-18
+ * @param {any} _this
+ * @param {any} options
+ * @returns {any}
+ */
+var shapeadded = function shapeadded(_this, options) {
+  if (_this.atDrawing === false) {
+    // console.log('object added')
+    // console.log(options)
+  }
+
+  // _this.historyObjects = []
+};
+
+/**
+ * 自由绘制线监听
+ *
+ * @author pangyafei
+ * @date 2021-02-04
+ * @param {any} _this
+ * @param {any} options
+ * @returns {any}
+ */
+var shape_pathcreated = function pathcreated(_this, options) {
+  _this.drawingObject = options.path;
+  _this.drawingObject.type = drawType.free;
+  _this.drawingObject.hoverCursor = 'default';
+  _this.drawingObject.transparentCorners = false;
+  _this.drawingObject.setControlVisible('mtr', false);
+  shapeBindLabel(_this);
+};
+var shapemove = function shapemove(_this) {};
+
+/**
+ * 对象缩放监听事件
+ *
+ * @author pangyafei
+ * @date 2021-01-19
+ * @param {any} _this
+ * @param {any} options
+ * @returns {any}
+ */
+var shapescaling = function shapescaling(_this, options) {
+  var o = options.target;
+  // 重新计算图形的边
+  if (!o.strokeWidthUnscaled && o.strokeWidth) {
+    o.strokeWidthUnscaled = o.strokeWidth;
+  }
+  if (o.strokeWidthUnscaled) {
+    o.strokeWidth = o.strokeWidthUnscaled / o.scaleX;
+  }
+};
+
+/**
+ * 对象缩放完成监听事件
+ *
+ * @author pangyafei
+ * @date 2021-03-16
+ * @param {any} _this
+ * @param {any} options
+ * @returns {any}
+ */
+var shape_shapescaled = function shapescaled(_this, options) {
+  var o = options.target;
+  var shape = data_getData(_this, o.id);
+  if (shape.type === drawType.point || shape.type === drawType.rectangle || shape.type === drawType.polygon) {
+    // 重新设置被缩放的对象，以重置标签的大小
+    _this.canvas.remove(o);
+    data_setData(_this, shape, true);
+  }
+};
+// CONCATENATED MODULE: ./src/components/labeler/model/modeType.js
+/* harmony default export */ var modeType = ({
+  // 编辑模式
+  edit: 'edit',
+  // 浏览模式
+  view: 'view'
+});
+// CONCATENATED MODULE: ./src/components/labeler/function/init.js
+
+
+
+
+
+
+
+
+
+/**
+ * init fabric
+ *
+ * @author pangyafei
+ * @date 2021-01-18
+ * @param {any} _this imageLabeler
+ * @returns {any}
+ */
+var init_initFabric = function initFabric(_this) {
+  if (_this.width) {
+    _this.$refs.canvas.width = _this.width;
+    _this.$refs.container.style.width = _this.width + 'px';
+  } else {
+    _this.$refs.canvas.width = _this.$refs.container.offsetWidth;
+  }
+  if (_this.height) {
+    _this.$refs.canvas.height = _this.height;
+    _this.$refs.container.style.height = _this.height + 'px';
+  } else {
+    _this.$refs.canvas.height = _this.$refs.container.offsetHeight;
+  }
+  _this.canvas = new external__fabric_["fabric"].Canvas(_this.id);
+  init_initCanvasEvents(_this);
+  init_initBackgroundImage(_this);
+  if (_this.mode === modeType.edit) {
+    _this.canvas.skipTargetFind = false;
+  } else {
+    _this.canvas.skipTargetFind = true;
+  }
+
+  // initCustomControl(_this)
+
+  // var rect = new fabric.Rect({
+  //   top: 100,
+  //   left: 100,
+  //   width: 60,
+  //   height: 70,
+  //   fill: 'red'
+  // })
+  // _this.canvas.add(rect)
+};
+
+/**
+ * 初始化背景图片（标注图片）
+ *
+ * @author pangyafei
+ * @date 2021-01-18
+ * @param {any} _this imageLabeler
+ * @param {any} noFire 为true时不触发图片加载回调
+ * @returns {any}
+ */
+var init_initBackgroundImage = function initBackgroundImage(_this, noFire) {
+  console.log('init background image');
+  var image = new external__fabric_["fabric"].Image(_this.image, {
+    top: 0,
+    left: 0,
+    hoverCursor: 'default',
+    selectable: false
+  });
+  console.log('background init ');
+  console.log(image.width);
+  console.log(image.height);
+  var scale = _this.canvas.width / image.width < _this.canvas.height / image.height ? _this.canvas.width / image.width : _this.canvas.height / image.height;
+  var imageInfo = {
+    width: _this.image.width,
+    height: _this.image.height,
+    // 下面这两行以宽度为基准将图片进行合适尺寸的渲染，不变形不拉伸
+    scaleX: scale,
+    scaleY: scale
+    // 下面这两行 是图片适应画布大小
+    // scaleX: _this.canvas.width / image.width,
+    // scaleY: _this.canvas.height / image.height
+  };
+
+  // _this.canvas.add(image)
+  _this.canvas.setBackgroundImage(image, _this.canvas.renderAll.bind(_this.canvas), imageInfo);
+  if (noFire) {
+    // do nothing
+  } else {
+    _this.fireImageLoad(imageInfo);
+  }
+};
+
+/**
+ * 初始化canvas监听事件
+ *
+ * @author pangyafei
+ * @date 2021-01-18
+ * @param {any} _this imageLabeler
+ * @returns {any}
+ */
+var init_initCanvasEvents = function initCanvasEvents(_this) {
+  console.log('init canvas events');
+  // 鼠标按下
+  _this.canvas.on('mouse:down', function (options) {
+    mouse_mousedown(_this, options);
+  });
+  // 鼠标移动
+  _this.canvas.on('mouse:move', function (options) {
+    mouse_mousemove(_this, options);
+  });
+  // 鼠标抬起
+  _this.canvas.on('mouse:up', function (options) {
+    mouse_mouseup(_this, options);
+  });
+  // 鼠标双击
+  _this.canvas.on('mouse:dblclick', function (options) {
+    mouse_mousedblclick(_this, options);
+  });
+  // 鼠标滚轮监听
+  _this.canvas.on('mouse:wheel', function (options) {
+    mouse_mousewheel(_this, options);
+  });
+  // 鼠标移出画布监听
+  _this.canvas.on('mouse:out', function (options) {
+    mouse_mouseout(_this, options);
+  });
+  // 对象添加监听
+  _this.canvas.on('object:added', function (options) {
+    shapeadded(_this, options);
+  });
+  // 对象缩放监听
+  _this.canvas.on('object:scaling', function (options) {
+    shapescaling(_this, options);
+  });
+  // 对象缩放完成监听
+  _this.canvas.on('object:scaled', function (options) {
+    shape_shapescaled(_this, options);
+  });
+  // 自由绘制监听
+  _this.canvas.on('path:created', function (options) {
+    shape_pathcreated(_this, options);
+  });
+};
+var deleteIcon = "data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='595.275px' height='595.275px' viewBox='200 215 230 470' xml:space='preserve'%3E%3Ccircle style='fill:%23F44336;' cx='299.76' cy='439.067' r='218.516'/%3E%3Cg%3E%3Crect x='267.162' y='307.978' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -222.6202 340.6915)' style='fill:white;' width='65.545' height='262.18'/%3E%3Crect x='266.988' y='308.153' transform='matrix(0.7071 0.7071 -0.7071 0.7071 398.3889 -83.3116)' style='fill:white;' width='65.544' height='262.179'/%3E%3C/g%3E%3C/svg%3E";
+// const deleteIcon = '<svg t="1611035558221" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1133" width="32" height="32"><path d="M513.852 144.914c-203.711 0-368.936 165.192-368.936 368.936 0 203.756 165.203 368.936 368.936 368.936 203.756 0 368.936-165.143 368.936-368.936 0.005-203.711-165.177-368.936-368.936-368.936zM665.109 616.241c6.27 6.218 10.153 14.838 10.153 24.363 0 0.025 0 0.050 0 0.076 0 0.003 0 0.008 0 0.017 0 19.086-15.472 34.558-34.558 34.558-9.555 0-18.204-3.877-24.46-10.146l-102.39-102.331-102.319 102.364c-6.255 6.272-14.905 10.153-24.462 10.153-0.016 0-0.031 0-0.046 0-19.061 0-34.558-15.463-34.558-34.598 0-0.018 0-0.037 0-0.056 0-9.517 3.866-18.129 10.115-24.354l102.379-102.435-102.355-102.349c-6.25-6.245-10.117-14.875-10.117-24.408 0-0.021 0-0.042 0-0.063 0-19.093 15.486-34.583 34.586-34.583 0.010 0 0.023 0 0.036 0 9.533 0 18.162 3.865 24.409 10.116l102.319 102.378 102.39-102.352c6.256-6.25 14.896-10.116 24.438-10.116 19.098 0 34.579 15.482 34.579 34.579 0 0.003 0 0.007 0 0.007 0 0.020 0 0.044 0 0.067 0 9.537-3.882 18.168-10.15 24.398l-102.321 102.321 102.33 102.396z" fill="#1296db" p-id="1134"></path></svg>'
+
+var deleteImage = document.createElement('img');
+deleteImage.src = deleteIcon;
+// deleteImage.src = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(deleteIcon)))
+
+/**
+ * 构造图形删除控件
+ *
+ * @author pangyafei
+ * @date 2021-01-19
+ * @param {any} _this
+ * @returns {any}
+ */
+var init_getDeleteControl = function getDeleteControl(_this) {
+  var deleteControl = new external__fabric_["fabric"].Control({
+    x: 0.5,
+    y: -0.5,
+    offsetY: -16,
+    offsetX: 16,
+    cursorStyle: 'pointer',
+    mouseUpHandler: init_getDeleteShapeFunction(_this),
+    render: renderControlIcon(deleteImage),
+    cornerSize: 24
+  });
+  return deleteControl;
+};
+
+/**
+ * 渲染自定义控制点图标的方法
+ *
+ * @author pangyafei
+ * @date 2021-01-19
+ * @param {any} icon
+ * @returns {any}
+ */
+function renderControlIcon(icon) {
+  return function renderIcon(ctx, left, top, styleOverride, fabricObject) {
+    var size = this.cornerSize;
+    ctx.save();
+    ctx.translate(left, top);
+    ctx.rotate(external__fabric_["fabric"].util.degreesToRadians(fabricObject.angle));
+    ctx.drawImage(icon, -size / 2, -size / 2, size, size);
+    ctx.restore();
+  };
+}
+
+/**
+ * 返回删除图形方法，带vue对象的回调操作
+ *
+ * @author pangyafei
+ * @date 2021-01-19
+ * @param {any} _this
+ * @returns {any}
+ */
+var init_getDeleteShapeFunction = function getDeleteShapeFunction(_this) {
+  return function deleteShape(eventData, options) {
+    // console.log('delete shape')
+    // console.log(eventData)
+    // console.log(options)
+    _this.fireShapeDelete(data_getData(_this, options.target.id));
+    var canvas = options.target.canvas;
+    canvas.remove(options.target);
+    canvas.requestRenderAll();
+  };
+};
+
+/**
+ * 构造标签交互控件
+ *
+ * @author pangyafei
+ * @date 2021-02-18
+ * @param {any} label
+ * @returns {any}
+ */
+var init_getLabelControl = function getLabelControl(label) {
+  var labelIcon = '<svg width="80" height="18" version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" height="18" width="80" style="fill: #B2CCFF;"/> <text x="4" y="14" style="font-size:14px; fill:#333;">' + label + '</text> </svg>';
+  var labelImage = document.createElement('img');
+  labelImage._label = label;
+  labelImage.src = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(labelIcon)));
+  // 这个 control 居然是全局的，设置一次之后会影响所有的object，十分不人性化，理论上只需要执行一次即可，但此处还是在每一处需要添加的地方都调用了
+  // 这里在render中实时刷新control的内容重新进行绘制，以解决全局问题
+  var labelControl = new external__fabric_["fabric"].Control({
+    x: 0.5,
+    y: -0.5,
+    offsetY: -26,
+    offsetX: -80,
+    cursorStyle: 'default',
+    render: function render(ctx, left, top, styleOverride, fabricObject) {
+      console.log('label render', styleOverride);
+      if (fabricObject.label == null || fabricObject.label === '') {
+        return;
+      }
+      var newLabelIcon = '<svg width="80" height="18" version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" height="18" width="80" style="fill: #B2CCFF;"/> <text x="4" y="14" style="font-size:14px; fill:#333;">' + fabricObject.label + '</text> </svg>';
+      labelImage = document.createElement('img');
+      labelImage._label = label;
+      labelImage.src = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(newLabelIcon)));
+      ctx.save();
+      ctx.translate(left, top);
+      ctx.rotate(external__fabric_["fabric"].util.degreesToRadians(fabricObject.angle));
+      ctx.drawImage(labelImage, 0, 0, 80, 18);
+      ctx.restore();
+    }
+  });
+  return labelControl;
+};
+
+/**
+ * 重置鼠标移动对象
+ *
+ * @author pangyafei
+ * @date 2021-01-18
+ * @param {any} _this
+ * @returns {any}
+ */
+var resetMouseMove = function resetMouseMove(_this) {
+  _this.mouseFrom = {};
+  _this.mouseTo = {};
+};
+
+/**
+ * 添加辅助线
+ *
+ * @author pangyafei
+ * @date 2021-02-04
+ * @param {any} _this
+ * @param {any} center 辅助线的center point
+ * @returns {any}
+ */
+var init_addHelpLines = function addHelpLines(_this, center) {
+  clearHelpLines(_this);
+  var points = Object.values(_this.canvas.backgroundImage.aCoords);
+  var maxX = Math.max.apply(Math, _toConsumableArray(points.map(function (p) {
+    return p.x;
+  })));
+  var minX = Math.min.apply(Math, _toConsumableArray(points.map(function (p) {
+    return p.x;
+  })));
+  var maxY = Math.max.apply(Math, _toConsumableArray(points.map(function (p) {
+    return p.y;
+  })));
+  var minY = Math.min.apply(Math, _toConsumableArray(points.map(function (p) {
+    return p.y;
+  })));
+  var width = maxX - minX;
+  var height = maxY - minY;
+  if (center.y >= 0 && center.y <= height && center.x >= 0 && center.x <= width) {
+    var helpLineProps = {
+      stroke: '#333',
+      strokeWidth: 1 / _this.canvas.getZoom(),
+      hoverCursor: 'default',
+      transparentCorners: false,
+      selectable: false,
+      strokeUniform: true,
+      type: 'help',
+      strokeDashArray: [5, 3]
+    };
+
+    // console.log(Object.values(_this.canvas.backgroundImage.aCoords))
+    var h = new external__fabric_["fabric"].Line([0, center.y, _this.width, center.y], helpLineProps);
+    _this.canvas.add(h);
+    _this.helpLines.h = h;
+    var v = new external__fabric_["fabric"].Line([center.x, 0, center.x, height], helpLineProps);
+    _this.canvas.add(v);
+    _this.helpLines.v = v;
+  }
+};
+
+/**
+ * 清除辅助线
+ *
+ * @author pangyafei
+ * @date 2021-02-05
+ * @param {any} _this
+ * @returns {any}
+ */
+var clearHelpLines = function clearHelpLines(_this) {
+  if (_this.helpLines) {
+    if (_this.helpLines.h) {
+      _this.canvas.remove(_this.helpLines.h);
+      _this.helpLines.h = null;
+    }
+    if (_this.helpLines.v) {
+      _this.canvas.remove(_this.helpLines.v);
+      _this.helpLines.v = null;
+    }
+  } else {
+    _this.helpLines = {};
+  }
+};
+// CONCATENATED MODULE: ./src/components/labeler/shape/labeled_shapes.js
+
+
+
+
+// 带标注的矩形
+var LabeledRectangle = external__fabric_["fabric"].util.createClass(external__fabric_["fabric"].Rect, {
+  type: 'LabeledRectangle',
+  initialize: function initialize(options) {
+    options || (options = {});
+    this.callSuper('initialize', options);
+    this.set('label', options.label || '');
+  },
+  toObject: function toObject() {
+    return external__fabric_["fabric"].util.object.extend(this.callSuper('toObject'), {
+      label: this.get('label'),
+      labelFillColor: this.get('labelFillColor')
+    });
+  },
+  _render: function _render(ctx) {
+    this.callSuper('_render', ctx);
+    if (this.label != null && this.label.trim() !== '') {
+      var fontsize = 26;
+      var font = fontsize + 'px Arial';
+      ctx.font = font;
+      var left = -this.width / 2;
+      var top = -this.height / 2;
+      var width = Math.round(ctx.measureText(this.label).width);
+      ctx.fillStyle = this.labelFillColor || '#ff000099';
+      ctx.fillRect(left + 1, top + 1, width + 8, fontsize);
+      ctx.fillStyle = '#fff';
+      ctx.fillText(this.label, left + 4, top + 22);
+    }
+  }
+});
+
+// 带标注的多边形
+var LabeledPolygon = external__fabric_["fabric"].util.createClass(external__fabric_["fabric"].Polygon, {
+  type: 'LabeledPolygon',
+  initialize: function initialize(points, options) {
+    options || (options = {});
+    this.callSuper('initialize', points, options);
+    this.set('label', options.label || '');
+  },
+  toObject: function toObject() {
+    return external__fabric_["fabric"].util.object.extend(this.callSuper('toObject'), {
+      label: this.get('label'),
+      labelFillColor: this.get('labelFillColor')
+    });
+  },
+  _render: function _render(ctx) {
+    var _this = this;
+    this.callSuper('_render', ctx);
+    if (this.label != null && this.label.trim() !== '') {
+      var fontsize = 26;
+      var font = fontsize + 'px Arial';
+      ctx.font = font;
+      console.log(this);
+      // console.log(this.top)
+
+      var tempd = 9999999;
+      var tempp = null;
+      this.points.forEach(function (point) {
+        var d = point.y - _this.top + point.x - _this.left;
+        if (d < tempd) {
+          tempd = d;
+          tempp = point;
+        }
+      });
+      var left = -this.width / 2 + tempp.x - this.left;
+      var top = -this.height / 2 + tempp.y - this.top;
+      var width = Math.round(ctx.measureText(this.label).width);
+      ctx.fillStyle = this.labelFillColor || '#ff000099';
+      ctx.fillRect(left, top, width + 8, fontsize);
+      ctx.fillStyle = '#fff';
+      ctx.fillText(this.label, left + 4, top + 22);
+    }
+  }
+});
+// 带标注的点
+var LabeledPoint = external__fabric_["fabric"].util.createClass(external__fabric_["fabric"].Circle, {
+  type: 'LabeledPoint',
+  initialize: function initialize(options) {
+    options || (options = {});
+    this.set('label', options.label || '');
+    this.set('radius', options.radius || 0);
+    this.set('scaleX', options.scaleX || 1);
+    this.set('scaleY', options.scaleY || 1);
+    this.set('left', options.left || 0);
+    this.set('top', options.top || 0);
+    this.set('fill', options.fill);
+    this.set('id', options.id);
+    this.set('type', options.type);
+    this.set('visible', options.visible);
+    this.set('selectable', options.selectable);
+    this.set('stroke', options.stroke);
+    this.set('strokeWidth', options.strokeWidth);
+    this.set('originX', options.originX);
+    this.set('originY', options.originY);
+    this.set('centeredScaling', options.centeredScaling);
+    this.set('crosshair', options.crosshair);
+    this.set('crosshairColor', options.crosshairColor);
+    this.set('crosshairWidth', options.crosshairWidth);
+    this.set('description', options.description);
+    this.set('labelSize', options.labelSize);
+
+    // 解决在设置 point 标注对象时，缩放画布导致标签显示异常的问题
+    this.objectCaching = false;
+  },
+  toObject: function toObject() {
+    return external__fabric_["fabric"].util.object.extend(this.callSuper('toObject'), {
+      label: this.get('label')
+    });
+  },
+  _render: function _render(ctx) {
+    this.callSuper('_render', ctx);
+    if (this.label != null && this.label.trim() !== '') {
+      var fontsize = this.labelSize || 20;
+      var font = fontsize + 'px Arial';
+      ctx.font = font;
+      var width = Math.round(ctx.measureText(this.label).width);
+      var left = -this.width / 2 + this.radius - width / 2 - 1;
+      var top = -this.height / 2 - 3;
+
+      // ctx.fillStyle =
+      // ctx.fillRect(left - 1, top, width + 8, fontsize)
+
+      ctx.fillStyle = this.stroke;
+      ctx.fillText(this.label, left, top);
+
+      // origin is center & center
+      if (this.crosshair) {
+        ctx.beginPath();
+        ctx.lineWidth = this.crosshairWidth;
+        ctx.strokeStyle = this.crosshairColor;
+        ctx.moveTo(-1, 0);
+        ctx.lineTo(-this.radius - 2, 0);
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.lineWidth = this.crosshairWidth;
+        ctx.strokeStyle = this.crosshairColor;
+        ctx.moveTo(1, 0);
+        ctx.lineTo(this.radius + 2, 0);
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.lineWidth = this.crosshairWidth;
+        ctx.strokeStyle = this.crosshairColor;
+        ctx.moveTo(0, -1);
+        ctx.lineTo(0, -this.radius - 2);
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.lineWidth = this.crosshairWidth;
+        ctx.strokeStyle = this.crosshairColor;
+        ctx.moveTo(0, 1);
+        ctx.lineTo(0, this.radius + 2);
+        ctx.stroke();
+      }
+    }
+  }
+});
+// CONCATENATED MODULE: ./src/components/labeler/function/draw.js
+
+
+
+
+// eslint-disable-next-line no-unused-vars
+
+
+// eslint-disable-next-line no-unused-vars
+
+
+/**
+ * 开启绘制
+ *
+ * @author pangyafei
+ * @date 2021-01-18
+ * @param {any} _this imageLabeler
+ * @param {any} type drawType
+ * @returns {any}
+ */
+var draw_startDraw = function startDraw(_this, type) {
+  if (_this.drawingObject != null) {
+    // 当前正在绘制中，先清除
+    _this.stopDraw(_this);
+  }
+  if (_this.textObject != null) {
+    console.log('start other type draw, clear text object');
+    _this.stopDraw(_this);
+  }
+  _this.isDrawing = true;
+  _this.canvas.skipTargetFind = true;
+  _this.currentDrawType = drawType[type];
+
+  // 改switch
+
+  switch (type) {
+    case drawType.rectangle:
+      // 画矩形
+      draw_drawRectangle(_this);
+      break;
+    case drawType.polygon:
+      // 画多边形
+      draw_drawPolygon(_this);
+      break;
+    case drawType.circle:
+      // 画圆形
+      draw_drawCircle(_this);
+      break;
+    case drawType.triangle:
+      // 画三角形
+      draw_drawTriangle(_this);
+      break;
+    case drawType.line:
+      // 画直线
+      draw_drawLine(_this);
+      break;
+    case drawType.free:
+      // 自由绘制
+      drawPath(_this);
+      break;
+    case drawType.point:
+      // 绘制点
+      break;
+    case drawType.textbox:
+      // 添加文字
+      break;
+    default:
+      _this.canvas.skipTargetFind = false;
+      break;
+  }
+};
+
+/**
+ * 停止绘制
+ *
+ * @author pangyafei
+ * @date 2021-01-18
+ * @param {any} _this
+ * @returns {any}
+ */
+var draw_stopDraw = function stopDraw(_this) {
+  _this.isDrawing = false;
+  _this.currentDrawType = null;
+  _this.canvas.selection = true;
+  _this.canvas.selectable = true;
+  _this.canvas.skipTargetFind = false;
+  _this.canvas.isDrawingMode = false;
+  clearDrawingObject(_this);
+  clearVirtualObject(_this);
+  resetMouseMove(_this);
+};
+
+/**
+ * 画矩形
+ *
+ * @author pangyafei
+ * @date 2021-01-18
+ * @param {any} _this
+ * @returns {any}
+ */
+var draw_drawRectangle = function drawRectangle(_this) {
+  var left = Math.min(_this.mouseFrom.x, _this.mouseTo.x);
+  var top = Math.min(_this.mouseFrom.y, _this.mouseTo.y);
+  var width = Math.abs(_this.mouseTo.x - _this.mouseFrom.x);
+  var height = Math.abs(_this.mouseTo.y - _this.mouseFrom.y);
+  var canvasObject = new LabeledRectangle({
+    // const canvasObject = new fabric.Rect({
+    left: left,
+    top: top,
+    width: width,
+    height: height,
+    fill: _this.fillColor,
+    stroke: _this.lineColor,
+    strokeWidth: _this.lineWidth,
+    hoverCursor: 'default',
+    transparentCorners: false,
+    noScaleCache: false
+  });
+  // canvasObject.setControlVisible('mtr', false)
+  changeDrawingObject(_this, canvasObject);
+};
+
+/**
+ * 画多边形
+ *
+ * @author pangyafei
+ * @date 2021-01-18
+ * @param {any} _this
+ * @returns {any}
+ */
+var draw_drawPolygon = function drawPolygon(_this) {
+  if (!_this.drawingPoints) {
+    _this.drawingPoints = [];
+  }
+  if (_this.mouseFrom.x != null && _this.mouseFrom.y != null) {
+    _this.drawingPoints.push({
+      x: _this.mouseFrom.x,
+      y: _this.mouseFrom.y
+    });
+  }
+  var canvasObject = new LabeledPolygon(_this.drawingPoints, {
+    // const canvasObject = new fabric.Polygon(_this.drawingPoints, {
+    fill: _this.fillColor,
+    stroke: _this.lineColor,
+    strokeWidth: _this.lineWidth,
+    // scaleX: 1,
+    // scaleY: 1,
+    objectCaching: false,
+    transparentCorners: false
+    // cornerColor: 'blue'
+  });
+  changeDrawingObject(_this, canvasObject);
+};
+
+/**
+ * 绘制多边形虚拟线
+ *
+ * @author pangyafei
+ * @date 2021-01-18
+ * @param {any} _this
+ * @returns {any}
+ */
+var draw_drawPolygonVirtualLine = function drawPolygonVirtualLine(_this) {
+  // console.log('draw virtual line', this.drawingPoints)
+  clearVirtualObject(_this);
+  _this.virtualObject = {
+    a: null,
+    b: null
+  };
+  if (_this.drawingPoints != null && _this.drawingPoints.length > 0) {
+    _this.virtualObject.a = new external__fabric_["fabric"].Line([_this.drawingPoints[0].x, _this.drawingPoints[0].y, _this.mouseTo.x, _this.mouseTo.y], {
+      stroke: _this.lineColor,
+      strokeWidth: _this.lineWidth,
+      strokeDashArray: [4, 3]
+    });
+    _this.canvas.add(_this.virtualObject.a);
+    if (_this.drawingPoints.length > 1) {
+      // console.log(_this.drawingPoints)
+      _this.virtualObject.b = new external__fabric_["fabric"].Line([_this.drawingPoints[_this.drawingPoints.length - 1].x, _this.drawingPoints[_this.drawingPoints.length - 1].y, _this.mouseTo.x, _this.mouseTo.y], {
+        stroke: _this.lineColor,
+        strokeWidth: _this.lineWidth,
+        strokeDashArray: [4, 3]
+      });
+      _this.canvas.add(_this.virtualObject.b);
+    }
+  }
+};
+
+/**
+ * 画圆形
+ *
+ * @author pangyafei
+ * @date 2021-02-02
+ * @param {any} _this
+ * @returns {any}
+ */
+var draw_drawCircle = function drawCircle(_this) {
+  var left = Math.min(_this.mouseFrom.x, _this.mouseTo.x);
+  var top = Math.min(_this.mouseFrom.y, _this.mouseTo.y);
+  var width = Math.abs(_this.mouseFrom.x - _this.mouseTo.x);
+  var height = Math.abs(_this.mouseFrom.y - _this.mouseTo.y);
+  var radius = Math.sqrt(width * width + height * height) / 2;
+  var circle = new external__fabric_["fabric"].Circle({
+    left: left,
+    top: top,
+    scaleX: 1,
+    scaleY: 1,
+    stroke: _this.lineColor,
+    fill: _this.fillColor,
+    radius: radius,
+    strokeWidth: _this.lineWidth,
+    hoverCursor: 'default',
+    transparentCorners: false,
+    description: _this.description,
+    objectCaching: false,
+    originX: 'center',
+    originY: 'center',
+    centeredScaling: true,
+    type: drawType.circle
+  });
+  circle.setControlVisible('mtr', false);
+  changeDrawingObject(_this, circle);
+};
+
+/**
+ * 绘制三角形
+ *
+ * @author pangyafei
+ * @date 2021-02-02
+ * @param {any} _this
+ * @returns {any}
+ */
+var draw_drawTriangle = function drawTriangle(_this) {
+  var left = _this.mouseFrom.x;
+  var top = _this.mouseFrom.y;
+  var height = _this.mouseTo.y - _this.mouseFrom.y;
+  var width = Math.sqrt(Math.pow(height, 2) + Math.pow(height / 2.0, 2));
+  var triangle = new external__fabric_["fabric"].Triangle({
+    left: left,
+    top: top,
+    width: width,
+    height: height,
+    stroke: _this.lineColor,
+    fill: _this.fillColor,
+    strokeWidth: _this.lineWidth,
+    hoverCursor: 'default',
+    transparentCorners: false
+  });
+  triangle.setControlVisible('mtr', false);
+  changeDrawingObject(_this, triangle);
+};
+
+/**
+ * 绘制直线
+ *
+ * @author pangyafei
+ * @date 2021-02-03
+ * @param {any} _this
+ * @returns {any}
+ */
+var draw_drawLine = function drawLine(_this) {
+  var canvasObject = new external__fabric_["fabric"].Line([_this.mouseFrom.x, _this.mouseFrom.y, _this.mouseTo.x, _this.mouseTo.y], {
+    scaleX: 1,
+    scaleY: 1,
+    stroke: _this.lineColor,
+    fill: _this.fillColor,
+    strokeWidth: _this.lineWidth,
+    hoverCursor: 'default',
+    transparentCorners: false
+  });
+  canvasObject.setControlVisible('mtr', false);
+  changeDrawingObject(_this, canvasObject);
+};
+
+/**
+ * 绘制点，用圆形实现
+ *
+ * @author pangyafei
+ * @date 2021-02-05
+ * @param {any} _this
+ * @returns {any}
+ */
+var draw_drawPoint = function drawPoint(_this) {
+  _this.canvas.selection = false;
+  _this.canvas.selectable = false;
+  var left = _this.mouseFrom.x - _this.pointRadius;
+  var top = _this.mouseFrom.y - _this.pointRadius;
+  var point = new LabeledPoint(Object.assign({
+    left: left,
+    top: top,
+    radius: _this.pointRadius,
+    fill: _this.pointFillColor,
+    stroke: _this.pointLineColor,
+    strokeWidth: _this.pointLineWidth,
+    crosshair: _this.pointCrosshair,
+    crosshairColor: _this.pointCrosshairColor,
+    crosshairWidth: _this.pointCrosshairWidth,
+    description: _this.description,
+    hoverCursor: 'default',
+    transparentCorners: false,
+    visible: true,
+    selectable: true,
+    originX: 'center',
+    originY: 'center',
+    centeredScaling: true,
+    type: drawType.point
+  }, {}));
+  _this.drawingObject = point;
+
+  // 添加删除按钮
+  if (_this.showDeleteIcon) {
+    point.controls.deleteControl = init_getDeleteControl(_this);
+  }
+  // 添加标签
+  if (_this.showLabel && point.label && point.label !== '') {
+    // point.controls.labelControl = getLabelControl(point.label)
+  }
+  point.setControlsVisibility({
+    bl: false,
+    br: false,
+    mb: false,
+    ml: false,
+    mr: false,
+    mt: false,
+    tl: false,
+    tr: false,
+    mtr: false
+  });
+  _this.canvas.add(point);
+};
+
+/**
+ * 自由绘制
+ *
+ * @author pangyafei
+ * @date 2021-02-03
+ * @param {any} _this
+ * @returns {any}
+ */
+var drawPath = function drawPath(_this) {
+  _this.canvas.freeDrawingBrush.color = _this.lineColor;
+  _this.canvas.freeDrawingBrush.width = _this.lineWidth;
+  _this.canvas.isDrawingMode = true;
+};
+
+/**
+ * 添加文字
+ *
+ * @author pangyafei
+ * @date 2021-01-27
+ * @param {any} _this
+ * @returns {any}
+ */
+var draw_drawTextbox = function drawTextbox(_this) {
+  // 只能单次添加文字
+  _this.currentDrawType = null;
+  _this.canvas.selection = false;
+  _this.canvas.selectable = false;
+  var textObject = new external__fabric_["fabric"].Textbox('', {
+    left: _this.mouseFrom.x,
+    top: _this.mouseFrom.y,
+    scaleX: 1,
+    scaleY: 1,
+    fontSize: _this.fontSize,
+    fill: _this.fontColor,
+    hasControls: true,
+    transparentCorners: false
+    // lockScalingFlip: true,
+    // lockScalingX: true,
+    // lockScalingY: true,
+    // lockUniScaling: true,
+    // lockSkewingX: true,
+    // lockSkewingY: true
+  });
+  _this.canvas.add(textObject);
+  textObject.on('editing:exited', function (options) {
+    // 退出编辑时恢复正常操作,且不可再次编辑
+    textBindLabel(_this);
+    textObject.editable = false;
+    textObject.setControlVisible('mtr', false);
+
+    // 添加删除按钮
+    if (_this.showDeleteIcon) {
+      textObject.controls.deleteControl = init_getDeleteControl(_this);
+    }
+    // 添加标签
+    if (_this.showLabel && textObject.label && textObject.label !== '') {
+      // textObject.controls.labelControl = getLabelControl(textObject.label)
+    }
+    _this.textObject = null;
+    draw_stopDraw(_this);
+  });
+  textObject.enterEditing();
+  textObject.hiddenTextarea.focus();
+  _this.textObject = textObject;
+};
+
+/**
+ * 清除画布标注
+ *
+ * @author pangyafei
+ * @date 2021-01-18
+ * @param {any} _this
+ * @param {any} id 标注元素的id
+ * @returns {any}
+ */
+var draw_clearDraw = function clearDraw(_this, id) {
+  if (_this.canvas) {
+    if (id) {
+      // 根据id清除指定标注
+      _this.canvas._objects.forEach(function (item) {
+        console.log(item.id);
+        if (id === item.id) {
+          _this.canvas.remove(item);
+        }
+      });
+    } else {
+      // 清除画布所有的标注
+      _this.canvas.clear();
+      resetMouseMove(_this);
+      _this.historyObjects = [];
+      init_initBackgroundImage(_this, true);
+    }
+  }
+};
+/**
+ * @description: 设置标注的显示与影藏
+ * @author: miaochan
+ * @date: 2023-06-07 13:50:40
+ * @param:
+ * @return:
+*/
+var draw_setVisible = function setVisible(_this, id, flag) {
+  if (_this.canvas) {
+    if (id) {
+      // 根据id清除指定标注
+      _this.canvas._objects.forEach(function (item) {
+        console.log(item.id);
+        if (id === item.id) {
+          item.visible = flag;
+          _this.canvas.renderAll();
+        }
+      });
+    }
+  }
+};
+/**
+ * @description: 设置标注是否可以移动
+ * @author: miaochan
+ * @date: 2023-06-07 14:11:54
+ * @param:
+ * @return:
+*/
+var draw_setSelectable = function setSelectable(_this, id, flag) {
+  if (_this.canvas) {
+    if (id) {
+      // 根据id清除指定标注
+      _this.canvas._objects.forEach(function (item) {
+        console.log(item.id);
+        if (id === item.id) {
+          item.selectable = flag;
+          _this.canvas.renderAll();
+        }
+      });
+    }
+  }
+};
+
+/**
+ * 提示不可编辑
+ *
+ * @author pangyafei
+ * @date 2021-01-19
+ * @param {any} _this
+ * @returns {any}
+ */
+var draw_notEditable = function notEditable(_this) {
+  throw Error(notEditableMsg);
+};
+
+/**
+ * 根据鼠标的移动实时改变绘制的对象
+ *
+ * @author pangyafei
+ * @date 2021-01-18
+ * @param {any} _this
+ * @param {any} canvasObject
+ * @returns {any}
+ */
+var changeDrawingObject = function changeDrawingObject(_this, canvasObject) {
+  _this.canvas.isDrawingMode = false;
+  _this.canvas.selectable = false;
+  _this.canvas.selection = false;
+  canvasObject.selectable = true;
+  if (_this.drawingObject) {
+    _this.canvas.remove(_this.drawingObject);
+  }
+  _this.canvas.add(canvasObject);
+  _this.drawingObject = canvasObject;
+};
+
+/**
+ * 清除正在绘制的图形
+ *
+ * @author pangyafei
+ * @date 2021-01-18
+ * @param {any} _this
+ * @returns {any}
+ */
+var clearDrawingObject = function clearDrawingObject(_this) {
+  if (_this.drawingObject) {
+    _this.canvas.remove(_this.drawingObject);
+  }
+  if (_this.textObject) {
+    _this.textObject.exitEditing();
+    // 下面两句不起作用，exit editing 的时候 textObject已经为null
+    // _this.canvas.remove(_this.textObject)
+    // _this.textObject = null
+  }
+  _this.drawingObject = null;
+  _this.drawingPoints = null;
+};
+
+/**
+ * 清除正在绘制的虚线辅助线
+ *
+ * @author pangyafei
+ * @date 2021-01-18
+ * @param {any} _this
+ * @returns {any}
+ */
+var clearVirtualObject = function clearVirtualObject(_this) {
+  if (_this.virtualObject) {
+    if (_this.virtualObject.a) {
+      _this.canvas.remove(_this.virtualObject.a);
+    }
+    if (_this.virtualObject.b) {
+      _this.canvas.remove(_this.virtualObject.b);
+    }
+  }
+  _this.virtualObject = null;
+};
+
+/**
+ * 撤销最近一次绘制或添加的图形
+ *
+ * @author pangyafei
+ * @date 2021-02-05
+ * @param {any} _this
+ * @returns {any}
+ */
+var draw_undo = function undo(_this) {
+  if (_this.canvas._objects.length > 0) {
+    _this.canvas.discardActiveObject();
+    _this.historyObjects.push(_this.canvas._objects.pop());
+    _this.canvas.renderAll();
+  }
+};
+
+/**
+ * 将最近一次撤销绘制的图形还原到画布中
+ *
+ * @author pangyafei
+ * @date 2021-02-05
+ * @param {any} _this
+ * @returns {any}
+ */
+var draw_redo = function redo(_this) {
+  if (_this.historyObjects.length > 0) {
+    _this.canvas.add(_this.historyObjects.pop());
+    _this.canvas.renderAll();
+  }
+};
+// CONCATENATED MODULE: ./src/components/labeler/event/mouse.js
+
+
+
+
+
+
+
+
+// eslint-disable-next-line no-unused-vars
+
+
+
+
+
+/**
+ * 鼠标按下事件监听
+ *
+ * @author pangyafei
+ * @date 2021-01-18
+ * @param {any} _this
+ * @param {any} options
+ * @returns {any}
+ */
+var mouse_mousedown = function mousedown(_this, options) {
+  // console.log('draw type : ' + _this.currentDrawType)
+  // console.log('mouse down : ', options)
+  // const scrollTop = Math.floor(document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset)
+  // const scrollLeft = Math.floor(document.body.scrollLeft || document.documentElement.scrollLeft || window.pageXOffset)
+  // console.log(scrollTop)
+  // console.log(scrollLeft)
+  // console.log(_this.currentDrawType in Object.values(drawType))
+
+  if (_this.isDrawing === false && options.target == null) {
+    _this.atDragging = true;
+    _this.canvas.selection = false;
+    // _this.canvas.selectable = false
+  } else if (_this.isDrawing === false && options.target != null) {
+    _this.fireShapeSelect(data_getData(_this, options.target.id));
+  } else if (Object.values(drawType).includes(_this.currentDrawType)) {
+    // console.log('mouse down')
+
+    // console.log(options)
+
+    _this.mouseFrom.x = options.absolutePointer.x;
+    _this.mouseFrom.y = options.absolutePointer.y;
+
+    // _this.mouseFrom.x = options.e.clientX - _this.left + scrollLeft
+    // _this.mouseFrom.y = options.e.clientY - _this.top + scrollTop
+    _this.atDrawing = true;
+    switch (_this.currentDrawType) {
+      case drawType.textbox:
+        draw_drawTextbox(_this);
+        break;
+      case drawType.polygon:
+        draw_drawPolygon(_this);
+        break;
+      case drawType.point:
+        draw_drawPoint(_this);
+        break;
+      default:
+        break;
+    }
+  }
+};
+
+/**
+ * 鼠标移动事件监听
+ *
+ * @author pangyafei
+ * @date 2021-01-18
+ * @param {any} _this
+ * @param {any} options
+ * @returns {any}
+ */
+var mouse_mousemove = function mousemove(_this, options) {
+  if (_this.showHelpLines) {
+    // 实时绘制参考线
+    init_addHelpLines(_this, {
+      x: options.absolutePointer.x,
+      y: options.absolutePointer.y
+    });
+  }
+  if (_this.atDragging && options && options.e) {
+    // 正在拖动背景画布
+    var delta = new external__fabric_["fabric"].Point(options.e.movementX, options.e.movementY);
+    _this.canvas.relativePan(delta);
+    _this.fireBgImageDrag(delta);
+    return;
+  }
+  if (_this.atDrawing && Object.values(drawType).includes(_this.currentDrawType)) {
+    // 正在绘制需要鼠标按下拖动绘制出的图形
+
+    // console.log('mouse move')
+    // const scrollTop = Math.floor(document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset)
+    // const scrollLeft = Math.floor(document.body.scrollLeft || document.documentElement.scrollLeft || window.pageXOffset)
+    // _this.mouseTo.x = options.e.clientX - _this.left + scrollLeft
+    // _this.mouseTo.y = options.e.clientY - _this.top + scrollTop
+    // console.log(options)
+    _this.mouseTo.x = options.absolutePointer.x;
+    _this.mouseTo.y = options.absolutePointer.y;
+    switch (_this.currentDrawType) {
+      case drawType.line:
+        draw_drawLine(_this);
+        break;
+      case drawType.circle:
+        draw_drawCircle(_this);
+        break;
+      case drawType.rectangle:
+        draw_drawRectangle(_this);
+        break;
+      case drawType.triangle:
+        draw_drawTriangle(_this);
+        break;
+      case drawType.polygon:
+        draw_drawPolygonVirtualLine(_this);
+        break;
+      default:
+        break;
+    }
+  }
+};
+
+/**
+ * 鼠标抬起事件监听
+ *
+ * @author pangyafei
+ * @date 2021-01-18
+ * @param {any} _this
+ * @param {any} options
+ * @returns {any}
+ */
+var mouse_mouseup = function mouseup(_this, options) {
+  if (_this.atDragging) {
+    _this.atDragging = false;
+    _this.canvas.selection = true;
+    // _this.canvas.selectable = true
+  } else if (Object.values(drawType).includes(_this.currentDrawType) && _this.currentDrawType !== drawType.polygon) {
+    // console.log('mouse up')
+    // _this.mouseTo.x = options.e.clientX - _this.left
+    // _this.mouseTo.y = options.e.clientY - _this.top
+
+    if (_this.drawingObject == null) {
+      return;
+    }
+    if (isNaN(_this.drawingObject.left)) {
+      return;
+    }
+    _this.drawingObject.type = _this.currentDrawType;
+    // 图形绑定标签
+    shapeBindLabel(_this);
+    var drawData = data_getData(_this, _this.drawingObject.id);
+
+    // 添加删除图标
+    if (_this.showDeleteIcon) {
+      _this.drawingObject.controls.deleteControl = init_getDeleteControl(_this);
+    }
+    // 添加标签控件
+    if (_this.showLabel && _this.drawingObject.label && _this.drawingObject.label !== '') {
+      // _this.drawingObject.controls.labelControl = getLabelControl(_this.drawingObject.label)
+
+      if (_this.currentDrawType === drawType.rectangle) {
+        getTextboxLabel(_this, _this.drawingObject);
+      }
+      // console.log('draw with control', _this.drawingObject.controls)
+    }
+    _this.drawingObject = null;
+    // console.log('fire shape id :' + _this.drawingObject.id)
+    // console.log(getData(_this, _this.drawingObject.id))
+    _this.fireShapeDraw(drawData);
+    _this.mouseFrom.x = options.absolutePointer.x;
+    _this.mouseFrom.y = options.absolutePointer.y;
+    _this.atDrawing = false;
+    resetMouseMove(_this);
+  } else if (_this.isDrawing === false && options.target) {
+    _this.fireShapeDrag(data_getData(_this, options.target.id));
+  }
+};
+
+/**
+ * 鼠标双击事件监听
+ *
+ * @author pangyafei
+ * @date 2021-01-18
+ * @param {any} _this
+ * @param {any} options
+ * @returns {any}
+ */
+var mouse_mousedblclick = function mousedblclick(_this, options) {
+  if (Object.values(drawType).includes(_this.currentDrawType) && _this.currentDrawType === drawType.polygon) {
+    // console.log('mouse dblclick')
+    // 移除最后一个多边形的点
+    // console.log(_this.drawingObject)
+    _this.drawingPoints.pop();
+
+    // const canvasObject = new fabric.Polygon(_this.drawingPoints, {
+    var canvasObject = new LabeledPolygon(_this.drawingPoints, {
+      fill: _this.fillColor,
+      stroke: _this.lineColor,
+      strokeWidth: _this.lineWidth,
+      // scaleX: 1,
+      // scaleY: 1,
+      objectCaching: false,
+      transparentCorners: false,
+      type: drawType.polygon,
+      lockMovementX: true,
+      lockMovementY: true,
+      hoverCursor: 'default'
+      // cornerColor: 'blue'
+    });
+    canvasObject.selectable = true;
+    if (_this.drawingObject) {
+      _this.canvas.remove(_this.drawingObject);
+    }
+    _this.canvas.add(canvasObject);
+    _this.drawingObject = canvasObject;
+
+    // 图形绑定标签
+    shapeBindLabel(_this);
+
+    // 为多边形定义控制事件
+    // _this.drawingObject.connerStyle = 'circle'
+    addPolygonControl(_this.drawingObject);
+
+    // 添加删除图标
+    if (_this.showDeleteIcon) {
+      _this.drawingObject.controls.deleteControl = init_getDeleteControl(_this);
+    }
+    // 添加标签控件
+    if (_this.showLabel && _this.drawingObject.label && _this.drawingObject.label !== '') {
+      // _this.drawingObject.controls.labelControl = getLabelControl(_this.drawingObject.label)
+    }
+
+    // _this.canvas.requestRenderAll()
+    var id = _this.drawingObject.id;
+    _this.drawingObject = null;
+    _this.drawingPoints = null;
+    _this.atDrawing = false;
+    if (_this.virtualObject.a != null) {
+      _this.canvas.remove(_this.virtualObject.a);
+    }
+    if (_this.virtualObject.b != null) {
+      _this.canvas.remove(_this.virtualObject.b);
+    }
+    _this.virtualObject = null;
+    resetMouseMove(_this);
+    _this.fireShapeDraw(data_getData(_this, id));
+  }
+};
+
+/**
+ * 鼠标移出画布事件监听
+ *
+ * @author pangyafei
+ * @date 2021-02-05
+ * @param {any} _this
+ * @param {any} options
+ * @returns {any}
+ */
+var mouse_mouseout = function mouseout(_this, options) {
+  if (_this.showHelpLines) {
+    clearHelpLines(_this);
+  }
+};
+
+/**
+ * 鼠标滚轮事件监听
+ *
+ * @author pangyafei
+ * @date 2021-01-18
+ * @param {any} _this
+ * @param {any} options
+ * @returns {any}
+ */
+var mouse_mousewheel = function mousewheel(_this, options) {
+  var delta = options.e.deltaY / -1000;
+  var lastZoom = _this.canvas.getZoom();
+  var zoom = Math.pow(Math.log(Math.abs(delta) + 1) + 1, Math.sign(delta)) * lastZoom;
+  // let zoom = (options.e.deltaY > 0 ? -0.1 : 0.1) + _this.canvas.getZoom()
+  // zoom = Math.max(0.1, zoom) // 最小为原来的1/10
+  // zoom = Math.min(10, zoom) // 最大是原来的10倍
+  var zoomPoint = new external__fabric_["fabric"].Point(options.e.layerX, options.e.layerY);
+  _this.canvas.zoomToPoint(zoomPoint, zoom);
+  _this.canvas._objects.forEach(function (item) {
+    // console.log('visit wheel: ', item)
+
+    // 点缩放处理
+    if (!_this.pointZoom && item.type === drawType.point) {
+      // console.log('point radius: ', item.getRadiusX())
+      // console.log('point radius: ', item.getRadiusY())
+      // console.log('point radius: ', item.getScaledWidth())
+
+      // console.log('point scaleX: ', item.scaleX)
+      // console.log('point centeredScaling: ', item.centeredScaling)
+      // console.log('point originX: ', item.originX)
+      // console.log('point originY: ', item.originY)
+
+      // item.setRadius(item.getRadiusX() / zoom * lastZoom)
+
+      // scaleX == scaleY
+      item.scale(item.scaleX / zoom * lastZoom);
+    }
+    // if (id === item.id) {
+    //   _this.canvas.remove(item)
+    // }
+  });
+  var imageInfo = {
+    width: _this.image.width,
+    height: _this.image.height,
+    scaleX: _this.canvas.backgroundImage.scaleX * _this.canvas.getZoom(),
+    scaleY: _this.canvas.backgroundImage.scaleX * _this.canvas.getZoom()
+  };
+  _this.fireMouseWheel(imageInfo);
+};
+
+// 多边形控制点操控相关方法
+
+function addPolygonControl(polygon) {
+  var lastIndex = polygon.points.length - 1;
+  polygon.controls = polygon.points.reduce(function (acc, point, index) {
+    acc['p' + index] = new external__fabric_["fabric"].Control({
+      positionHandler: polygonPositionHandler,
+      actionHandler: anchorWrapper(index > 0 ? index - 1 : lastIndex, actionHandler),
+      actionName: 'modifyPolygon',
+      pointIndex: index
+    });
+    return acc;
+  }, {});
+}
+
+// define a function that can locate the controls.
+// this function will be used both for drawing and for interaction.
+function polygonPositionHandler(dim, finalMatrix, fabricObject) {
+  var x = fabricObject.points[this.pointIndex].x - fabricObject.pathOffset.x;
+  var y = fabricObject.points[this.pointIndex].y - fabricObject.pathOffset.y;
+  return external__fabric_["fabric"].util.transformPoint({
+    x: x,
+    y: y
+  }, external__fabric_["fabric"].util.multiplyTransformMatrices(fabricObject.canvas.viewportTransform, fabricObject.calcTransformMatrix()));
+}
+
+// define a function that will define what the control does
+// this function will be called on every mouse move after a control has been
+// clicked and is being dragged.
+// The function receive as argument the mouse event, the current trasnform object
+// and the current position in canvas coordinate
+// transform.target is a reference to the current object being transformed,
+function actionHandler(eventData, transform, x, y) {
+  var polygon = transform.target;
+  var currentControl = polygon.controls[polygon.__corner];
+  var mouseLocalPosition = polygon.toLocalPoint(new external__fabric_["fabric"].Point(x, y), 'center', 'center');
+  var polygonBaseSize = polygon._getNonTransformedDimensions();
+  var size = polygon._getTransformedDimensions(0, 0);
+  var finalPointPosition = {
+    x: mouseLocalPosition.x * polygonBaseSize.x / size.x + polygon.pathOffset.x,
+    y: mouseLocalPosition.y * polygonBaseSize.y / size.y + polygon.pathOffset.y
+  };
+  polygon.points[currentControl.pointIndex] = finalPointPosition;
+  return true;
+}
+
+// define a function that can keep the polygon in the same position when we change its
+// width/height/top/left.
+function anchorWrapper(anchorIndex, fn) {
+  return function (eventData, transform, x, y) {
+    var fabricObject = transform.target;
+    var absolutePoint = external__fabric_["fabric"].util.transformPoint({
+      x: fabricObject.points[anchorIndex].x - fabricObject.pathOffset.x,
+      y: fabricObject.points[anchorIndex].y - fabricObject.pathOffset.y
+    }, fabricObject.calcTransformMatrix());
+    var actionPerformed = fn(eventData, transform, x, y);
+    fabricObject._setPositionDimensions({});
+    var polygonBaseSize = fabricObject._getNonTransformedDimensions();
+    var newX = (fabricObject.points[anchorIndex].x - fabricObject.pathOffset.x) / polygonBaseSize.x;
+    var newY = (fabricObject.points[anchorIndex].y - fabricObject.pathOffset.y) / polygonBaseSize.y;
+    fabricObject.setPositionByOrigin(absolutePoint, newX + 0.5, newY + 0.5);
+    return actionPerformed;
+  };
+}
+// CONCATENATED MODULE: ./src/components/labeler/function/data.js
+
+
+
+
+
+
+// eslint-disable-next-line no-unused-vars
+
+
+
+
+
+
+// eslint-disable-next-line no-unused-vars
+
+
+/**
+ * 获取所有的标注图形信息
+ *
+ * @author pangyafei
+ * @date 2021-01-19
+ * @param {any} _this
+ * @param {any} id
+ * @param {any} label
+ * @returns {any}
+ */
+var data_getData = function getData(_this, id, label) {
+  // console.log(_this.canvas)
+  // console.log(_this.canvas.getObjects())
+  var shapes = _this.canvas.getObjects();
+  var data = [];
+  var imageInfo = data_getImageInfo(_this);
+  var scaleX = imageInfo.scaleX;
+  var scaleY = imageInfo.scaleY;
+  // console.log(imageInfo)
+
+  shapes.forEach(function (shape) {
+    // 此处的shape有可能是text
+    // console.log(shape.type)
+    // console.log(shape)
+    var item = {
+      id: shape.id,
+      label: shape.label,
+      description: shape.description,
+      lineColor: shape.stroke,
+      lineWidth: shape.strokeWidthUnscaled || shape.strokeWidth,
+      fillColor: shape.fill,
+      type: shape.type,
+      top: shape.top,
+      left: shape.left,
+      points: []
+    };
+    // console.log('shape : ', shape)
+
+    switch (shape.type) {
+      case drawType.rectangle:
+        // item.points = clonedeep(Object.values(shape.aCoords))
+        item.points = [{
+          x: shape.left / scaleX,
+          y: (shape.top + shape.getScaledHeight() - 2) / scaleY
+        }, {
+          x: (shape.left + shape.getScaledWidth() - 2) / scaleX,
+          y: (shape.top + shape.getScaledHeight() - 2) / scaleY
+        }, {
+          x: shape.left / scaleX,
+          y: shape.top / scaleY
+        }, {
+          x: (shape.left + shape.getScaledWidth() - 2) / scaleX,
+          y: shape.top / scaleY
+        }];
+        break;
+      case drawType.polygon:
+        item.points = Object.values(shape.points).map(function (p) {
+          return {
+            x: p.x / scaleX,
+            y: p.y / scaleY
+          };
+        });
+        break;
+      case drawType.circle:
+        // points from top & left
+        // item.points = [{ x: (shape.left + shape.radius) / scaleX, y: (shape.top + shape.radius) / scaleY }]
+
+        // points from center & center
+        item.points = [{
+          x: shape.left / scaleX,
+          y: shape.top / scaleY
+        }];
+        item.radius = shape.radius / scaleX;
+        item.scaleX = shape.scaleX;
+        item.scaleY = shape.scaleY;
+        // console.log('get circle radius: ' + item.radius + ' & scale : ' + scaleX)
+        break;
+      case drawType.triangle:
+        // item.points = Object.values(shape.aCoords)
+        item.points = [{
+          x: shape.left / scaleX,
+          y: (shape.top + shape.getScaledHeight() - 2) / scaleY
+        }, {
+          x: (shape.left + shape.getScaledWidth() - 2) / scaleX,
+          y: (shape.top + shape.getScaledHeight() - 2) / scaleY
+        }, {
+          x: shape.left / scaleX,
+          y: shape.top / scaleY
+        }, {
+          x: (shape.left + shape.getScaledWidth() - 2) / scaleX,
+          y: shape.top / scaleY
+        }];
+        break;
+      case drawType.line:
+        item.points = [{
+          x: shape.x1 / scaleX,
+          y: shape.y1 / scaleY
+        }, {
+          x: shape.x2 / scaleX,
+          y: shape.y2 / scaleY
+        }];
+        item.scaleX = shape.scaleX;
+        item.scaleY = shape.scaleY;
+        break;
+      case drawType.point:
+        console.log('shape', shape);
+
+        // points from top & left
+        // item.points = [{ x: (shape.left + shape.radius) / scaleX, y: (shape.top + shape.radius) / scaleY }]
+
+        // points from center & center
+        item.points = [{
+          x: shape.left / scaleX,
+          y: shape.top / scaleY
+        }];
+        item.radius = shape.radius / scaleX;
+        item.scaleX = shape.scaleX ? shape.scaleX : 1;
+        item.scaleY = shape.scaleY ? shape.scaleY : 1;
+        break;
+      case drawType.free:
+        item.points = external__lodash_clonedeep__default()(Object.values(shape.path));
+        console.log(item.points);
+        item.points.forEach(function (e) {
+          if (e[0] === 'M') {
+            e[1] /= scaleX;
+            e[2] /= scaleY;
+          } else if (e[0] === 'Q') {
+            e[1] /= scaleX;
+            e[2] /= scaleY;
+            e[3] /= scaleX;
+            e[4] /= scaleY;
+          } else {
+            // e[0] === 'L'
+            e[1] /= scaleX;
+            e[2] /= scaleY;
+          }
+        });
+        item.scaleX = shape.scaleX;
+        item.scaleY = shape.scaleY;
+        break;
+      case drawType.textbox:
+        if (shape.text != null && shape.text.trim() !== '') {
+          item.text = shape.text;
+          item.points = [{
+            x: shape.left / scaleX,
+            y: (shape.top + shape.getScaledHeight() - 2) / scaleY
+          }, {
+            x: (shape.left + shape.getScaledWidth() - 2) / scaleX,
+            y: (shape.top + shape.getScaledHeight() - 2) / scaleY
+          }, {
+            x: shape.left / scaleX,
+            y: shape.top / scaleY
+          }, {
+            x: (shape.left + shape.getScaledWidth() - 2) / scaleX,
+            y: shape.top / scaleY
+          }];
+          item.scaleX = shape.scaleX;
+          item.scaleY = shape.scaleY;
+          item.fontSize = shape.fontSize;
+        } else {
+          item = null;
+        }
+        break;
+      default:
+        item = null;
+        break;
+    }
+
+    // console.log(item.points)
+    // console.log('-----')
+    // console.log(shape.aCoords)
+    // item.points.forEach(point => {
+    //   point.x /= imageInfo.scaleX
+    //   point.y /= imageInfo.scaleY
+    // })
+
+    if (item) {
+      if (id) {
+        if (shape.id === id) {
+          data.push(item);
+        }
+      } else if (label) {
+        if (shape.label === label) {
+          data.push(item);
+        }
+      } else {
+        data.push(item);
+      }
+    }
+  });
+  if (id) {
+    if (data.length > 0) {
+      return data[0];
+    } else {
+      return null;
+    }
+  } else {
+    return data;
+  }
+};
+
+/**
+ * 根据图形信息设置标注图形
+ *
+ * @author pangyafei
+ * @date 2021-01-19
+ * @param {any} _this
+ * @param {any} data
+ * @param {any} append 是否追加
+ * @returns {any}
+ */
+var data_setData = function setData(_this, data, append) {
+  // 先清空图形
+  if (append) {
+    // do nothing
+  } else {
+    draw_clearDraw(_this);
+  }
+  if (data == null) {
+    return;
+  }
+  if (!(data instanceof Array)) {
+    data = [data];
+  }
+  // 再渲染图形
+  var imageInfo = data_getImageInfo(_this);
+  if (imageInfo == null) {
+    throw Error(setDataErrorMsg);
+  }
+  var scaleX = imageInfo.scaleX;
+  var scaleY = imageInfo.scaleY;
+  data.forEach(function (item) {
+    switch (item.type) {
+      case drawType.rectangle:
+        data_addRectangle(_this, item, scaleX, scaleY);
+        break;
+      case drawType.polygon:
+        data_addPolygon(_this, item, scaleX, scaleY);
+        break;
+      case drawType.circle:
+        data_addCircle(_this, item, scaleX, scaleY);
+        break;
+      case drawType.triangle:
+        data_addTriangle(_this, item, scaleX, scaleY);
+        break;
+      case drawType.line:
+        data_addLine(_this, item, scaleX, scaleY);
+        break;
+      case drawType.point:
+        data_addPoint(_this, item, scaleX, scaleY);
+        break;
+      case drawType.free:
+        data_addPath(_this, item, scaleX, scaleY);
+        break;
+      case drawType.textbox:
+        data_addTextbox(_this, item, scaleX, scaleY);
+        break;
+      default:
+        break;
+    }
+  });
+};
+
+/**
+ * 向画布中添加一个矩形
+ *
+ * @author pangyafei
+ * @date 2021-01-19
+ * @param {any} _this
+ * @param {any} data
+ * @param {any} scaleX
+ * @param {any} scaleY
+ * @returns {any}
+ */
+var data_addRectangle = function addRectangle(_this, data, scaleX, scaleY) {
+  // console.log(data)
+  var maxX = Math.max.apply(Math, _toConsumableArray(data.points.map(function (p) {
+    return p.x;
+  }))) * scaleX;
+  var minX = Math.min.apply(Math, _toConsumableArray(data.points.map(function (p) {
+    return p.x;
+  }))) * scaleX;
+  var maxY = Math.max.apply(Math, _toConsumableArray(data.points.map(function (p) {
+    return p.y;
+  }))) * scaleY;
+  var minY = Math.min.apply(Math, _toConsumableArray(data.points.map(function (p) {
+    return p.y;
+  }))) * scaleY;
+
+  // console.log(maxX + ';' + minX + ';' + maxY + ';' + minY)
+  // const rectangle = new fabric.Rect(Object.assign(getBaseShapeInfo(data, _this), {
+  var rectangle = new LabeledRectangle(Object.assign(getBaseShapeInfo(data, _this), {
+    top: minY,
+    left: minX,
+    width: maxX - minX,
+    height: maxY - minY
+  }));
+  rectangle.setControlVisible('mtr', false);
+  if (_this.showDeleteIcon) {
+    // 添加删除图标
+    rectangle.controls.deleteControl = init_getDeleteControl(_this);
+  }
+  if (_this.showLabel && rectangle.label && rectangle.label !== '') {
+    // 添加标签
+    // rectangle.controls.labelControl = getLabelControl(rectangle.label)
+  }
+  _this.canvas.add(rectangle);
+};
+
+/**
+ * 向画布中添加一个矩形
+ *
+ * @author pangyafei
+ * @date 2021-01-19
+ * @param {any} _this
+ * @param {any} data
+ * @param {any} scaleX
+ * @param {any} scaleY
+ * @returns {any}
+ */
+var data_addPolygon = function addPolygon(_this, data, scaleX, scaleY) {
+  var points = data.points.map(function (item) {
+    return {
+      x: item.x * scaleX,
+      y: item.y * scaleY
+    };
+  });
+  // const polygon = new fabric.Polygon(points, getBaseShapeInfo(data, _this))
+  var polygon = new LabeledPolygon(points, Object.assign(getBaseShapeInfo(data, _this), {
+    lockMovementX: true,
+    lockMovementY: true,
+    hoverCursor: 'default'
+  }));
+  _this.canvas.add(polygon);
+  // 添加多边形控制点
+  addPolygonControl(polygon);
+  if (_this.showDeleteIcon) {
+    // 添加删除图标
+    polygon.controls.deleteControl = init_getDeleteControl(_this);
+  }
+  if (_this.showLabel && polygon.label && polygon.label !== '') {
+    // 添加标签
+    // polygon.controls.labelControl = getLabelControl(polygon.label)
+  }
+};
+
+/**
+ * 向画布中添加一个圆形
+ *
+ * @author pangyafei
+ * @date 2021-02-02
+ * @param {any} _this
+ * @param {any} data
+ * @param {any} scaleX
+ * @param {any} scaleY
+ * @returns {any}
+ */
+var data_addCircle = function addCircle(_this, data, scaleX, scaleY) {
+  // const minX = Math.min(...data.points.map(p => p.x))
+  // const minY = Math.min(...data.points.map(p => p.y))
+
+  var circle = new external__fabric_["fabric"].Circle(Object.assign(getBaseShapeInfo(data, _this), {
+    left: data.points[0].x * scaleX,
+    top: data.points[0].y * scaleY,
+    scaleX: data.scaleX,
+    scaleY: data.scaleY,
+    radius: data.radius * scaleX,
+    strokeWidth: data.lineWidth,
+    description: data.description,
+    hoverCursor: 'default',
+    transparentCorners: false,
+    objectCaching: false,
+    originX: 'center',
+    originY: 'center',
+    centeredScaling: true,
+    type: drawType.circle
+  }));
+  // circle.radius = data.radius
+  circle.setControlVisible('mtr', false);
+  if (_this.showDeleteIcon) {
+    // 添加删除图标
+    circle.controls.deleteControl = init_getDeleteControl(_this);
+  }
+  if (_this.showLabel && circle.label && circle.label !== '') {
+    // 添加标签
+    // circle.controls.labelControl = getLabelControl(circle.label)
+  }
+  _this.canvas.add(circle);
+};
+
+/**
+ * 向画布中添加一个三角形
+ *
+ * @author pangyafei
+ * @date 2021-02-05
+ * @param {any} _this
+ * @param {any} data
+ * @param {any} scaleX
+ * @param {any} scaleY
+ * @returns {any}
+ */
+var data_addTriangle = function addTriangle(_this, data, scaleX, scaleY) {
+  var maxX = Math.max.apply(Math, _toConsumableArray(data.points.map(function (p) {
+    return p.x;
+  }))) * scaleX;
+  var minX = Math.min.apply(Math, _toConsumableArray(data.points.map(function (p) {
+    return p.x;
+  }))) * scaleX;
+  var maxY = Math.max.apply(Math, _toConsumableArray(data.points.map(function (p) {
+    return p.y;
+  }))) * scaleY;
+  var minY = Math.min.apply(Math, _toConsumableArray(data.points.map(function (p) {
+    return p.y;
+  }))) * scaleY;
+  var triangle = new external__fabric_["fabric"].Triangle(Object.assign(getBaseShapeInfo(data, _this), {
+    top: minY,
+    left: minX,
+    width: maxX - minX,
+    height: maxY - minY
+  }));
+  triangle.setControlVisible('mtr', false);
+  if (_this.showDeleteIcon) {
+    // 添加删除图标
+    triangle.controls.deleteControl = init_getDeleteControl(_this);
+  }
+  if (_this.showLabel && triangle.label && triangle.label !== '') {
+    // 添加标签
+    // triangle.controls.labelControl = getLabelControl(triangle.label)
+  }
+  _this.canvas.add(triangle);
+};
+
+/**
+ * 向画布中添加线
+ *
+ * @author pangyafei
+ * @date 2021-02-03
+ * @param {any} _this
+ * @param {any} data
+ * @param {any} scaleX
+ * @param {any} scaleY
+ * @returns {any}
+ */
+var data_addLine = function addLine(_this, data, scaleX, scaleY) {
+  var line = new external__fabric_["fabric"].Line([data.points[0].x * scaleX, data.points[0].y * scaleY, data.points[1].x * scaleX, data.points[1].y * scaleY], Object.assign(getBaseShapeInfo(data, _this), {
+    scaleX: data.scaleX,
+    scaleY: data.scaleY
+  }));
+  line.setControlVisible('mtr', false);
+  if (_this.showDeleteIcon) {
+    // 添加删除图标
+    line.controls.deleteControl = init_getDeleteControl(_this);
+  }
+  if (_this.showLabel && line.label && line.label !== '') {
+    // 添加标签
+    // line.controls.labelControl = getLabelControl(line.label)
+  }
+  _this.canvas.add(line);
+};
+
+/**
+ * 向画布中添加点
+ *
+ * @author pangyafei
+ * @date 2021-02-05
+ * @param {any} _this
+ * @param {any} data
+ * @param {any} scaleX
+ * @param {any} scaleY
+ * @returns {any}
+ */
+var data_addPoint = function addPoint(_this, data, scaleX, scaleY) {
+  var point = new LabeledPoint(Object.assign({
+    left: data.points[0].x * scaleX,
+    top: data.points[0].y * scaleY,
+    radius: data.radius * scaleX,
+    scaleX: data.scaleX,
+    scaleY: data.scaleY,
+    stroke: data.pointLineColor ? data.pointLineColor : _this.pointLineColor,
+    fill: data.pointFillColor ? data.pointFillColor : _this.pointFillColor,
+    strokeWidth: data.pointLineWidth ? data.pointLineWidth : _this.pointLineWidth,
+    crosshair: data.pointCrosshair ? data.pointCrosshair : _this.pointCrosshair,
+    crosshairColor: data.pointCrosshairColor ? data.pointCrosshairColor : _this.pointCrosshairColor,
+    crosshairWidth: data.pointCrosshairWidth ? data.pointCrosshairWidth : _this.pointCrosshairWidth,
+    description: data.description,
+    label: data.label,
+    hoverCursor: 'default',
+    transparentCorners: false,
+    visible: data.visible !== false,
+    selectable: data.selectable !== false,
+    originX: 'center',
+    originY: 'center',
+    centeredScaling: true,
+    type: drawType.point,
+    id: data.id
+  }, {}));
+
+  // const point = new fabric.Circle({
+  // left: (data.points[0].x - data.radius) * scaleX,
+  // top: (data.points[0].y - data.radius) * scaleY,
+  // radius: data.radius * scaleX,
+  // stroke: data.lineColor ? data.lineColor : _this.lineColor,
+  // fill: data.lineColor ? data.lineColor : _this.lineColor,
+  // strokeWidth: 0,
+  // hoverCursor: 'default',
+  // transparentCorners: false,
+  // type: drawType.point,
+  // id: data.id
+  // })
+
+  if (_this.showDeleteIcon) {
+    // 添加删除按钮
+    point.controls.deleteControl = init_getDeleteControl(_this);
+  }
+  if (_this.showLabel && point.label && point.label !== '') {
+    // 添加标签
+    // point.controls.labelControl = getLabelControl(point.label)
+  }
+  point.setControlsVisibility({
+    bl: false,
+    br: false,
+    mb: false,
+    ml: false,
+    mr: false,
+    mt: false,
+    tl: false,
+    tr: false,
+    mtr: false
+  });
+  _this.canvas.add(point);
+};
+
+/**
+ * 添加自由绘制线
+ *
+ * @author pangyafei
+ * @date 2021-02-04
+ * @param {any} _this
+ * @param {any} data
+ * @param {any} scaleX
+ * @param {any} scaleY
+ * @returns {any}
+ */
+var data_addPath = function addPath(_this, data, scaleX, scaleY) {
+  data.points.forEach(function (e) {
+    if (e[0] === 'M') {
+      e[1] *= scaleX;
+      e[2] *= scaleY;
+    } else if (e[0] === 'Q') {
+      e[1] *= scaleX;
+      e[2] *= scaleY;
+      e[3] *= scaleX;
+      e[4] *= scaleY;
+    } else {
+      // e[0] === 'L'
+      e[1] *= scaleX;
+      e[2] *= scaleY;
+    }
+  });
+  var path = new external__fabric_["fabric"].Path(data.points, Object.assign(getBaseShapeInfo(data, _this), {
+    scaleX: data.scaleX,
+    scaleY: data.scaleY
+  }));
+  path.setControlVisible('mtr', false);
+  if (_this.showDeleteIcon) {
+    // 添加删除图标
+    path.controls.deleteControl = init_getDeleteControl(_this);
+  }
+  if (_this.showLabel && path.label && path.label !== '') {
+    // 添加标签
+    // path.controls.labelControl = getLabelControl(path.label)
+  }
+  _this.canvas.add(path);
+};
+
+/**
+ * 向画布中添加文字
+ *
+ * @author pangyafei
+ * @date 2021-02-02
+ * @param {any} _this
+ * @param {any} data
+ * @param {any} scaleX
+ * @param {any} scaleY
+ * @returns {any}
+ */
+var data_addTextbox = function addTextbox(_this, data, scaleX, scaleY) {
+  // const maxX = Math.max(...data.points.map(p => p.x)) * scaleX
+  var minX = Math.min.apply(Math, _toConsumableArray(data.points.map(function (p) {
+    return p.x;
+  }))) * scaleY;
+  // const maxY = Math.max(...data.points.map(p => p.y)) * scaleX
+  var minY = Math.min.apply(Math, _toConsumableArray(data.points.map(function (p) {
+    return p.y;
+  }))) * scaleY;
+  var textbox = new external__fabric_["fabric"].Textbox('', Object.assign(getBaseShapeInfo(data, _this), {
+    top: minY,
+    left: minX,
+    scaleX: data.scaleX,
+    scaleY: data.scaleY,
+    // width: maxX - minX,
+    // height: maxY - minY,
+    text: data.text,
+    fontSize: data.fontSize,
+    editable: false
+  }));
+  textbox.setControlVisible('mtr', false);
+  if (_this.showDeleteIcon) {
+    // 添加删除图标
+    textbox.controls.deleteControl = init_getDeleteControl(_this);
+  }
+  if (_this.showLabel && textbox.label && textbox.label !== '') {
+    // 添加标签
+    // textbox.controls.labelControl = getLabelControl(textbox.label)
+  }
+  _this.canvas.add(textbox);
+};
+
+/**
+ * 构造渲染图形的基础配置信息
+ *
+ * @author pangyafei
+ * @date 2021-01-19
+ * @param {any} data
+ * @returns {any}
+ */
+var getBaseShapeInfo = function getBaseShapeInfo(data, _this) {
+  return {
+    id: data.id,
+    label: data.label,
+    description: data.description,
+    type: data.type,
+    objectCaching: false,
+    fill: data.fillColor ? data.fillColor : _this.fillColor,
+    stroke: data.lineColor ? data.lineColor : _this.lineColor,
+    strokeWidth: data.lineWidth ? data.lineWidth : _this.lineWidth,
+    hoverCursor: 'default',
+    transparentCorners: false,
+    strokeWidthUnscaled: data.lineWidth,
+    top: data.top,
+    left: data.left,
+    labelFillColor: data.labelFillColor
+  };
+};
+
+/**
+ * 获取canvas加载的图片信息
+ *
+ * @author pangyafei
+ * @date 2021-03-08
+ * @param {any} _this
+ * @returns {any}
+ */
+var data_getImageInfo = function getImageInfo(_this) {
+  if (_this.canvas && _this.canvas.backgroundImage) {
+    var image = _this.canvas.backgroundImage;
+    var info = {
+      width: image.width,
+      height: image.height,
+      scaleX: image.scaleX,
+      scaleY: image.scaleY
+    };
+    return info;
+  } else {
+    return null;
+  }
+};
+/**
+ * @description:根据id删除图形
+ * @author: miaochan
+ * @date: 2023-05-31 11:36:43
+ * @param:
+ * @return:
+*/
+var data_deleteShapeById = function deleteShapeById(_this, id) {
+  var shapes = _this.canvas.getObjects();
+  var shape = shapes.find(function (s) {
+    return s.id === id;
+  });
+  if (shape) {
+    _this.canvas.remove(shape);
+  }
+};
+// CONCATENATED MODULE: ./src/components/labeler/function/load.js
+
+// eslint-disable-next-line no-unused-vars
+
+// eslint-disable-next-line no-unused-vars
+
+
+/**
+ * 加载图片
+ *
+ * @author pangyafei
+ * @date 2021-01-18
+ * @param {any} _this
+ * @param {any} src
+ * @returns {any}
+ */
+var load_load = function load(_this, src) {
+  _this.image = new Image();
+  _this.image.src = src;
+  _this.image.setAttribute('crossOrigin', 'Anonymous'); // 解决图片跨域问题
+  console.log(src);
+  // const zoomPoint = new fabric.Point(0, 0)
+  if (_this.canvas != null) {
+    console.log('reload image');
+    // _this.canvas.zoomToPoint(zoomPoint, 1)
+    _this.image.onload = function () {
+      _this.canvas.clear();
+      // _this.canvas == null
+      // _this.canvas.setZoom(1)
+      var vpt = _this.canvas.viewportTransform;
+      vpt[0] = 1;
+      vpt[3] = 1;
+      vpt[5] = 0;
+      _this.canvas.setViewportTransform(vpt);
+      resetMouseMove(_this);
+      // initFabric(_this)
+      _this.historyObjects = [];
+      init_initBackgroundImage(_this);
+      load_centerBackgroundImage(_this);
+    };
+  } else {
+    console.log('init image');
+    _this.image.onload = function () {
+      init_initFabric(_this);
+      // _this.canvas.zoomToPoint(zoomPoint, 1)
+      load_centerBackgroundImage(_this);
+      console.log('zoom', _this.canvas.viewportTransform);
+      // _this.canvas.setZoom(1)
+    };
+  }
+};
+
+/**
+ * 如果是高比大于宽比的图片，做居中处理
+ *
+ * @author pangyafei
+ * @date 2021-03-09
+ * @param {any} _this
+ * @returns {any}
+ */
+var load_centerBackgroundImage = function centerBackgroundImage(_this) {
+  var imageInfo = data_getImageInfo(_this);
+  var imageCurrentWidth = imageInfo.width * imageInfo.scaleX;
+  var imageCurrentHeight = imageInfo.height * imageInfo.scaleY;
+  var canvasWidth = _this.canvas.width;
+  var canvasHeight = _this.canvas.height;
+  // console.log('-----')
+  // console.log(imageCurrentWidth / canvasWidth)
+  // console.log(imageCurrentHeight / canvasHeight)
+  // console.log(_this.canvas.viewportTransform)
+
+  if (imageCurrentWidth / canvasWidth < imageCurrentHeight / canvasHeight) {
+    var vpt = _this.canvas.viewportTransform;
+    vpt[4] = (canvasWidth - imageCurrentWidth) / 2.0;
+    vpt[5] = 0;
+    _this.canvas.setViewportTransform(vpt);
+  } else {
+    var _vpt = _this.canvas.viewportTransform;
+    _vpt[4] = 0;
+    _vpt[5] = (canvasHeight - imageCurrentHeight) / 2.0;
+    _this.canvas.setViewportTransform(_vpt);
+  }
+};
+// EXTERNAL MODULE: external "shortid"
+var external__shortid_ = __webpack_require__(13);
+var external__shortid__default = /*#__PURE__*/__webpack_require__.n(external__shortid_);
+
+// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/labeler/imageLabeler.vue
+
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+// canvas初始化
+
+// canvas绘制交互
+
+// canvas数据交互
+
+// canvas交互模式
+
+
+/* harmony default export */ var imageLabeler = ({
+  name: 'SgLabeler',
+  props: {
+    // 图片资源路径
+    src: {
+      type: String,
+      default: null
+    },
+    // 交互模式('edit' -> 编辑模式, 'view' -> 浏览模式)
+    mode: {
+      type: String,
+      default: modeType.edit
+    },
+    // 画布宽
+    width: {
+      type: Number,
+      default: null
+    },
+    // 画布高
+    height: {
+      type: Number,
+      default: null
+    },
+    // 标注线颜色
+    lineColor: {
+      type: String,
+      default: '#3e3e3e'
+    },
+    // 标注线宽
+    lineWidth: {
+      type: Number,
+      default: 2
+    },
+    // 标注填充色
+    fillColor: {
+      type: String,
+      default: '#cccccc66'
+    },
+    // 文字颜色
+    fontColor: {
+      type: String,
+      default: '#333'
+    },
+    // 文字大小
+    fontSize: {
+      type: Number,
+      default: 40
+    },
+    // 点半径
+    pointRadius: {
+      type: Number,
+      default: 10
+    },
+    // 点是否随画布缩放
+    pointZoom: {
+      type: Boolean,
+      default: true
+    },
+    // 点的边线宽度
+    pointLineWidth: {
+      type: Number,
+      default: 2
+    },
+    // 点的边线颜色
+    pointLineColor: {
+      type: String,
+      default: '#3e3e3e'
+    },
+    // 点的填充颜色
+    pointFillColor: {
+      type: String,
+      default: '#333'
+    },
+    // 点是否开启准心线
+    pointCrosshair: {
+      type: Boolean,
+      default: false
+    },
+    // 点准心线颜色
+    pointCrosshairColor: {
+      type: String,
+      default: '#333'
+    },
+    // 点准心线宽度
+    pointCrosshairWidth: {
+      type: Number,
+      default: 1
+    },
+    // 是否显示图形删除按钮
+    showDeleteIcon: {
+      type: Boolean,
+      default: true
+    },
+    // 是否显示标签控件
+    showLabel: {
+      type: Boolean,
+      default: true
+    },
+    // 标注标签名称
+    label: {
+      type: String,
+      default: null
+    },
+    // 标注描述
+    description: {
+      type: String,
+      default: null
+    },
+    // 组件背景色
+    bgColor: {
+      type: String,
+      default: '#f5f5f5'
+    },
+    // 是否显示绘制辅助线
+    showHelpLines: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data: function data() {
+    return {
+      id: 'canvas' + external__shortid__default.a.generate(),
+      // 图片
+      image: null,
+      // 背景图片dom
+      // 画布
+      canvas: null,
+      // fabric canvas
+      // 图形参数
+      drawingObject: null,
+      // 正在绘制的图形
+      drawingPoints: null,
+      // 正在绘制的多边形点集
+      virtualObject: null,
+      // 正在绘制的多边形辅助线
+      textObject: null,
+      // 正在添加的文字
+      mouseFrom: {},
+      mouseTo: {},
+      // 交互参数
+      currentDrawType: null,
+      // 当前正在绘制的图形类型
+      isDrawing: false,
+      // 当前是否开始绘制（startDraw -> true, stopDraw -> false）
+      atDrawing: false,
+      // 当前是否正在绘制（部分图形绘制需要按下鼠标拖动绘制，该参数记录鼠标已处于按下拖动绘制状态）
+      atDragging: false,
+      // 当前是否正在拖动画布
+      historyObjects: [],
+      // 被撤销的图形集合
+      helpLines: null // 辅助线
+    };
+  },
+  watch: {
+    // 监听组件交互模式变化
+    mode: {
+      handler: function handler(val) {
+        if (this.canvas != null) {
+          if (val === modeType.edit) {
+            this.canvas.skipTargetFind = false;
+          } else {
+            this.canvas.skipTargetFind = true;
+          }
+        }
+      }
+    },
+    // 监听组件图片资源变化
+    src: {
+      handler: function handler(val) {
+        load_load(this, val);
+      }
+    }
+  },
+  /**
+   * 标注组件初始化
+   *
+   * @author pangyafei
+   * @date 2021-01-18
+   * @returns {any}
+   */
+  mounted: function mounted() {
+    if (this.src != null) {
+      load_load(this, this.src);
+    } else {
+      load_load(this, __webpack_require__(14));
+    }
+  },
+  methods: {
+    // ------------------------方法--------------------------
+    // 开启绘制
+    startDraw: function startDraw(type) {
+      this.mode === modeType.edit ? draw_startDraw(this, type) : draw_notEditable();
+    },
+    // 停止绘制
+    stopDraw: function stopDraw() {
+      this.mode === modeType.edit ? draw_stopDraw(this) : draw_notEditable();
+    },
+    // 清空画布
+    clearDraw: function clearDraw(id) {
+      draw_clearDraw(this, id);
+    },
+    // 清除标注(根据id)
+    clearDrawById: function clearDrawById(id) {
+      this.mode === modeType.edit ? this.clearDraw(id) : draw_notEditable();
+    },
+    // 撤销
+    undo: function undo() {
+      this.mode === modeType.edit ? draw_undo(this) : draw_notEditable();
+    },
+    // 回退
+    redo: function redo() {
+      this.mode === modeType.edit ? draw_redo(this) : draw_notEditable();
+    },
+    // 获取数据(根据id获取)
+    getData: function getData(id) {
+      return data_getData(this, id);
+    },
+    // 获取数据(根据标签名称)
+    getDataByLabel: function getDataByLabel(label) {
+      return data_getData(this, null, label);
+    },
+    // 获取所有数据
+    getAllData: function getAllData() {
+      return data_getData(this);
+    },
+    // 设置数据
+    setData: function setData(data) {
+      data_setData(this, data);
+    },
+    // 添加数据
+    addData: function addData(data) {
+      data_setData(this, data, true);
+    },
+    // 获取图片信息
+    getImageInfo: function getImageInfo() {
+      return data_getImageInfo(this);
+    },
+    // 根据id删除形状
+    deleteShapeById: function deleteShapeById(id) {
+      data_deleteShapeById(this, id);
+    },
+    // 根据id设置形状的显隐状态
+    setVisible: function setVisible(id, flag) {
+      draw_setVisible(this, id, flag);
+    },
+    // 根据id设置形状的可选择状态
+    setSelectable: function setSelectable(id, flag) {
+      draw_setSelectable(this, id, flag);
+    },
+    // ------------------------回调--------------------------
+    // 图片加载成功回调
+    fireImageLoad: function fireImageLoad(info) {
+      this.mode === this.$emit('onImageLoad', info);
+    },
+    // 绘制成功回调
+    fireShapeDraw: function fireShapeDraw(shape) {
+      this.$emit('onShapeDraw', shape);
+    },
+    // 图形删除回调
+    fireShapeDelete: function fireShapeDelete(shape) {
+      this.$emit('onShapeDelete', shape);
+    },
+    // 图形选择回调
+    fireShapeSelect: function fireShapeSelect(shape) {
+      this.$emit('onShapeSelect', shape);
+    },
+    // 图像移动完成回调
+    fireShapeDrag: function fireShapeDrag(shape) {
+      this.$emit('onShapeDrag', shape);
+    },
+    // 鼠标滚动回调，返回图片信息
+    fireMouseWheel: function fireMouseWheel(info) {
+      this.$emit('onMouseWheel', info);
+    },
+    // 背景图拖动回调事件
+    fireBgImageDrag: function fireBgImageDrag(delta) {
+      this.$emit('onBgImageDrag', delta);
+    }
+  }
+});
+// CONCATENATED MODULE: ./node_modules/babel-loader/lib?sourceMap!./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-d3420bfc","hasScoped":true,"optionsId":"0","buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/labeler/imageLabeler.vue
+var imageLabeler_render = function render() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('div', {
+    ref: "container",
+    staticClass: "container",
+    style: {
+      'background-color': _vm.bgColor
+    }
+  }, [_c('canvas', {
+    ref: "canvas",
+    staticClass: "canvas",
+    attrs: {
+      "id": _vm.id
+    }
+  })]);
+};
+var staticRenderFns = [];
+
+// CONCATENATED MODULE: ./node_modules/vue-loader/lib/runtime/component-normalizer.js
+/* globals __VUE_SSR_CONTEXT__ */
+
+// IMPORTANT: Do NOT use ES2015 features in this file (except for modules).
+// This module is a runtime utility for cleaner component module output and will
+// be included in the final webpack user bundle.
+
+function normalizeComponent (
+  scriptExports,
+  render,
+  staticRenderFns,
+  functionalTemplate,
+  injectStyles,
+  scopeId,
+  moduleIdentifier, /* server only */
+  shadowMode /* vue-cli only */
+) {
+  scriptExports = scriptExports || {}
+
+  // ES6 modules interop
+  var type = typeof scriptExports.default
+  if (type === 'object' || type === 'function') {
+    scriptExports = scriptExports.default
+  }
+
+  // Vue.extend constructor export interop
+  var options = typeof scriptExports === 'function'
+    ? scriptExports.options
+    : scriptExports
+
+  // render functions
+  if (render) {
+    options.render = render
+    options.staticRenderFns = staticRenderFns
+    options._compiled = true
+  }
+
+  // functional template
+  if (functionalTemplate) {
+    options.functional = true
+  }
+
+  // scopedId
+  if (scopeId) {
+    options._scopeId = scopeId
+  }
+
+  var hook
+  if (moduleIdentifier) { // server build
+    hook = function (context) {
+      // 2.3 injection
+      context =
+        context || // cached call
+        (this.$vnode && this.$vnode.ssrContext) || // stateful
+        (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
+      // 2.2 with runInNewContext: true
+      if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
+        context = __VUE_SSR_CONTEXT__
+      }
+      // inject component styles
+      if (injectStyles) {
+        injectStyles.call(this, context)
+      }
+      // register component module identifier for async chunk inferrence
+      if (context && context._registeredComponents) {
+        context._registeredComponents.add(moduleIdentifier)
+      }
+    }
+    // used by ssr in case component is cached and beforeCreate
+    // never gets called
+    options._ssrRegister = hook
+  } else if (injectStyles) {
+    hook = shadowMode
+      ? function () { injectStyles.call(this, this.$root.$options.shadowRoot) }
+      : injectStyles
+  }
+
+  if (hook) {
+    if (options.functional) {
+      // for template-only hot-reload because in that case the render fn doesn't
+      // go through the normalizer
+      options._injectStyles = hook
+      // register for functioal component in vue file
+      var originalRender = options.render
+      options.render = function renderWithStyleInjection (h, context) {
+        hook.call(context)
+        return originalRender(h, context)
+      }
+    } else {
+      // inject component registration as beforeCreate hook
+      var existing = options.beforeCreate
+      options.beforeCreate = existing
+        ? [].concat(existing, hook)
+        : [hook]
+    }
+  }
+
+  return {
+    exports: scriptExports,
+    options: options
+  }
+}
+
+// CONCATENATED MODULE: ./src/components/labeler/imageLabeler.vue
+function injectStyle (context) {
+  __webpack_require__(5)
+}
+/* script */
+
+
+/* template */
+
+/* template functional */
+var __vue_template_functional__ = false
+/* styles */
+var __vue_styles__ = injectStyle
+/* scopeId */
+var __vue_scopeId__ = "data-v-d3420bfc"
+/* moduleIdentifier (server only) */
+var __vue_module_identifier__ = null
+
+var Component = normalizeComponent(
+  imageLabeler,
+  imageLabeler_render,
+  staticRenderFns,
+  __vue_template_functional__,
+  __vue_styles__,
+  __vue_scopeId__,
+  __vue_module_identifier__
+)
+
+/* harmony default export */ var labeler_imageLabeler = (Component.exports);
+
+// CONCATENATED MODULE: ./src/components/labeler/index.js
+
+/* harmony default export */ var labeler = __webpack_exports__["default"] = (labeler_imageLabeler);
+
+/***/ }),
+/* 5 */
+/***/ (function(module, exports) {
+
+// removed by extract-text-webpack-plugin
+
+/***/ }),
+/* 6 */
+/***/ (function(module, exports) {
+
+module.exports = require("core-js/modules/es6.number.constructor");
+
+/***/ }),
+/* 7 */
+/***/ (function(module, exports) {
+
+module.exports = require("core-js/modules/es6.array.find");
+
+/***/ }),
+/* 8 */
+/***/ (function(module, exports) {
+
+module.exports = require("lodash.clonedeep");
+
+/***/ }),
+/* 9 */
+/***/ (function(module, exports) {
+
+module.exports = require("core-js/modules/es6.math.sign");
+
+/***/ }),
+/* 10 */
+/***/ (function(module, exports) {
+
+module.exports = require("core-js/modules/es7.array.includes");
+
+/***/ }),
+/* 11 */
+/***/ (function(module, exports) {
+
+module.exports = require("core-js/modules/es6.string.includes");
+
+/***/ }),
+/* 12 */
+/***/ (function(module, exports) {
+
+module.exports = require("core-js/modules/es6.regexp.to-string");
+
+/***/ }),
+/* 13 */
+/***/ (function(module, exports) {
+
+module.exports = require("shortid");
+
+/***/ }),
+/* 14 */
+/***/ (function(module, exports, __webpack_require__) {
+
+module.exports = __webpack_require__.p + "24fb23bb518c44e106570789bdf4a9c0.png";
+
+/***/ })
+/******/ ]);