🚀 feat: 修改canvas

qiudaoermu · Oct 21, 2022 · 7000093 · 7000093
1 parent 2ac401c
commit 7000093
Show file tree

Hide file tree

Showing 9 changed files with 17 additions and 17 deletions.
diff --git a/lib/drawboard.common.js b/lib/drawboard.common.js
@@ -24662,7 +24662,7 @@ var lib_select_default = /*#__PURE__*/__webpack_require__.n(lib_select);
 var external_commonjs_vue_commonjs2_vue_root_Vue_ = __webpack_require__("8bbf");
 var external_commonjs_vue_commonjs2_vue_root_Vue_default = /*#__PURE__*/__webpack_require__.n(external_commonjs_vue_commonjs2_vue_root_Vue_);
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"09cc008c-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/DrawBoard/main.vue?vue&type=template&id=4e9d3793&scoped=true&
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"22feb993-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/DrawBoard/main.vue?vue&type=template&id=4e9d3793&scoped=true&
 var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"container",style:({ height: this.height + 'px', width: this.width + 'px' })},[_c('div',{ref:"drawboard",staticClass:"drawboard"},[_c('div',{staticClass:"center"},[_c('div',{staticClass:"wrapper"},[(_vm.sidbarShow)?_c('div',{staticClass:"tools"},[_c('tool',{attrs:{"path_strokeStyle":_vm.path_strokeStyle,"selected":_vm.selected},on:{"toolSelected":_vm.toolSelected,"topBarEvent":_vm.topBarEvent,"configChange":_vm.configChange,"contrastChange":_vm.contrastChange,"brightnessChange":_vm.brightnessChange}})],1):_vm._e(),_c('div',{directives:[{name:"loading",rawName:"v-loading",value:(_vm.loading),expression:"loading"}],ref:"view",staticClass:"view",attrs:{"element-loading-text":"加载中...","element-loading-spinner":"el-icon-loading","element-loading-background":"rgba(0, 0, 0, 0.8)"}},[_c('canvas',{ref:"image",staticClass:"canvas",attrs:{"id":"image"}},[_vm._v("The browser does not support canvas")]),_c('canvas',{ref:"canvas",staticClass:"canvas",attrs:{"id":"canvas"},on:{"mousedown":_vm.canvasMousedown}},[_vm._v("The browser does not support canvas")])])])])])])}
 var staticRenderFns = []
 
@@ -25743,7 +25743,7 @@ function figureFactory(type, point, options, direction) {
       return new figureFactory_Rectangle(point, options);
   }
 }
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"09cc008c-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/DrawBoard/components/topBar.vue?vue&type=template&id=03604e59&scoped=true&
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"22feb993-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/DrawBoard/components/topBar.vue?vue&type=template&id=03604e59&scoped=true&
 var topBarvue_type_template_id_03604e59_scoped_true_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"bar"},[_c('div',{staticClass:"status"},[_vm._v("当前状态："+_vm._s(this.currentStatus))])])}
 var topBarvue_type_template_id_03604e59_scoped_true_staticRenderFns = []
 
