zydx-plus 1.32.294 → 1.32.296

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zydx-plus",
-  "version": "1.32.294",
+  "version": "1.32.296",
   "description": "Vue.js",
   "main": "src/index.js",
   "files": [

package/src/components/flip/src/flip.vue

@@ -17,8 +17,7 @@
                   @mousedown.stop="textMouseDown"
                   @dblclick="textDblclick"
                   :style="{
-                    top: textY2/sratio + 'px',
-                    left: textX2/sratio + 'px',
+                    transform: `translate(${textX2/sratio + 'px'},${textY2/sratio + 'px'})`,
                     'min-height': textHeight +'px',
                     border: `1px dashed ${color}`,
                     'min-width': textWidth + 'px',
@@ -43,7 +42,7 @@
         </button>
       </div>
     </div>
-    <div class="flip-tool" @click="flipTool" :style="{height: flipToolShow? '600px': '25px', overflow: flipToolShow2? 'visible':'hidden'}">
+    <div v-if="readingPen" class="flip-tool" @click="flipTool" :style="{height: flipToolShow? '600px': '25px', overflow: flipToolShow2? 'visible':'hidden'}">
       <div class="tool-text" v-if="!flipToolShow">
         <span>阅读笔</span>
       </div>
@@ -220,6 +219,10 @@ export default {
     pointsData: {
       type: Array,
       default: () => []
+    },
+    readingPen: {
+      type: Boolean,
+      default: false
     }
   },
   watch: {
@@ -310,6 +313,7 @@ export default {
     mouse() {
       this.state = null
       this.setShow = false
+      this.turnText()
     },
     // 画笔
     brush() {
@@ -508,12 +512,20 @@ export default {
         y: e.offsetY*this.sratio - this.checkY
       }
       for(let i=0; i<this.pointsSelect.length; i++) {
-        this.pointsSelect[i].x = this.pointsSelect[i].x + obj.x
-        this.pointsSelect[i].y = this.pointsSelect[i].y + obj.y
+        this.pointsSelect[i].x = this.pointsSelect[i].x*this.scales/this.pointsSelect[i].scale + obj.x
+        this.pointsSelect[i].y = this.pointsSelect[i].y*this.scales/this.pointsSelect[i].scale + obj.y
         if(this.pointsSelect[i].type === 'straight' || this.pointsSelect[i].type === 'arrow') {
-          this.pointsSelect[i].x2 = this.pointsSelect[i].x2 + obj.x
-          this.pointsSelect[i].y2 = this.pointsSelect[i].y2 + obj.y
+          this.pointsSelect[i].x2 = this.pointsSelect[i].x2*this.scales/this.pointsSelect[i].scale + obj.x
+          this.pointsSelect[i].y2 = this.pointsSelect[i].y2*this.scales/this.pointsSelect[i].scale + obj.y
+        }
+        if(this.pointsSelect[i].type === 'rectangle') {
+          this.pointsSelect[i].width = this.pointsSelect[i].width*this.scales/this.pointsSelect[i].scale
+          this.pointsSelect[i].height = this.pointsSelect[i].height*this.scales/this.pointsSelect[i].scale
         }
+        if(this.pointsSelect[i].type === 'circular') {
+          this.pointsSelect[i].width = this.pointsSelect[i].width*this.scales/this.pointsSelect[i].scale
+        }
+        this.pointsSelect[i].scale = this.scales
         this.points.push(this.pointsSelect[i])
       }
     },
@@ -1033,11 +1045,13 @@ export default {
 }
 .text-frame{
   position: absolute;
+  top: 0;
+  left: 0;
   z-index: 10;
   display: inline-block;
   line-height: 1.1;
   user-select: none;
-  transition: all 0s;
+  transition-duration: 0.05s;
 }
 .text-input{
   width: 100%;
@@ -1236,6 +1250,7 @@ export default {
 .wrap-can {
   display: inline-block;
   margin: 0 auto;
+  position: relative;
   //cursor: none;
 }
 

package/src/components/sketchpad/src/sketchpad.vue

@@ -2,11 +2,10 @@
   <div class="sketchpad" ref="sketchpad">
     <canvas :id="id"></canvas>
     <div class="tool"
-         @mouseup.stop="mouseup"
          @mousedown.stop="mousedown"
          :style="{transform: `translate(${x}px, ${y}px)`}">
       <div class="tool-list" @click.stop="set">
-        <img src="./img/shezi.png" alt=""/>
+        <img class="img-1" src="./img/shezi.png" alt=""/>
         <div v-if="setShow" class="set">
           <div class="set-list">
             <span>线条粗细</span>
@@ -18,17 +17,17 @@
           </div>
         </div>
       </div>
-      <div class="tool-list" @click.stop="mouse">
-        <img src="./img/shubiao.png" alt=""/>
+      <div class="tool-list" @click.stop="mouse()">
+        <img class="img-2" src="./img/shubiao.png" alt=""/>
       </div>
-      <div class="tool-list" @click.stop="brush">
-        <img src="./img/huabi.png" alt=""/>
+      <div class="tool-list" @click.stop="brush()">
+        <img class="img-3" src="./img/huabi.png" alt=""/>
       </div>
-      <div class="tool-list" @click.stop="rectangle">
-        <img src="./img/juxing.png" alt=""/>
+      <div class="tool-list" @click.stop="rectangle()">
+        <img class="img-4" src="./img/juxing.png" alt=""/>
       </div>
-      <div class="tool-list" @click.stop="addTextBox">
-        <img src="./img/wenzi.png" alt=""/>
+      <div class="tool-list" @click.stop="addTextBox()">
+        <img class="img-5" src="./img/wenzi.png" alt=""/>
         <div v-if="textShow" class="set">
           <div class="set-list">
             <span>字号</span>
@@ -43,20 +42,20 @@
           </div>
         </div>
       </div>
-      <div class="tool-list" @click.stop="rotundity">
-        <img src="./img/yuan.png" alt=""/>
+      <div class="tool-list" @click.stop="rotundity()">
+        <img class="img-6" src="./img/yuan.png" alt=""/>
       </div>
-      <div class="tool-list" @click.stop="addLine">
-        <img src="./img/jian.png" alt=""/>
+      <div class="tool-list" @click.stop="addLine()">
+        <img class="img-7" src="./img/jian.png" alt=""/>
       </div>
-      <div class="tool-list" @click.stop="arrow">
-        <img src="./img/jiantou.png" alt=""/>
+      <div class="tool-list" @click.stop="arrow()">
+        <img class="img-8" src="./img/jiantou.png" alt=""/>
       </div>
-      <div class="tool-list" @click.stop="save">
-        <img src="./img/baocun.png" alt=""/>
+      <div class="tool-list" @click.stop="save()">
+        <img class="img-9" src="./img/baocun.png" alt=""/>
       </div>
-      <div class="tool-list" @click.stop="clear">
-        <img src="./img/xiangpi.png" alt=""/>
+      <div class="tool-list" @click.stop="clear()">
+        <img class="img-10" src="./img/xiangpi.png" alt=""/>
       </div>
     </div>
   </div>
@@ -88,7 +87,7 @@ export default {
       left: 0,
       top: 0,
       isMove: false,
-      x: -50,
+      x: 0,
       y: 0,
       offLeft: 0,
       offTop: 0,
@@ -126,17 +125,13 @@ export default {
       this.init()
     }, 0)
     window.addEventListener('keydown', this.handleKeyEvent)
-    const ids = this.$refs.sketchpad.getBoundingClientRect()
-    const bodyWidth = (document.documentElement.clientWidth - this.$refs.sketchpad.offsetLeft - ids.width) / 2
-    this.offLeft = this.$refs.sketchpad.offsetLeft + bodyWidth
-    this.offTop = ids.top
-    // 监听滚动
-    this.throttleHandleScroll()
-    window.addEventListener('scroll', this.throttleHandleScroll);
     document.addEventListener('mousemove', (event) => {
       if (!this.isMove) return
-      this.x = event.clientX - this.left;
-      this.y = event.clientY - this.top;
+      const ids = this.$refs.sketchpad.getBoundingClientRect()
+      this.offLeft = ids.left
+      this.offTop = ids.top
+      this.x = event.clientX - this.left - this.offLeft
+      this.y = event.clientY - this.top - this.offTop
     })
     document.addEventListener('mouseup', (event) => {
       this.isMove = false
@@ -153,20 +148,24 @@ export default {
     textInputTap() {
       this.$refs.textInput.focus()
     },
-    throttleHandleScroll() {
-      this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop
-    },
     mousedown(event) {
-      event.preventDefault()
+      const e = event.target || event.srcElement
+      let x = 0, y = 0
+      if(e.nodeName === 'IMG') {
+        const rect = e.getBoundingClientRect()
+        const index = e.className.split(' ')[0].split('-')[1]
+        x = event.clientX - rect.left
+        y = event.clientY - rect.top + 30*index
+      }else {
+        x = event.offsetX
+        y = event.offsetY
+      }
+      console.log(x,y)
       //鼠标按下事件
-      this.left = event.offsetX + this.offLeft + 25
-      this.top = event.offsetY + this.offTop - this.scrollTop
+      this.left = x
+      this.top = y
       this.isMove = true
     },
-    mouseup() {
-      //鼠标松开事件
-      this.isMove = false
-    },
     sizeTap(v) {
       this.fontSize = Number(v)
     },
@@ -177,9 +176,11 @@ export default {
     },
     strokeColTap(v) {
       this.color = v
+      this.canvas.freeDrawingBrush.color = this.color
     },
     strokeTap(v) {
       this.strokeWidth = Number(v)
+      this.canvas.freeDrawingBrush.width = this.strokeWidth
     },
     set() {
       this.textShow = false
@@ -521,4 +522,4 @@ export default {
 .set-right {
   text-align: right;
 }
-</style>
+</style>

package/src/index.js

@@ -81,7 +81,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.32.294',
+    version: '1.32.296',
     install,
     Calendar,
     Message,