zydx-plus 1.32.310 → 1.32.311

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zydx-plus",
-  "version": "1.32.310",
+  "version": "1.32.311",
   "description": "Vue.js",
   "main": "src/index.js",
   "files": [
@@ -40,7 +40,6 @@
     "@tiptap/extension-link": "^2.0.3",
     "@vue-office/docx": "^1.1.3",
     "@vue-office/excel": "^1.1.3",
-    "fabric": "^5.3.0",
     "js-export-word": "^1.0.5",
     "js-audio-recorder": "^1.0.7"
   },

package/src/index.js

@@ -27,7 +27,6 @@ import time from './components/time/index';
 import preface from './components/preface/index';
 import choice from './components/choice/index';
 import word from './components/word/index';
-import sketchpad from './components/sketchpad/index';
 import pictureViewer from './components/pictureViewer/index';
 import lessonTemplate from './components/lesson_template/index';
 import paper from './components/word2/index';
@@ -63,7 +62,6 @@ const components = [
     preface,
     choice,
     word,
-    sketchpad,
     pictureViewer,
     lessonTemplate,
     paper,
@@ -81,7 +79,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.32.309',
+    version: '1.32.311',
     install,
     Calendar,
     Message,
@@ -112,7 +110,6 @@ export default {
     preface,
     choice,
     word,
-    sketchpad,
     pictureViewer,
     lessonTemplate,
     paper,

package/src/components/sketchpad/index.js

@@ -1,6 +0,0 @@
-import main from './src/sketchpad';
-
-main.install = function(Vue) {
-    Vue.component(main.name, main);
-};
-export default main;

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

@@ -1,525 +0,0 @@
-<template>
-  <div class="sketchpad" ref="sketchpad">
-    <canvas :id="id"></canvas>
-    <div class="tool"
-         @mousedown.stop="mousedown"
-         :style="{transform: `translate(${x}px, ${y}px)`}">
-      <div class="tool-list" @click.stop="set">
-        <img class="img-1" src="./img/shezi.png" alt=""/>
-        <div v-if="setShow" class="set">
-          <div class="set-list">
-            <span>线条粗细</span>
-            <em v-for="(item,index) in strokeData" @click="strokeTap(item)">{{ item }}</em>
-          </div>
-          <div class="set-list">
-            <span>线条颜色</span>
-            <i v-for="(item,index) in strokeColor" @click="strokeColTap(item)" :style="{'background-color': item}"></i>
-          </div>
-        </div>
-      </div>
-      <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 class="img-3" src="./img/huabi.png" alt=""/>
-      </div>
-      <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 class="img-5" src="./img/wenzi.png" alt=""/>
-        <div v-if="textShow" class="set">
-          <div class="set-list">
-            <span>字号</span>
-            <em style="font-size: 13px;" v-for="(item,index) in textData" @click.stop="sizeTap(item)">{{ item }}</em>
-          </div>
-          <div class="set-list" @click.stop="textInputTap">
-            <span>内容</span>
-            <input ref="textInput" type="text" v-model="text"/>
-          </div>
-          <div class="set-list set-right">
-            <button class="but" @click="textBox">确认</button>
-          </div>
-        </div>
-      </div>
-      <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 class="img-7" src="./img/jian.png" alt=""/>
-      </div>
-      <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 class="img-9" src="./img/baocun.png" alt=""/>
-      </div>
-      <div class="tool-list" @click.stop="clear()">
-        <img class="img-10" src="./img/xiangpi.png" alt=""/>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import {fabric} from 'fabric'
-
-export default {
-  name: "zydx-sketchpad",
-  data() {
-    return {
-      canvas: null,
-      strokeWidth: 2, // 线条粗细
-      color: '#000', // 线条颜色
-      line: null, // 线条
-      isDown: false, // 是否按下
-      state: null, // 状态
-      rect: null, // 矩形
-      circle: null, // 圆形
-      fontSize: 14, // 字体大小
-      setShow: false, // 设置
-      strokeData: ['1', '2', '3', '4', '5', '6', '7'], // 画笔数据
-      strokeColor: ['#000', '#f00', '#0f0', '#00f', '#f0f', '#ff0', '#0ff'], // 画笔颜色
-      textShow: false, // 文本
-      textData: ['14', '16', '18', '20', '22', '24', '28', '30'], // 文本数据
-      text: '',
-      id: null,
-      left: 0,
-      top: 0,
-      isMove: false,
-      x: 0,
-      y: 0,
-      offLeft: 0,
-      offTop: 0,
-      scrollTop: 0
-    }
-  },
-  props: {
-    data: {
-      type: Object,
-      default: () => {
-      }
-    },
-    width: {
-      type: Number,
-      default: 800
-    },
-    height: {
-      type: Number,
-      default: 800
-    }
-  },
-  emits: ['save'],
-  watch: {
-    data: {
-      handler(val) {
-        this.canvas.loadFromJSON(val)
-      },
-      deep: true
-    }
-  },
-  mounted() {
-    // 生成随机id
-    this.id = Math.random().toString(36).substr(2)
-    setTimeout(() => {
-      this.init()
-    }, 0)
-    window.addEventListener('keydown', this.handleKeyEvent)
-    document.addEventListener('mousemove', (event) => {
-      if (!this.isMove) return
-      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
-    })
-  },
-  beforeDestroy() {
-    window.removeEventListener('keydown', this.handleKeyEvent)
-  },
-  methods: {
-    mouse() {
-      this.state = null
-      this.canvas.isDrawingMode = false
-    },
-    textInputTap() {
-      this.$refs.textInput.focus()
-    },
-    mousedown(event) {
-      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 = x
-      this.top = y
-      this.isMove = true
-    },
-    sizeTap(v) {
-      this.fontSize = Number(v)
-    },
-    addTextBox() {
-      this.state = 'text'
-      this.setShow = false
-      this.textShow = !this.textShow
-    },
-    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
-      this.setShow = !this.setShow
-    },
-    init() {
-      this.canvas = new fabric.Canvas(this.id, {
-        isDrawingMode: false,
-        width: this.width,
-        height: this.height,
-      });
-      this.canvas.selectionColor = "rgba(255,255,255,0)";
-      this.canvas.loadFromJSON(this.data)
-      this.y = (this.height / 2) - 203
-    },
-    // 画笔
-    brush() {
-      this.state = 'brush'
-      this.canvas.isDrawingMode = !this.canvas.isDrawingMode
-      this.canvas.freeDrawingBrush.width = this.strokeWidth
-      this.canvas.freeDrawingBrush.color = this.color
-    },
-    // 直线
-    addLine() {
-      this.canvas.isDrawingMode = false
-      this.state = 'line'
-      const id = Date.now()
-      this.canvas.on('mouse:down', (o) => {
-        if (o.target !== null) return
-        if (this.state !== 'line') return
-        this.isDown = true
-        const pointer = this.canvas.getPointer(o.e)
-        const points = [pointer.x, pointer.y, pointer.x, pointer.y]
-        this.line = new fabric.Line(points, {
-          id: id,
-          strokeWidth: this.strokeWidth,
-          fill: this.color,
-          stroke: this.color,
-          originX: 'center',
-          originY: 'center'
-        })
-        this.canvas.add(this.line)
-      })
-      this.canvas.on('mouse:move', (o) => {
-        if (this.state !== 'line') return
-        if (!this.isDown) return
-        const pointer = this.canvas.getPointer(o.e)
-        this.line.set({x2: pointer.x, y2: pointer.y})
-        this.canvas.renderAll()
-      })
-
-      this.canvas.on('mouse:up', (o) => {
-        this.isDown = false
-        this.line?.setCoords()
-      })
-    },
-    // 矩形
-    rectangle() {
-      this.canvas.isDrawingMode = false
-      this.state = 'rectangle'
-      const id = Date.now()
-      let origX, origY
-      this.canvas.on('mouse:down', (o) => {
-        if (o.target !== null) return
-        if (this.state !== 'rectangle') return
-        this.isDown = true
-        let pointer = this.canvas.getPointer(o.e)
-        origX = pointer.x
-        origY = pointer.y
-        this.rect = new fabric.Rect({
-          id: id,
-          left: origX,
-          top: origY,
-          originX: 'left',
-          originY: 'top',
-          width: pointer.x - origX,
-          height: pointer.y - origY,
-          angle: 0,
-          fill: '',
-          stroke: this.color,
-          strokeWidth: this.strokeWidth
-        })
-        this.canvas.add(this.rect)
-      })
-      this.canvas.on('mouse:move', (o) => {
-        if (this.state !== 'rectangle') return
-        if (!this.isDown) return
-        let pointer = this.canvas.getPointer(o.e)
-
-        if (origX > pointer.x) {
-          this.rect.set({left: Math.abs(pointer.x)})
-        }
-        if (origY > pointer.y) {
-          this.rect.set({top: Math.abs(pointer.y)})
-        }
-        this.rect.set({width: Math.abs(origX - pointer.x)})
-        this.rect.set({height: Math.abs(origY - pointer.y)})
-        this.canvas.renderAll()
-      })
-      this.canvas.on('mouse:up', (o) => {
-        this.isDown = false
-        this.rect?.setCoords()
-      })
-    },
-    // 圆形
-    rotundity() {
-      this.canvas.isDrawingMode = false
-      this.state = 'rotundity'
-      let origX, origY
-      this.canvas.on('mouse:down', (o) => {
-        if (o.target !== null) return
-        if (this.state !== 'rotundity') return
-        this.isDown = true
-        let pointer = this.canvas.getPointer(o.e)
-        origX = pointer.x
-        origY = pointer.y
-        this.circle = new fabric.Circle({
-          left: origX,
-          top: origY,
-          originX: 'left',
-          originY: 'top',
-          radius: pointer.x - origX,
-          angle: 0,
-          fill: '',
-          stroke: this.color,
-          strokeWidth: this.strokeWidth
-        })
-        this.canvas.add(this.circle)
-      })
-      this.canvas.on('mouse:move', (o) => {
-        if (this.state !== 'rotundity') return
-        if (!this.isDown) return
-        let pointer = this.canvas.getPointer(o.e)
-        let radius =
-            Math.max(
-                Math.abs(origY - pointer.y),
-                Math.abs(origX - pointer.x)
-            ) / 2
-        if (radius > this.circle.strokeWidth) {
-          radius -= this.circle.strokeWidth / 2
-        }
-        this.circle.set({radius: radius})
-
-        if (origX > pointer.x) {
-          this.circle.set({originX: 'right'})
-        } else {
-          this.circle.set({originX: 'left'})
-        }
-        if (origY > pointer.y) {
-          this.circle.set({originY: 'bottom'})
-        } else {
-          this.circle.set({originY: 'top'})
-        }
-        this.canvas.renderAll()
-      })
-      this.canvas.on('mouse:up', () => {
-        this.isDown = false
-        this.circle?.setCoords()
-      })
-    },
-    // 箭头
-    arrow() {
-      const id = Date.now()
-      const triangle = new fabric.Triangle({
-        width: 9,
-        height: 15,
-        fill: 'black',
-        left: 150,
-        top: 137,
-        angle: 90
-      })
-      const line = new fabric.Rect({
-        left: 100,
-        top: 140,
-        width: 40,
-        height: 3,
-        fill: 'black',
-        originX: 'left',
-        originY: 'top',
-        centeredRotation: true
-      })
-      const arrow = new fabric.Group([line, triangle], {
-        id: id,
-        left: this.canvas.width / 2,
-        top: this.canvas.height / 2,
-        angle: 0
-      })
-      this.canvas.add(arrow)
-    },
-    // 文本框
-    textBox() {
-      const id = Date.now()
-      this.textbox = new fabric.Textbox(this.text, {
-        id: id,
-        top: 200,
-        left: 200,
-        width: 10,
-        fill: this.color,
-        fontSize: this.fontSize,
-        color: this.color,
-        fontWeight: 400,
-        lineHeight: 1.5,
-        fontFamily: '微软雅黑',
-        textDecoration: 'none',
-        textAlign: 'left'
-      })
-      this.canvas.add(this.textbox)
-    },
-    save() {
-      this.$emit('save', this.canvas.toJSON())
-    },
-    clear() {
-      this.canvas.clear()
-    },
-    handleKeyEvent(e) {
-      const {key} = e
-      if (key === 'Backspace' || key === 'Delete') {
-        const el = this.canvas.getActiveObject()
-        if (el) this.canvas.remove(el)
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-.sketchpad {
-  position: relative;
-}
-
-.tool {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 1;
-  width: 50px;
-  padding: 15px;
-  border-radius: 10px;
-  box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.3);
-  box-sizing: border-box;
-  background: #fff;
-  transition-property: transform;
-  transition-duration: 0ms;
-  transition-timing-function: linear;
-  transition-delay: 0ms;
-  transform: translate(0px, 0px);
-  cursor: move;
-  user-select: none;
-}
-
-.tool-list {
-  width: 100%;
-  margin-bottom: 20px;
-  cursor: pointer;
-  position: relative;
-}
-
-.tool-list:last-child {
-  margin-bottom: 0;
-}
-
-.tool-list img {
-  width: 100%;
-}
-
-.set {
-  position: absolute;
-  top: 0;
-  left: 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: #5daf34;
-}
-
-.set-list i {
-  display: inline-block;
-  width: 16px;
-  height: 16px;
-  background-color: #000;
-  margin: 2px 10px 0 0;
-  float: left;
-}
-
-.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;
-}
-
-.set-right {
-  text-align: right;
-}
-</style>