@@ -25901,7 +25901,7 @@ var component = normalizeComponent(
 )
 
 /* harmony default export */ var topBar = (component.exports);
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"09cc008c-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/DrawBoard/components/tool.vue?vue&type=template&id=665fe5e2&scoped=true&
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"22feb993-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/DrawBoard/components/tool.vue?vue&type=template&id=665fe5e2&scoped=true&
 var toolvue_type_template_id_665fe5e2_scoped_true_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"tool"},[_vm._l((_vm.setting),function(item,index){return _c('el-tooltip',{attrs:{"effect":"dark","content":item.content,"placement":"right"}},[(index < 1)?_c('i',{class:[{ active: index === _vm.active }, item.class],on:{"click":function($event){return _vm.changeTool(item.event, index)}}}):_c('i',{class:[{ active: index === _vm.active }, item.class],on:{"click":function($event){return _vm.changeEvent(item.event, index)}}})])}),_c('el-dialog',{attrs:{"title":"画布设置","close-on-click-modal":false,"visible":_vm.configDialogVisiable,"width":"400px","show-close":false,"append-to-body":""},on:{"update:visible":function($event){_vm.configDialogVisiable=$event}}},[_c('el-form',{attrs:{"label-position":"left","label-width":"100px","size":"mini","model":_vm.config}},[_c('el-form-item',{attrs:{"label":"线框颜色："}},[_c('el-color-picker',{attrs:{"size":"mini"},model:{value:(_vm.config.path_strokeStyle),callback:function ($$v) {_vm.$set(_vm.config, "path_strokeStyle", $$v)},expression:"config.path_strokeStyle"}})],1),_c('el-form-item',{attrs:{"label":"控制圈颜色："}},[_c('el-color-picker',{attrs:{"size":"mini"},model:{value:(_vm.config.point_strokeStyle),callback:function ($$v) {_vm.$set(_vm.config, "point_strokeStyle", $$v)},expression:"config.point_strokeStyle"}})],1),_c('el-form-item',{attrs:{"label":"线框宽度："}},[_c('el-input-number',{attrs:{"size":"mini"},model:{value:(_vm.config.path_lineWidth),callback:function ($$v) {_vm.$set(_vm.config, "path_lineWidth", $$v)},expression:"config.path_lineWidth"}})],1),_c('el-form-item',{attrs:{"label":"控制圈宽度："}},[_c('el-input-number',{attrs:{"size":"mini"},model:{value:(_vm.config.point_lineWidth),callback:function ($$v) {_vm.$set(_vm.config, "point_lineWidth", $$v)},expression:"config.point_lineWidth"}})],1),_c('el-form-item',{attrs:{"label":"控制圈半径："}},[_c('el-input-number',{attrs:{"size":"mini"},model:{value:(_vm.config.point_radis),callback:function ($$v) {_vm.$set(_vm.config, "point_radis", $$v)},expression:"config.point_radis"}})],1),_c('el-form-item',{attrs:{"label":"背景格："}},[_c('el-switch',{attrs:{"active-color":"#66a6ff","inactive-color":"#999"},model:{value:(_vm.config.grid),callback:function ($$v) {_vm.$set(_vm.config, "grid", $$v)},expression:"config.grid"}})],1),_c('el-form-item',{attrs:{"label":"导航线："}},[_c('el-switch',{attrs:{"active-color":"#66a6ff","inactive-color":"#999"},model:{value:(_vm.config.guid),callback:function ($$v) {_vm.$set(_vm.config, "guid", $$v)},expression:"config.guid"}})],1)],1),_c('span',{staticClass:"dialog-footer",attrs:{"slot":"footer"},slot:"footer"},[_c('el-button',{attrs:{"size":"small"},on:{"click":function($event){_vm.configDialogVisiable = false}}},[_vm._v("取 消")]),_c('el-button',{attrs:{"size":"small","type":"primary"},on:{"click":function($event){_vm.configDialogVisiable = false}}},[_vm._v("确 定")])],1)],1)],2)}
 var toolvue_type_template_id_665fe5e2_scoped_true_staticRenderFns = []
 

