zydx-plus 1.32.292 → 1.32.294

package/package.json

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

package/src/components/biz_header/src/button_name.js

@@ -199,7 +199,7 @@ let buttonNames = {
                             lowLevel: {
                                 default: "setTask",
                                 setTask: '布置任务',
-                                duplicate: '违纪查重',
+                                // duplicate: '违纪查重',
                                 teacherReview: '教师评价',
                                 studentReview: '同学互评',
                                 studyRecord: '学习记录',
@@ -335,7 +335,7 @@ let buttonNames = {
                                 default: "setTask",
                                 setTask: '布置任务',
                                 teacherAnswer: '教师答疑',
-                                duplicate: '违纪查重',
+                                // duplicate: '违纪查重',
                                 teacherReview: '教师评价',
                                 studentReview: '同学互评',
                                 studyRecord: '学习记录',
@@ -381,7 +381,7 @@ let buttonNames = {
                             lowLevel: {
                                 default: "setTask",
                                 setTask: '布置任务',
-                                duplicate: '违纪查重',
+                                // duplicate: '违纪查重',
                                 teacherReview: '教师评价',
                                 studentReview: '同学互评',
                                 studyRecord: '学习记录',
@@ -648,7 +648,7 @@ let buttonNames = {
                                 default: "setTask",
                                 setTask: '布置任务',
                                 // groupStudy: '小组学习',
-                                duplicate: '违纪查重',
+                                // duplicate: '违纪查重',
                                 teacherReview: '教师评价',
                                 studentReview: '同学互评',
                                 studyRecord: '学习记录',

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

@@ -9,8 +9,23 @@
               <img :src="imgArr[(oneIndex === 'right')? pageIndex-1: pageIndex]" alt=""/>
             </div>
             <div class="wrap-can" ref="wrapCan">
-              <canvas @mousedown="mouseDown" @mousemove="mouseMove" :id="id"></canvas>
-<!--              <div class="cursor" :style="cursorRounded"></div>-->
+              <canvas @click.stop="turnText" class="wrap-can-one" @mousedown.stop="mouseDown" @mousemove.stop="mouseMove" :id="id"></canvas>
+              <canvas :id="`${id}2`"></canvas>
+              <div
+                  v-show="state === 'text'&&textY2>0&&textX2>0"
+                  class="text-frame"
+                  @mousedown.stop="textMouseDown"
+                  @dblclick="textDblclick"
+                  :style="{
+                    top: textY2/sratio + 'px',
+                    left: textX2/sratio + 'px',
+                    'min-height': textHeight +'px',
+                    border: `1px dashed ${color}`,
+                    'min-width': textWidth + 'px',
+                    cursor: contenteditable? 'text': 'move'
+                  }">
+                <div class="text-input" ref="textInput" :style="{'font-size': fontSize + 'px',color: color}" :contenteditable="contenteditable"></div>
+              </div>
             </div>
           </div>
           <div class="page-but-left" :style="{cursor: pageIndex === 1?'default':'pointer'}"
@@ -28,6 +43,82 @@
         </button>
       </div>
     </div>
+    <div class="flip-tool" @click="flipTool" :style="{height: flipToolShow? '600px': '25px', overflow: flipToolShow2? 'visible':'hidden'}">
+      <div class="tool-text" v-if="!flipToolShow">
+        <span>阅读笔</span>
+      </div>
+      <div class="tool-list" :style="{transform: `translateY(${flipToolShow? '0':'-130%'})`}">
+        <div v-if="setShow" class="set" :style="{top: top + 'px'}">
+          <div class="set-list set-text" v-if="state === 'text'">
+            <span>文字字号</span>
+            <em v-for="(item) in textData" :style="{color: fontSize === Number(item)? 'rgba(198, 76, 16, 1)': '#000'}" @click.stop="textSizeTap(item)">{{ item }}</em>
+          </div>
+          <div class="set-list" v-else>
+            <span>线条粗细</span>
+            <em v-for="(item) in strokeData" :style="{color: lineWidth === Number(item)? 'rgba(198, 76, 16, 1)': '#000'}" @click.stop="strokeTap(item)">{{ item }}</em>
+          </div>
+          <div class="set-list">
+            <span>线条颜色</span>
+            <i v-for="(item) in strokeColor" @click.stop="strokeColTap(item)" :style="{'background-color': item === color? '#fff': item, border: `4px solid ${item}`}"></i>
+          </div>
+        </div>
+        <div class="tool-item" :class="{'tool-item-active': state === null}" @click.stop="mouse">
+          <div class="tool-item-img">
+            <img src="./img/shubiao.png" alt=""/>
+          </div>
+        </div>
+        <div class="tool-item" :class="{'tool-item-active': state === 'brush'}" @click.stop="brush">
+          <div class="tool-item-img">
+            <img src="./img/huabi.png" alt=""/>
+          </div>
+        </div>
+        <div class="tool-item" :class="{'tool-item-active': state === 'text'}" @click.stop="textTap">
+          <div class="tool-item-img">
+            <img src="./img/wenzi.png" alt=""/>
+          </div>
+        </div>
+        <div class="tool-item" :class="{'tool-item-active': state === 'rectangle'}" @click.stop="rectangleTap">
+          <div class="tool-item-img">
+            <img src="./img/juxing.png" alt=""/>
+          </div>
+        </div>
+        <div class="tool-item" :class="{'tool-item-active': state === 'circula'}" @click.stop="circularTap">
+          <div class="tool-item-img">
+            <img src="./img/yuan.png" alt=""/>
+          </div>
+        </div>
+        <div class="tool-item" :class="{'tool-item-active': state === 'straight'}" @click.stop="straightTap">
+          <div class="tool-item-img">
+            <img src="./img/jian.png" alt=""/>
+          </div>
+        </div>
+        <div class="tool-item" :class="{'tool-item-active': state === 'arrow'}" @click.stop="arrowTap">
+          <div class="tool-item-img">
+            <img src="./img/jiantou.png" alt=""/>
+          </div>
+        </div>
+        <div class="tool-item" @click.stop="backward">
+          <div class="tool-item-img">
+            <img src="./img/houtui.png" alt=""/>
+          </div>
+        </div>
+        <div class="tool-item" @click.stop="preserve">
+          <div class="tool-item-img">
+            <img src="./img/baocun.png" alt=""/>
+          </div>
+        </div>
+        <div class="tool-item" @click.stop="empty">
+          <div class="tool-item-img">
+            <img src="./img/xiangpi.png" alt=""/>
+          </div>
+        </div>
+        <div class="tool-item">
+          <div class="tool-item-img">
+            <img src="./img/guanbi.png" alt=""/>
+          </div>
+        </div>
+      </div>
+    </div>
     <div v-if="loading" class="loading-back">
       <div class="loading-cont">
         <div class="loadings">Loading</div>
@@ -40,6 +131,7 @@
 import * as PdfJs from 'pdfjs-dist/legacy/build/pdf.js' // 注意导入的写法d
 PdfJs.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.entry')
 const jsdelivr = '/zydx/static/cmaps/'
+
 export default {
   name: "zydx-flip",
   data() {
@@ -71,6 +163,33 @@ export default {
       ctx: null,
       lineWidth: 2,
       points: [],
+      setShow: false,
+      flipToolShow2: false,
+      flipToolShow: false,
+      strokeData: ['1', '2', '3', '4', '5', '6', '7'], // 画笔数据
+      strokeColor: ['#000', '#f00', '#0f0', '#00f', '#f0f', '#ff0', '#0ff'], // 画笔颜色
+      textData: ['14', '16', '18', '20', '22', '24'], // 文本数据
+      color: '#000',
+      text: '',
+      state: null,
+      top: 0,
+      fontSize: 14,
+      textX: 0,
+      textY: 0,
+      textX2: 0,
+      textY2: 0,
+      textStart: false,
+      contenteditable: false,
+      linkId: null,
+      pointsSelect: [],
+      checkDrawing: false,
+      checkX: 0,
+      checkY: 0,
+      textWidth: 0,
+      textHeight: 0,
+      textDownX: 0,
+      textDownY: 0,
+      textMoveStart: false,
     }
   },
   props: {
@@ -144,15 +263,269 @@ export default {
   emits: ['flip','updateData'],
   mounted() {
     this.id = 'canvas-wrap' + Math.random().toString(36).substr(2)
+    window.addEventListener('keydown', this.handleKeyEvent)
     // 在画板以外松开鼠标后冻结画笔
     document.onmouseup = () => {
-      if (this.isDrawing) this.mouseUp()
+      if (this.isDrawing || this.checkDrawing) this.mouseUp()
+      this.textMoveStart = false
     }
   },
+  beforeDestroy() {
+    window.removeEventListener('keydown', this.handleKeyEvent)
+  },
   methods: {
+    handleKeyEvent(e) {
+      const {key} = e
+      if (key === 'Backspace' || key === 'Delete') {
+        this.backward()
+      }
+    },
+    empty() {
+      this.setShow = false
+      this.points = []
+      this.clearRect(true)
+    },
+    preserve() {
+      this.setShow = false
+      this.$emit('updateData', this.points)
+    },
+    // 后退
+    backward() {
+      this.setShow = false
+      if(this.points.length === 0) return
+      if(this.points[this.points.length - 1].type === 'line') {
+        const id = this.points[this.points.length - 1].id
+        for(let i = 0; i < this.points.length; i++) {
+          if(this.points[i].id === id) {
+            this.points.splice(i,1)
+            i--
+          }
+        }
+      }else {
+        this.points.pop()
+      }
+      this.clearRect()
+    },
+    // 鼠标
+    mouse() {
+      this.state = null
+      this.setShow = false
+    },
+    // 画笔
+    brush() {
+      this.state = 'brush'
+      this.setShow = true
+      this.top = 60
+    },
+    // 文字字号
+    textSizeTap(v) {
+      this.fontSize = Number(v)
+    },
+    // 矩形
+    rectangleTap() {
+      this.state = 'rectangle'
+      this.setShow = true
+      this.top = 60*3
+    },
+    // 圆形
+    circularTap() {
+      this.state = 'circular'
+      this.setShow = true
+      this.top = 60*4
+    },
+    // 直线
+    straightTap() {
+      this.state = 'straight'
+      this.setShow = true
+      this.top = 60*5
+    },
+    // 箭头
+    arrowTap() {
+      this.state = 'arrow'
+      this.setShow = true
+      this.top = 60*6
+    },
+    // 文字
+    textTap() {
+      this.state = 'text'
+      this.setShow = true
+      this.top = 60*2
+      this.textStart = true
+      this.textX2 = 0
+      this.textY2 = 0
+      this.textWidth = 100
+      this.textHeight = this.fontSize + 1
+      this.$refs.textInput.innerText = ''
+    },
+    flipTool() {
+      this.setShow = false
+      this.textShow = false
+      this.flipToolShow = !this.flipToolShow
+      if(this.flipToolShow) {
+        setTimeout(() => {
+          this.flipToolShow2 = true
+        }, 600)
+      } else {
+        this.flipToolShow2 = false
+      }
+    },
+    strokeColTap(v) {
+      this.color = v
+    },
+    strokeTap(v) {
+      this.lineWidth = Number(v)
+    },
+    // 查询当前点击的图形
+    checkDown(e) {
+      e = e || event
+      e.preventDefault()
+      let obj = {
+        x: e.offsetX*this.sratio,
+        y: e.offsetY*this.sratio
+      }
+      this.checkX = obj.x
+      this.checkY = obj.y
+      this.pointsSelect = []
+      for(let i = 0; i < this.points.length; i++) {
+        if (this.points[i].index === this.pageIndex) {
+          const x1 = this.points[i].x*this.scales/this.points[i].scale
+          const y1 = this.points[i].y*this.scales/this.points[i].scale
+          // 判断点击的是否是圆
+          if(this.points[i]?.type === 'circular') {
+            const x2 = this.points[i].x*this.scales/this.points[i].scale + this.points[i].width*this.scales/this.points[i].scale
+            const y2 = this.points[i].y*this.scales/this.points[i].scale + this.points[i].width*this.scales/this.points[i].scale
+            const a = Math.sqrt(Math.pow(x1-obj.x,1.65)+Math.pow(y1-obj.y,1.65))
+            const b = Math.sqrt(Math.pow(x2-obj.x,1.65)+Math.pow(y2-obj.y,1.65))
+            const c = Math.sqrt(Math.pow(x1-obj.x,1.65)+Math.pow(y2-obj.y,1.65))
+            const d = Math.sqrt(Math.pow(x2-obj.x,1.65)+Math.pow(y1-obj.y,1.65))
+            const e = this.points[i].width*this.scales/this.points[i].scale/2
+            if(a <= e || b <= e || c <= e || d <= e) {
+              this.pointsSelect.push(this.points[i])
+              this.circularProcessing(this.points[i],{x:0,y:0})
+              this.points.splice(i,1)
+            }
+          }
+          if(this.points[i]?.type === 'text') {
+            // 取最长的一行文字
+            let len = 0
+            this.points[i].text.forEach(item => {
+              if(item.length > len) len = item.length
+            })
+            const x2 = this.points[i].x*this.scales/this.points[i].scale + len*this.points[i].size*this.sratio
+            const y2 = this.points[i].y*this.scales/this.points[i].scale + len*this.points[i].size*this.sratio
+            if(obj.x >= x1 && obj.x <= x2 && obj.y >= y1 && obj.y <= y2) {
+              this.state = 'text'
+              this.textX2 = x1
+              this.textY2 = y1
+              this.textWidth = 'auto'
+              this.color = this.points[i].color
+              this.textHeight = this.points[i].text.length*this.points[i].size + 1
+              this.$refs.textInput.innerText = this.points[i].text.join('\n')
+              this.points.splice(i,1)
+              this.clearRect()
+            }
+          }
+          if(this.points[i]?.type === 'rectangle') {
+            const x2 = this.points[i].x*this.scales/this.points[i].scale + this.points[i].width*this.scales/this.points[i].scale
+            const y2 = this.points[i].y*this.scales/this.points[i].scale + this.points[i].height*this.scales/this.points[i].scale
+            if(obj.x >= x1 && obj.x <= x2 && obj.y >= y1 && obj.y <= y2) {
+              this.pointsSelect.push(this.points[i])
+              this.rectangleProcessing(this.points[i],{x:0,y:0})
+              this.points.splice(i,1)
+            }
+          }
+          if(this.points[i]?.type === 'line') {
+            const x2 = this.points[i+1]?this.points[i+1].x*this.scales/this.points[i].scale:0
+            const y2 = this.points[i+1]?this.points[i+1].y*this.scales/this.points[i].scale:0
+            const x3 = obj.x
+            const y3 = obj.y
+            const a = Math.abs((x1-x2)*(y1-y3)-(x1-x3)*(y1-y2))
+            const b = Math.sqrt(Math.pow(x1-x2,2)+Math.pow(y1-y2,2))
+            const c = Math.sqrt(Math.pow(x1-x3,2)+Math.pow(y1-y3,2))
+            const d = Math.sqrt(Math.pow(x2-x3,2)+Math.pow(y2-y3,2))
+            if(a/b <= 5 && c <= b && d <= b) {
+              const id = this.points[i].id
+              for(let j=0; j<this.points.length; j++) {
+                if(this.points[j].id === id) {
+                  this.pointsSelect.push(this.points[j])
+                  this.lineProcessing(this.points[j],this.points[j+1],{x:0,y:0})
+                  this.points.splice(j,1)
+                  j--
+                }
+              }
+            }
+          }
+          if(this.points[i]?.type === 'straight' || this.points[i]?.type === 'arrow') {
+            const x2 = this.points[i].x2*this.scales/this.points[i].scale
+            const y2 = this.points[i].y2*this.scales/this.points[i].scale
+            const x3 = obj.x
+            const y3 = obj.y
+            const a = Math.abs((x1-x2)*(y1-y3)-(x1-x3)*(y1-y2))
+            const b = Math.sqrt(Math.pow(x1-x2,2)+Math.pow(y1-y2,2))
+            const c = Math.sqrt(Math.pow(x1-x3,2)+Math.pow(y1-y3,2))
+            const d = Math.sqrt(Math.pow(x2-x3,2)+Math.pow(y2-y3,2))
+            if(a/b <= 5 && c <= b && d <= b) {
+              this.pointsSelect.push(this.points[i])
+              if(this.points[i].type === 'straight') {
+                this.straightProcessing(this.points[i],{x:0,y:0})
+              }else {
+                this.arrowProcessing(this.points[i],{x:0,y:0})
+              }
+              this.points.splice(i,1)
+            }
+          }
+        }
+      }
+    },
+    checkMove(e) {
+      if(this.pointsSelect.length === 0) return
+      let obj = {
+        x: e.offsetX*this.sratio - this.checkX,
+        y: e.offsetY*this.sratio - this.checkY
+      }
+      this.clearRect()
+      for(let i=0; i<this.pointsSelect.length; i++) {
+        if(this.pointsSelect[i].type === 'line') {
+          this.lineProcessing(this.pointsSelect[i],this.pointsSelect[i+1],obj)
+        }
+        if(this.pointsSelect[i].type === 'rectangle') {
+          this.rectangleProcessing(this.pointsSelect[i],obj)
+        }
+        if(this.pointsSelect[i].type === 'straight') {
+          this.straightProcessing(this.pointsSelect[i],obj)
+        }
+        if(this.pointsSelect[i].type === 'arrow') {
+          this.arrowProcessing(this.pointsSelect[i],obj)
+        }
+        if(this.pointsSelect[i].type === 'circular') {
+          this.circularProcessing(this.pointsSelect[i],obj)
+        }
+      }
+    },
+    checkUp(e) {
+      let obj = {
+        x: e.offsetX*this.sratio - this.checkX,
+        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
+        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.points.push(this.pointsSelect[i])
+      }
+    },
     mouseDown (e) {
+      this.setShow = false
       e = e || event
       e.preventDefault()
+      if(this.state === null) {
+        this.checkDrawing = true
+        this.checkDown(e)
+        return
+      }
       this.isDrawing = true
       let obj = {
         x: e.offsetX*this.sratio,
@@ -160,9 +533,26 @@ export default {
       }
       this.drawStart(obj)
     },
+    textDblclick() {
+      if(!this.contenteditable) this.contenteditable = true
+    },
+    textMouseDown(e) {
+      e = e || event
+      this.textDownX = e.offsetX
+      this.textDownY = e.offsetY
+      this.textMoveStart = true
+    },
     mouseMove (e) {
       e = e || event
       e.preventDefault()
+      if(this.textMoveStart) {
+        this.textX2 = e.offsetX*this.sratio - this.textDownX
+        this.textY2 = e.offsetY*this.sratio - this.textDownY
+      }
+      if(this.state === null) {
+        if(this.checkDrawing) this.checkMove(e)
+        return
+      }
       if (this.isDrawing) {
         let obj = {
           x: e.offsetX*this.sratio,
@@ -174,6 +564,11 @@ export default {
     mouseUp (e) {
       e = e || event
       e.preventDefault()
+      if(this.state === null) {
+        this.checkDrawing = false
+        this.checkUp(e)
+        return
+      }
       let obj = {
         x: e.offsetX*this.sratio,
         y: e.offsetY*this.sratio
@@ -185,52 +580,349 @@ export default {
     drawStart (obj) {
       obj.index = this.pageIndex
       obj.start = 'start'
-      obj.scale = this.scales
+      this.linkId = Math.random().toString(36).substr(2)
       this.startX = obj.x
       this.startY = obj.y
+      if(this.textStart) {
+        this.textX2 = obj.x
+        this.textY2 = obj.y
+        this.contenteditable = true
+        this.setShow = false
+        setTimeout(() => {
+          this.textStart = false
+        },500)
+      }
+      this.textX = obj.x
+      this.textY = obj.y
+      if(this.state === 'brush') this.line(obj)
+      if(this.state === 'rectangle') this.rectangle(obj)
+      if(this.state === 'circular') this.circular(obj)
+      if(this.state === 'straight') this.straight(obj)
+      if(this.state === 'arrow') this.arrow(obj)
+    },
+    drawEnd (obj) {
+      obj.index = this.pageIndex
+      obj.start = 'end'
+      if(this.state === 'brush') this.line(obj)
+      if(this.state === 'rectangle') this.rectangle(obj,'end')
+      if(this.state === 'circular') this.circular(obj,'end')
+      if(this.state === 'straight') this.straight(obj,'end')
+      if(this.state === 'arrow') this.arrow(obj,'end')
+    },
+    drawMove (obj) {
+      obj.index = this.pageIndex
+      obj.start = 'move'
+      if(this.state === 'brush') this.line(obj)
+      if(this.state === 'rectangle') this.rectangle(obj)
+      if(this.state === 'circular') this.circular(obj)
+      if(this.state === 'straight') this.straight(obj)
+      if(this.state === 'arrow') this.arrow(obj)
+      this.startY = obj.y
+      this.startX = obj.x
+    },
+    turnText() {
+      if(this.textStart) return
+      if(this.state === 'text') {
+        const text = this.$refs.textInput.innerText
+        this.contenteditable = false
+        this.state = null
+        if(text === '') return
+        this.addText(text)
+      }
+    },
+    // 添加文字
+    addText(v) {
+      let obj = {}
+      obj.index = this.pageIndex
+      obj.type = 'text'
+      obj.scale = this.scales
+      obj.color = this.color
+      obj.size = this.fontSize
+      obj.id = this.linkId
+      // 解析换行
+      const arr = v.split('\n')
+      for(let i = 0; i < arr.length; i++) {
+        this.ctx.beginPath();
+        this.ctx.font = `${this.fontSize*this.sratio}px 黑体`;
+        this.ctx.fillStyle = this.color;
+        this.ctx.fillText(arr[i],this.textX2,this.textY2 + this.fontSize*this.sratio*i + this.fontSize*this.sratio);
+        this.ctx.stroke()
+        this.ctx.closePath()
+      }
+      this.points.push({
+        x: this.textX2,
+        y: this.textY2,
+        text: arr,
+        index: obj.index,
+        type: obj.type,
+        scale: obj.scale,
+        id: obj.id,
+        color: obj.color,
+        size: obj.size,
+      })
+    },
+    // 画箭头
+    arrow(obj,type) {
+      obj.index = this.pageIndex
+      obj.type = 'arrow'
+      obj.scale = this.scales
+      obj.color = this.color
+      obj.border = this.lineWidth
+      obj.id = this.linkId
+      const angle = Math.atan2(this.textY - obj.y, this.textX - obj.x) * 180 / Math.PI
+      const angle1 = (angle + 20) * Math.PI / 180
+      const angle2 = (angle - 20) * Math.PI / 180
+      const topX = 30 * Math.cos(angle1)
+      const topY = 30 * Math.sin(angle1)
+      const botX = 30 * Math.cos(angle2)
+      const botY = 30 * Math.sin(angle2)
+      this.clearRect()
+      this.ctx.beginPath();
+      this.ctx.lineWidth = this.lineWidth * this.sratio
+      this.ctx.strokeStyle = this.color
+      let arrowX, arrowY
+      this.ctx.moveTo(this.textX, this.textY);
+      this.ctx.lineTo(obj.x, obj.y);
+      arrowX = obj.x + topX
+      arrowY = obj.y + topY
+      this.ctx.moveTo(arrowX, arrowY);
+      this.ctx.lineTo(obj.x, obj.y)
+      arrowX = obj.x + botX;
+      arrowY = obj.y + botY;
+      this.ctx.lineTo(arrowX, arrowY)
+      this.ctx.stroke()
+      this.ctx.closePath()
+      if(type === 'end') {
+        this.points.push({
+          x: this.textX,
+          y: this.textY,
+          x2: obj.x,
+          y2: obj.y,
+          index: obj.index,
+          type: obj.type,
+          scale: obj.scale,
+          id: obj.id,
+          color: obj.color,
+          border: obj.border,
+        })
+      }
+    },
+    // 画直线
+    straight(obj,type) {
+      obj.index = this.pageIndex
+      obj.type = 'straight'
+      obj.scale = this.scales
+      obj.color = this.color
+      obj.border = this.lineWidth
+      obj.id = this.linkId
+      this.clearRect()
       this.ctx.beginPath()
-      this.ctx.strokeStyle = 'red'
-      this.ctx.moveTo(this.startX, this.startY)
+      this.ctx.lineWidth = this.lineWidth * this.sratio
+      this.ctx.strokeStyle = this.color
+      this.ctx.moveTo(this.textX, this.textY)
       this.ctx.lineTo(obj.x, obj.y)
-      this.ctx.lineCap = 'round'
-      this.ctx.lineJoin = 'round'
+      this.ctx.stroke()
+      this.ctx.closePath()
+      if(type === 'end') {
+        this.points.push({
+          x: this.textX,
+          y: this.textY,
+          x2: obj.x,
+          y2: obj.y,
+          index: obj.index,
+          type: obj.type,
+          scale: obj.scale,
+          id: obj.id,
+          color: obj.color,
+          border: obj.border,
+        })
+      }
+    },
+    // 画圆
+    circular(obj,type) {
+      if(obj.x-this.textX <= 0) return
+      obj.index = this.pageIndex
+      obj.type = 'circular'
+      obj.scale = this.scales
+      obj.color = this.color
+      obj.border = this.lineWidth
+      obj.id = this.linkId
+      this.clearRect()
+      this.ctx.beginPath()
       this.ctx.lineWidth = this.lineWidth * this.sratio
+      this.ctx.strokeStyle = this.color
+      this.ctx.moveTo(obj.x,this.textY)
+      this.ctx.arc(this.textX, this.textY, obj.x-this.textX, 0, 2 * Math.PI, false);
       this.ctx.stroke()
       this.ctx.closePath()
-      this.points.push(obj)
+      if(type === 'end') {
+        this.points.push({
+          x: this.textX,
+          y: this.textY,
+          width: obj.x-this.textX,
+          index: obj.index,
+          type: obj.type,
+          scale: obj.scale,
+          id: obj.id,
+          color: obj.color,
+          border: obj.border,
+        })
+      }
     },
-    drawEnd (obj) {
+    // 画矩形
+    rectangle(obj,type) {
       obj.index = this.pageIndex
-      obj.start = 'end'
+      obj.type = 'rectangle'
       obj.scale = this.scales
+      obj.color = this.color
+      obj.border = this.lineWidth
+      obj.id = this.linkId
+      this.clearRect()
       this.ctx.beginPath()
-      this.ctx.strokeStyle = 'red'
-      this.ctx.moveTo(this.startX, this.startY)
-      this.ctx.lineTo(obj.x, obj.y)
-      this.ctx.lineCap = 'round'
-      this.ctx.lineJoin = 'round'
+      this.ctx.lineWidth = this.lineWidth * this.sratio
+      this.ctx.strokeStyle = this.color
+      this.ctx.rect(this.textX, this.textY, obj.x-this.textX, obj.y-this.textY);
       this.ctx.stroke()
       this.ctx.closePath()
-      this.points.push(obj)
-      this.$emit('updateData', this.points)
+      if(type === 'end') {
+        this.points.push({
+          x: this.textX,
+          y: this.textY,
+          width: obj.x-this.textX,
+          height: obj.y-this.textY,
+          index: obj.index,
+          type: obj.type,
+          scale: obj.scale,
+          id: obj.id,
+          color: obj.color,
+          border: obj.border,
+        })
+      }
     },
-    drawMove (obj) {
+    // 画线
+    line(obj) {
       obj.index = this.pageIndex
-      obj.start = 'move'
+      obj.type = 'line'
       obj.scale = this.scales
+      obj.color = this.color
+      obj.border = this.lineWidth
+      obj.id = this.linkId
       this.ctx.beginPath()
+      this.ctx.strokeStyle = this.color
+      this.ctx.lineWidth = this.lineWidth * this.sratio
       this.ctx.moveTo(this.startX, this.startY)
       this.ctx.lineTo(obj.x, obj.y)
-      this.ctx.strokeStyle = 'red'
-      this.ctx.lineWidth = this.lineWidth * this.sratio
       this.ctx.lineCap = 'round'
       this.ctx.lineJoin = 'round'
       this.ctx.stroke()
       this.ctx.closePath()
-      this.startY = obj.y
-      this.startX = obj.x
       this.points.push(obj)
     },
+    clearRect(v) {
+      const width = this.canvasStyle.widthCanvas
+      const height = this.canvasStyle.heightCanvas
+      this.ctx.clearRect(0, 0, width, height)
+      if(v) return
+      this.processing()
+    },
+    lineProcessing(data,data2,v) {
+      this.ctx.beginPath()
+      this.ctx.moveTo(data.x*this.scales/data.scale + v.x,data.y*this.scales/data.scale + v.y)
+      if(data.start !== 'end') {
+        this.ctx.lineTo(data2.x*this.scales/data2.scale + v.x, data2.y*this.scales/data2.scale + v.y)
+      }
+      this.ctx.strokeStyle = data.color
+      this.ctx.lineCap = 'round'
+      this.ctx.lineJoin = 'round'
+      this.ctx.lineWidth = data.border * this.sratio
+      this.ctx.stroke()
+      this.ctx.closePath()
+    },
+    rectangleProcessing(data,v) {
+      this.ctx.beginPath()
+      this.ctx.lineWidth = data.border * this.sratio
+      this.ctx.strokeStyle = data.color
+      this.ctx.strokeRect(data.x*this.scales/data.scale + v.x, data.y*this.scales/data.scale + v.y, data.width*this.scales/data.scale, data.height*this.scales/data.scale);
+      this.ctx.stroke()
+      this.ctx.closePath()
+    },
+    circularProcessing(data,v) {
+      this.ctx.beginPath()
+      this.ctx.lineWidth = data.border * this.sratio
+      this.ctx.strokeStyle = data.color
+      this.ctx.arc(data.x*this.scales/data.scale + v.x, data.y*this.scales/data.scale + v.y, data.width*this.scales/data.scale, 0, 2 * Math.PI, false);
+      this.ctx.stroke()
+      this.ctx.closePath()
+    },
+    straightProcessing(data,v) {
+      this.ctx.beginPath()
+      this.ctx.lineWidth = data.border * this.sratio
+      this.ctx.strokeStyle = data.color
+      this.ctx.moveTo(data.x*this.scales/data.scale + v.x, data.y*this.scales/data.scale + v.y)
+      this.ctx.lineTo(data.x2*this.scales/data.scale + v.x, data.y2*this.scales/data.scale + v.y)
+      this.ctx.stroke()
+      this.ctx.closePath()
+    },
+    arrowProcessing(data,v) {
+      const angle = Math.atan2(data.y*this.scales/data.scale - data.y2*this.scales/data.scale, data.x*this.scales/data.scale - data.x2*this.scales/data.scale) * 180 / Math.PI
+      const angle1 = (angle + 20) * Math.PI / 180
+      const angle2 = (angle - 20) * Math.PI / 180
+      const topX = 30 * Math.cos(angle1)
+      const topY = 30 * Math.sin(angle1)
+      const botX = 30 * Math.cos(angle2)
+      const botY = 30 * Math.sin(angle2)
+      this.ctx.beginPath();
+      this.ctx.lineWidth = data.border * this.sratio
+      this.ctx.strokeStyle = data.color
+      let arrowX, arrowY
+      this.ctx.moveTo(data.x2*this.scales/data.scale + v.x, data.y2*this.scales/data.scale + v.y);
+      this.ctx.lineTo(data.x*this.scales/data.scale + v.x, data.y*this.scales/data.scale + v.y);
+      arrowX = data.x2*this.scales/data.scale + topX + v.x
+      arrowY = data.y2*this.scales/data.scale + topY + v.y
+      this.ctx.moveTo(arrowX, arrowY);
+      this.ctx.lineTo(data.x2*this.scales/data.scale + v.x, data.y2*this.scales/data.scale + v.y)
+      arrowX = data.x2*this.scales/data.scale + botX + v.x;
+      arrowY = data.y2*this.scales/data.scale + botY + v.y;
+      this.ctx.lineTo(arrowX, arrowY)
+      this.ctx.stroke()
+      this.ctx.closePath()
+    },
+    textProcessing(data,v) {
+      const arr = data.text
+      for(let i = 0; i < arr.length; i++) {
+        this.ctx.beginPath();
+        this.ctx.font = `${data.size*this.sratio}px 黑体`;
+        this.ctx.fillStyle = data.color;
+        this.ctx.fillText(arr[i],data.x*this.scales/data.scale + v.x,data.y*this.scales/data.scale + v.y + data.size*this.sratio*i + data.size*this.sratio);
+        this.ctx.stroke()
+        this.ctx.closePath()
+      }
+    },
+    // 处理数据
+    processing() {
+      for(let i = 0; i < this.points.length; i++) {
+        if(this.points[i].index === this.pageIndex) {
+          if(this.points[i].type === 'line') {
+            this.lineProcessing(this.points[i],this.points[i+1],{x:0,y:0})
+          }
+          if(this.points[i].type === 'rectangle') {
+            this.rectangleProcessing(this.points[i],{x:0,y:0})
+          }
+          if(this.points[i].type === 'circular') {
+            this.circularProcessing(this.points[i],{x:0,y:0})
+          }
+          if(this.points[i].type === 'straight') {
+            this.straightProcessing(this.points[i],{x:0,y:0})
+          }
+          if(this.points[i].type === 'arrow') {
+            this.arrowProcessing(this.points[i],{x:0,y:0})
+          }
+          if(this.points[i].type === 'text') {
+            this.textProcessing(this.points[i],{x:0,y:0})
+          }
+        }
+      }
+    },
     flipLeft(e, v) {
       if (e > this.pdfPages) {
         this.pageIndex = this.pdfPages
@@ -264,6 +956,7 @@ export default {
       }
     },
     readPdf(n) {
+      this.mouse()
       if (this.source === '' || this.source === undefined || this.source === null) return
       let that = this
       if(n !== 1) that.loading = true
@@ -279,19 +972,27 @@ export default {
         that.pdfPages = pdf.numPages // 获取pdf文件的总页数
         pdf.getPage(that.pageIndex).then(function (page) {
           let canvas = document.getElementById(that.id)
+          let canvas2 = document.getElementById(`${that.id}2`)
           that.ctx = canvas.getContext('2d');
+          let ctx2 = canvas2.getContext('2d');
           let viewport = page.getViewport({scale: that.scales})
           canvas.width = viewport.width * that.sratio
           canvas.height = viewport.height * that.sratio
           canvas.style.width = viewport.width + 'px'
           canvas.style.height = viewport.height + 'px'
+          canvas2.width = viewport.width * that.sratio
+          canvas2.height = viewport.height * that.sratio
+          canvas2.style.width = viewport.width + 'px'
+          canvas2.style.height = viewport.height + 'px'
           that.canvasStyle = {
             width: viewport.width + 'px',
             height: viewport.height + 'px',
-            marginLeft: -(viewport.width / 2) + 'px'
+            marginLeft: -(viewport.width / 2) + 'px',
+            widthCanvas: viewport.width * that.sratio,
+            heightCanvas: viewport.height * that.sratio
           }
           let renderContext = {
-            canvasContext: that.ctx,
+            canvasContext: ctx2,
             viewport: viewport,
             transform: [2, 0, 0, 2, 0, 0] //这里会进行放大，解决模糊问题
           }
@@ -309,22 +1010,8 @@ export default {
             that.flipRights = false
             that.flipLefts = false
             that.oneShow = false
-            that.imgArr[that.pageIndex] = canvas.toDataURL('image/jpeg', 1)
-            for(let i = 0; i < that.points.length; i++) {
-              if(that.points[i].index === that.pageIndex) {
-                that.ctx.beginPath()
-                that.ctx.moveTo(that.points[i].x*that.scales/that.points[i].scale,that.points[i].y*that.scales/that.points[i].scale)
-                if(that.points[i].start !== 'end') {
-                  that.ctx.lineTo(that.points[i+1].x*that.scales/that.points[i].scale, that.points[i+1].y*that.scales/that.points[i].scale)
-                }
-                that.ctx.strokeStyle = 'red'
-                that.ctx.lineCap = 'round'
-                that.ctx.lineJoin = 'round'
-                that.ctx.lineWidth = that.lineWidth * that.sratio
-                that.ctx.stroke()
-                that.ctx.closePath()
-              }
-            }
+            that.imgArr[that.pageIndex] = canvas2.toDataURL('image/jpeg', 1)
+            that.processing()
           }, 1000)
         })
       })
@@ -334,21 +1021,152 @@ export default {
 </script>
 
 <style scoped>
-.cursor{
-  position: fixed;
+.set-text em{
+  width: 20px !important;
+  font-size: 12px !important;
+}
+.wrap-can-one{
+  position: absolute;
   top: 0;
   left: 0;
-  z-index: 9999;
-  width: 15px;
-  height: 15px;
-  margin-top: -7px;
-  margin-left: -7px;
-  cursor: none;
-  transition: all 0s ease-in-out;
-  background: url("data:image/png;base64,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") no-repeat 0 0;
-  background-size: 100% 100%;
+  z-index: 10;
+}
+.text-frame{
+  position: absolute;
+  z-index: 10;
+  display: inline-block;
+  line-height: 1.1;
+  user-select: none;
+  transition: all 0s;
+}
+.text-input{
+  width: 100%;
+  height: 100%;
+}
+.flip-tool{
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 200;
+  box-shadow: 0 0 10px rgba(0,0,0,.2);
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+  transition: all 0.5s;
+}
+.tool-text{
+  width: 50px;
+  background-color: #fff;
+  text-align: center;
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+  line-height: 25px;
+  cursor: pointer;
+  font-size: 12px;
+  color: rgba(198, 76, 16, 1);
+}
+.tool-list{
+  width: 50px;
+  background-color: #fff;
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+  cursor: pointer;
+  position: relative;
+  text-align: center;
+  padding: 18px 0;
+  transition: all 0.5s;
   user-select: none;
 }
+.tool-item{
+  padding: 18px 0;
+  position: relative;
+}
+.tool-item-img{
+  overflow: hidden;
+}
+.tool-item img {
+  width: 30%;
+  display: block;
+  margin: 0 auto;
+}
+.tool-item:hover img{
+  filter: drop-shadow(40px 0 rgba(198, 76, 16, 1));
+  margin-left: -22px;
+}
+.tool-item-active img {
+  filter: drop-shadow(40px 0 rgba(198, 76, 16, 1));
+  margin-left: -22px;
+}
+.set {
+  position: absolute;
+  right: 40px;
+  width: 280px;
+  background-color: #fff;
+  border-radius: 10px;
+  box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.3);
+  padding: 10px;
+  z-index: 1;
+}
+
+.set-list {
+  padding: 5px 0;
+  font-size: 15px;
+}
+
+.set-list:after {
+  content: '';
+  display: block;
+  clear: both;
+}
+
+.set-list span {
+  margin-right: 10px;
+  float: left;
+}
+
+.set-list em {
+  font-style: normal;
+  font-size: 15px;
+  width: 16px;
+  display: inline-block;
+  margin-right: 10px;
+  text-align: center;
+}
+
+.set-list em:hover {
+  color: rgba(198, 76, 16, 1);
+}
+
+.set-list i {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  background-color: #000;
+  margin: 2px 10px 0 0;
+  float: left;
+  box-sizing: border-box;
+}
+
+.set-list input {
+  width: calc(100% - 60px);
+  height: 22px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  padding: 0 10px;
+  box-sizing: border-box;
+  float: left;
+}
+.but {
+  margin-left: 5px;
+  font-size: 12px;
+  background-color: transparent;
+  border: 1px solid #000;
+  border-radius: 3px;
+  padding: 2px 5px;
+  cursor: pointer;
+  min-width: 60px;
+  height: 21px;
+  margin-right: 20px;
+}
 /*动画部分*/
 /*I'm the home page动画*/
 .flip-animation-start {
@@ -399,7 +1217,7 @@ export default {
   left: 50%;
   right: 0;
   bottom: 0;
-  z-index: 1;
+  z-index: 2;
 }
 
 .wrap-one img {
@@ -436,7 +1254,7 @@ export default {
   top: 0;
   bottom: 0;
   left: 0;
-  z-index: 1;
+  z-index: 50;
   width: 8%;
 }
 
@@ -445,7 +1263,7 @@ export default {
   top: 0;
   bottom: 0;
   right: 0;
-  z-index: 1;
+  z-index: 50;
   width: 8%;
 }
 

package/src/components/seek/src/word.vue

@@ -6,11 +6,11 @@
           <div class="subject-title" :class="{'padd': item.top !== 0}" v-if="item.subject">
             <input v-if="multipleShow" type="checkbox" :checked="item.checked" @change="checkboxChange($event,index)"
                    name="check"/>
-            <span>{{ item.order ? item.order : index + 1 }}{{ item.order === ' ' ? '' : '.' }}<em
+            <span :style="{'font-weight': titleCrude?700:'normal'}">{{ item.order ? item.order : index + 1 }}{{ item.order === ' ' ? '' : '.' }}<em
                 v-html="item.title"></em><em v-if="scoreShow">({{ item.score }}分)</em>
                                <i class="subject-but" ref="subject">
                                  <b :style="{right: -item.right + 'px', top: item.top + 'px'}" ref="b">
-                                       <button class="but" :disabled="it.disabled" v-for="(it) in item.customBut" :class="{'buts-actives': it.active,'buts-disabled': it.disabled}" @click="customButTap(it,item)">{{ it.active? it.nameActive: it.name }}</button>
+                                       <button class="but" :disabled="it.disabled" v-for="(it) in item.customBut" :class="{'buts-actives': it.active&&it.butStart,'buts-disabled': it.disabled}" @click="customButTap(it,item)">{{ it.active? it.nameActive: it.name }}</button>
                                    </b>
                                </i>
                            </span>
@@ -20,7 +20,7 @@
           <div v-for="(it,ind) in item.alist">
             <div v-if="it.annexType === '0'">
               <div class="subject-html-title">{{ titleText }}{{ ind + 1 }}</div>
-              <div class="subject-html-cont" v-html="annexHtml(it.annexContent)"></div>
+              <div class="subject-html-cont" v-html="it.annexContent"></div>
             </div>
           </div>
         </div>
@@ -86,6 +86,10 @@ export default {
       type: Boolean,
       default: false
     },
+    titleCrude: {
+      type: Boolean,
+      default: false
+    },
   },
   watch: {
     data: {
@@ -139,9 +143,6 @@ export default {
         })
       })
     },
-    annexHtml(x) {
-      return json2html({node: "root", child: typeof x === 'string' ? JSON.parse(x) : x})
-    },
     init() {
       const val = JSON.parse(JSON.stringify(this.data))
       this.value = val.map((item, index) => { // 转换html
@@ -151,6 +152,12 @@ export default {
         item.open = item.open !== undefined ? item.open : true
         item.error = item.error !== undefined ? item.error : false
         item.subject = item.subject !== undefined ? item.subject : true
+        if (item.alist) {
+          item.alist.map(x => {
+            x.annexContent = json2html({node: "root", child: typeof x.annexContent === 'string' ? JSON.parse(x.annexContent) : x.annexContent})
+            return x
+          })
+        }
         if (item.testKey) {
           item.testKey = typeof item.testKey === 'string' ? JSON.parse(item.testKey) : item.testKey
           let judge = item?.judgeAnswer

package/src/components/word/src/word.vue

@@ -20,7 +20,7 @@
           <div class="subject-title" v-if="item.subject">
             <input v-if="multipleShow" type="checkbox" :checked="item.checked" @change="checkboxChange($event,index)"
                    name="check"/>
-            <span>{{ item.order ? item.order : index + 1 }}{{ item.order === ' ' ? '' : '.' }}<em
+            <span :style="{'font-weight': titleCrude?700:'normal'}">{{ item.order ? item.order : index + 1 }}{{ item.order === ' ' ? '' : '.' }}<em
                 v-html="item.title"></em><em v-if="scoreShow">({{ item.score }}分)</em>
                                <i class="subject-but" ref="subject">
                                    <b :style="{right: -item.right + 'px', top: item.top + 'px'}" v-if="butShow" ref="b">
@@ -228,7 +228,11 @@ export default {
     customBut:{
       type: Array,
       default: []
-    }
+    },
+    titleCrude: {
+      type: Boolean,
+      default: false
+    },
   },
   watch: {
     data: {
@@ -297,7 +301,7 @@ export default {
         item.error = item.error !== undefined ? item.error : false
         if (item.alist) {
           item.alist.map(x => {
-            x.annexContent = json2html({node: "root", child: JSON.parse(x.annexContent)})
+            x.annexContent = json2html({node: "root", child: typeof x.annexContent === 'string' ? JSON.parse(x.annexContent) : x.annexContent})
             return x
           })
         }

package/src/index.js

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