centaline-data-driven 1.4.61 → 1.4.62

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "centaline-data-driven",
-  "version": "1.4.61",
+  "version": "1.4.62",
   "description": "ccai",
   "author": "hjc <3226136347@qq.com>",
   "private": false,

package/src/centaline/dynamicEditPictures/src/dynamicEditPictures.vue

@@ -21,7 +21,7 @@
         </a>
       </div>
     </div>
-    <div class="stream-total-tips" v-if="progressFlag">
+    <div class="stream-total-tips"  v-if="progressFlag">
       <el-progress type="circle"
                    :percentage="typeof loadProgress !== 'undefined' && loadProgress !== null ? loadProgress : 0.00"
                    :width="150" :height="150" class="file-cirle"></el-progress>
@@ -58,6 +58,9 @@
         canMove: false,
         PaintMove: false,
         isActive: false,
+        bodywidth: 0,
+        bodyheight: 0,
+        scale:1,
         tx: 0,
         ty: 0,
         tl: 0,
@@ -124,6 +127,10 @@
     mounted() {
       this.progressFlag = false;
       this.loadProgress = 0;
+      var width = parseInt(window.document.body.clientWidth * 0.8);
+      width = width > 1160 ? 1160 : width;
+      this.bodywidth = width;
+      this.bodyheight = parseInt(window.document.body.clientHeight * 0.8);
       if (typeof this.minWidth == 'undefined' || typeof this.minWidth == 'undefined') {
         this.cropBoxResizable = true;
       }
@@ -153,25 +160,23 @@
             _this.canvas.width = naturalWidth;
             _this.canvas.height = naturalHeight;
             _this.ctx.drawImage(_this.imgObj, 0, 0, naturalWidth, naturalHeight)
-
-            var scale = 1;
-            var scalew = 900 / _this.imgObj.width;
-            var scaleh = window.document.body.clientHeight / _this.imgObj.height;
+            var scalew = _this.bodywidth / _this.imgObj.width;
+            var scaleh = _this.bodyheight / _this.imgObj.height;
             if (scalew < 1 && scaleh < 1) {
               if (scalew < scaleh) {
-                scale = scalew;
+                _this.scale = scalew;
               }
               else {
-                scale = scaleh;
+                _this.scale = scaleh;
               }
             }
             else if (scalew > 1 && scaleh < 1) {
-              scale = scaleh;
+              _this.scale = scaleh;
             }
             else if (scalew < 1 && scaleh > 1) {
-              scale = scalew;
+              _this.scale = scalew;
             }
-            _this.scaleDomSize(_this.canvas, scale);
+            _this.scaleDomSize(_this.canvas);
           }
           this.canvas.addEventListener("pointerdown", _this.startDraw, false);
           this.canvas.addEventListener("pointermove", _this.draw, false);
@@ -283,25 +288,15 @@
       },
       //放大缩小
       scaleDom(canvas, type) {
-        let scale = parseFloat((canvas.style.transform || `scale(1)`).replace(/[^0-9.]/gi, ''))
         if (type == "-") {
-          scale += -0.1;
-          if ((scale <= 1 && canvas.width > 900) || (scale <= 1 && canvas.height > (window.document.body.clientHeight))) {
-            canvas.style.left = - canvas.width * 0.05 * ((1 - scale) * 10) + 'px';
-            canvas.style.top = -canvas.height * 0.05 * ((1 - scale) * 10) + 'px';
-          }
+          this.scale += -0.1;
         } else if (type == "+") {
-          scale += 0.1;
-          if ((scale <= 1 && canvas.width > 900) || (scale <= 1 && canvas.height > (window.document.body.clientHeight))) {
-            canvas.style.left = - canvas.width * 0.05 * ((1 - scale) * 10) + 'px';
-            canvas.style.top = -canvas.height * 0.05 * ((1 - scale) * 10) + 'px';
-          }
+          this.scale += 0.1;
         }
         else {
-          scale = 1;
+          this.scale = 1;
         }
-        if (scale >= 0.1) canvas.style.transform = `scale(${scale})`;
-
+        this.scaleDomSize(canvas);
       },
       rotLeft() {
         this.rot -= 90;
@@ -350,6 +345,7 @@
         context.drawImage(img, 0, 0, w, h);
         context.restore();
         img.style.display = "none";
+        this.scaleDomSize(canvas);
       },
       Crop() {
         let _this = this
@@ -411,8 +407,6 @@
       clear() {
         this.drawCanv();
         this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-        this.canvas.style.left = '0px';
-        this.canvas.style.top = '0px';
         this.rot = 0;
         this.nl = 0;
         this.nt = 0;
@@ -422,12 +416,10 @@
         this.scaleDom(this.canvas, "");
         this.rotate(this.canvas, this.imgObj, this.rot);
       },
-      scaleDomSize(canvas, scale) {
-        if ((scale <= 1 && canvas.width > 900) || (scale <= 1 && canvas.height > (window.document.body.clientHeight))) {
-          canvas.style.left = - canvas.width * 0.05 * ((1 - scale) * 10) + 'px';
-          canvas.style.top = -canvas.height * 0.05 * ((1 - scale) * 10) + 'px';
-        }
-        if (scale >= 0.1) canvas.style.transform = `scale(${scale})`;
+      scaleDomSize(canvas) {
+        canvas.style.transform = `scale(${this.scale})`;
+        canvas.style.left = (- canvas.width * 0.05 * ((1 - this.scale) * 10)) + ((this.bodywidth - canvas.width * this.scale) / 2) + 'px';
+        canvas.style.top = (-canvas.height * 0.05 * ((1 - this.scale) * 10)) + ((this.bodyheight - canvas.height * this.scale) / 2) + 'px';
       },
       async preservation() {
         this.progressFlag = true;
@@ -649,7 +641,7 @@
   .stream-total-tips {
     position: fixed;
     top: 40%;
-    left: 40%;
+    left: 45%;
     z-index: 9999;
   }
  

package/src/centaline/loader/src/ctl/File.js

@@ -356,9 +356,11 @@ const box = function (source, fileSourceList, router, optionApi,videoPlayIconUrl
             data = rtn.getFileData(res.content.media);
             data.progressFlag = false;
             data.loadProgress = 100;
-            const img = await this.imgFn(data.mediaUrl);
-            w = img.width;
-            h = img.height ;
+            if (data.mediaTypeID == 2) {
+              const img = await this.imgFn(data.mediaUrl);
+              w = img.width;
+              h = img.height;
+            }
             Vue.set(file, "width", w);
             Vue.set(file, "height", h);
             Vue.set(file, "url", data.url);