diff --git a/lib/drawboard.common.js.map b/lib/drawboard.common.js.map
diff --git a/lib/drawboard.umd.js b/lib/drawboard.umd.js
@@ -24671,7 +24671,7 @@ var lib_select_default = /*#__PURE__*/__webpack_require__.n(lib_select);
 var external_commonjs_vue_commonjs2_vue_root_Vue_ = __webpack_require__("8bbf");
 var external_commonjs_vue_commonjs2_vue_root_Vue_default = /*#__PURE__*/__webpack_require__.n(external_commonjs_vue_commonjs2_vue_root_Vue_);
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"09cc008c-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/DrawBoard/main.vue?vue&type=template&id=4e9d3793&scoped=true&
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"22feb993-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/DrawBoard/main.vue?vue&type=template&id=4e9d3793&scoped=true&
 var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"container",style:({ height: this.height + 'px', width: this.width + 'px' })},[_c('div',{ref:"drawboard",staticClass:"drawboard"},[_c('div',{staticClass:"center"},[_c('div',{staticClass:"wrapper"},[(_vm.sidbarShow)?_c('div',{staticClass:"tools"},[_c('tool',{attrs:{"path_strokeStyle":_vm.path_strokeStyle,"selected":_vm.selected},on:{"toolSelected":_vm.toolSelected,"topBarEvent":_vm.topBarEvent,"configChange":_vm.configChange,"contrastChange":_vm.contrastChange,"brightnessChange":_vm.brightnessChange}})],1):_vm._e(),_c('div',{directives:[{name:"loading",rawName:"v-loading",value:(_vm.loading),expression:"loading"}],ref:"view",staticClass:"view",attrs:{"element-loading-text":"加载中...","element-loading-spinner":"el-icon-loading","element-loading-background":"rgba(0, 0, 0, 0.8)"}},[_c('canvas',{ref:"image",staticClass:"canvas",attrs:{"id":"image"}},[_vm._v("The browser does not support canvas")]),_c('canvas',{ref:"canvas",staticClass:"canvas",attrs:{"id":"canvas"},on:{"mousedown":_vm.canvasMousedown}},[_vm._v("The browser does not support canvas")])])])])])])}
 var staticRenderFns = []
 
@@ -25752,7 +25752,7 @@ function figureFactory(type, point, options, direction) {
       return new figureFactory_Rectangle(point, options);
   }
 }
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"09cc008c-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/DrawBoard/components/topBar.vue?vue&type=template&id=03604e59&scoped=true&
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"22feb993-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/DrawBoard/components/topBar.vue?vue&type=template&id=03604e59&scoped=true&
 var topBarvue_type_template_id_03604e59_scoped_true_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"bar"},[_c('div',{staticClass:"status"},[_vm._v("当前状态："+_vm._s(this.currentStatus))])])}
 var topBarvue_type_template_id_03604e59_scoped_true_staticRenderFns = []
 
@@ -25910,7 +25910,7 @@ var component = normalizeComponent(
 )
 
 /* harmony default export */ var topBar = (component.exports);
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"09cc008c-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/DrawBoard/components/tool.vue?vue&type=template&id=665fe5e2&scoped=true&
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"22feb993-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/DrawBoard/components/tool.vue?vue&type=template&id=665fe5e2&scoped=true&
 var toolvue_type_template_id_665fe5e2_scoped_true_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"tool"},[_vm._l((_vm.setting),function(item,index){return _c('el-tooltip',{attrs:{"effect":"dark","content":item.content,"placement":"right"}},[(index < 1)?_c('i',{class:[{ active: index === _vm.active }, item.class],on:{"click":function($event){return _vm.changeTool(item.event, index)}}}):_c('i',{class:[{ active: index === _vm.active }, item.class],on:{"click":function($event){return _vm.changeEvent(item.event, index)}}})])}),_c('el-dialog',{attrs:{"title":"画布设置","close-on-click-modal":false,"visible":_vm.configDialogVisiable,"width":"400px","show-close":false,"append-to-body":""},on:{"update:visible":function($event){_vm.configDialogVisiable=$event}}},[_c('el-form',{attrs:{"label-position":"left","label-width":"100px","size":"mini","model":_vm.config}},[_c('el-form-item',{attrs:{"label":"线框颜色："}},[_c('el-color-picker',{attrs:{"size":"mini"},model:{value:(_vm.config.path_strokeStyle),callback:function ($$v) {_vm.$set(_vm.config, "path_strokeStyle", $$v)},expression:"config.path_strokeStyle"}})],1),_c('el-form-item',{attrs:{"label":"控制圈颜色："}},[_c('el-color-picker',{attrs:{"size":"mini"},model:{value:(_vm.config.point_strokeStyle),callback:function ($$v) {_vm.$set(_vm.config, "point_strokeStyle", $$v)},expression:"config.point_strokeStyle"}})],1),_c('el-form-item',{attrs:{"label":"线框宽度："}},[_c('el-input-number',{attrs:{"size":"mini"},model:{value:(_vm.config.path_lineWidth),callback:function ($$v) {_vm.$set(_vm.config, "path_lineWidth", $$v)},expression:"config.path_lineWidth"}})],1),_c('el-form-item',{attrs:{"label":"控制圈宽度："}},[_c('el-input-number',{attrs:{"size":"mini"},model:{value:(_vm.config.point_lineWidth),callback:function ($$v) {_vm.$set(_vm.config, "point_lineWidth", $$v)},expression:"config.point_lineWidth"}})],1),_c('el-form-item',{attrs:{"label":"控制圈半径："}},[_c('el-input-number',{attrs:{"size":"mini"},model:{value:(_vm.config.point_radis),callback:function ($$v) {_vm.$set(_vm.config, "point_radis", $$v)},expression:"config.point_radis"}})],1),_c('el-form-item',{attrs:{"label":"背景格："}},[_c('el-switch',{attrs:{"active-color":"#66a6ff","inactive-color":"#999"},model:{value:(_vm.config.grid),callback:function ($$v) {_vm.$set(_vm.config, "grid", $$v)},expression:"config.grid"}})],1),_c('el-form-item',{attrs:{"label":"导航线："}},[_c('el-switch',{attrs:{"active-color":"#66a6ff","inactive-color":"#999"},model:{value:(_vm.config.guid),callback:function ($$v) {_vm.$set(_vm.config, "guid", $$v)},expression:"config.guid"}})],1)],1),_c('span',{staticClass:"dialog-footer",attrs:{"slot":"footer"},slot:"footer"},[_c('el-button',{attrs:{"size":"small"},on:{"click":function($event){_vm.configDialogVisiable = false}}},[_vm._v("取 消")]),_c('el-button',{attrs:{"size":"small","type":"primary"},on:{"click":function($event){_vm.configDialogVisiable = false}}},[_vm._v("确 定")])],1)],1)],2)}
 var toolvue_type_template_id_665fe5e2_scoped_true_staticRenderFns = []
 

diff --git a/lib/drawboard.umd.js.map b/lib/drawboard.umd.js.map
diff --git a/lib/drawboard.umd.min.js.map b/lib/drawboard.umd.min.js.map
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "canvas-drawboard",
-  "version": "0.1.57",
+  "version": "0.1.58",
   "license": "MIT",
   "description": "a drawboard based on vue2.x",
   "scripts": {

diff --git a/packages/DrawBoard/main.vue b/packages/DrawBoard/main.vue
@@ -134,7 +134,7 @@ export default {
       currentStatus: status.DRAWING, // DRAWING/MOVING/UPDATING
       observer: null,
       isFullScreen: false,
-      loading: false,
+      loading: true,
       imagePixelData: [],
       selected: false,
     };
@@ -165,9 +165,9 @@ export default {
     url: {
       handler(val) {
         if (!val) {
-          this.loading = false;
-        } else {
           this.loading = true;
+        } else {
+          this.loading = false;
         }
         this.loadImage(val);
       },
@@ -192,7 +192,6 @@ export default {
     },
     labelDataOrigin: {
       handler(newData) {
-        console.log(newData, "newDate");
         if (newData.length && this.selectedWithBlock) {
           this.selected = true;
         }
@@ -203,7 +202,8 @@ export default {
     },
     loadingData: {
       handler() {
-        this.loading = this.loadingData;
+        debugger
+        // this.loading = this.loadingData;
       },
       immediate: true,
     },

diff --git a/packages/DrawBoard/utils/index.js b/packages/DrawBoard/utils/index.js
@@ -31,7 +31,7 @@ export function generateImage(canvas, cb, url) {
     cb(posX, posY, imageWidth, imageHeight, scaleValue)
   }
   img.onerror = function () {
-    console.log('image load failed!');
+    console.log('image load failed!!!!');
   }
 }