zydx-plus 1.33.431 → 1.33.432

package/package.json

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

package/src/components/editor2/src/editor.vue

@@ -136,6 +136,7 @@
         </div>
       </div>
     </div>
+    <Paint v-if="paintShow" :title="paintText()" @exportImg="exportImg" :url="uploadImage?.url" @cancel="paintCancel"></Paint>
   </div>
 </template>
 <script>
@@ -155,6 +156,7 @@ import {CustomImage} from "./image-size";
 import {Contenteditable} from "./contenteditable";
 import svgs from "./level";
 import Mess from '../../tipBox/index'
+import Paint from '../../paint/src/paint'
 import alignmentModeCenter from './img/center.png'
 import alignmentModeLeft from './img/left.png'
 import alignmentModeRight from './img/right.png'
@@ -164,7 +166,8 @@ export default {
   components: {
     EditorContent,
     BubbleMenu,
-    svgs
+    svgs,
+    Paint
   },
   data() {
     return {
@@ -198,6 +201,7 @@ export default {
       editorRef: null,
       imgSizeVal: '',
       currentImgDom: {},
+      paintShow: false
     }
   },
   beforeUnmount() {
@@ -414,6 +418,18 @@ export default {
     })
   },
   methods: {
+    exportImg(e) {
+      this.uploadFile(e, this.uploadImage).then(r => {
+        this.paintShow = false
+        this.imgHtml(r.data)
+      })
+    },
+    paintText() {
+      return this.toolbar.filter(x => x.key === 'paint')[0]?.title
+    },
+    paintCancel() {
+      this.paintShow = false
+    },
     changeAlign(tag) {
         // 图片对齐方式
         this.editor.chain().setTextAlign(tag).run()
@@ -692,7 +708,6 @@ export default {
       })
     },
     upload(e, v) { // 上传文件
-        console.log('ssdfasf');
         const file = e.target.files[0]
       if (this.uploadType) {
         if (v === 'uploadAtt') {
@@ -726,7 +741,6 @@ export default {
     },
     imgHtml(data) { // 插入图片
       setTimeout(() => {
-        console.log('uploadImage100');
         const url = this.uploadImage.url + data
         const cla = this.randomId()
         const html = `<p class="imgCont ${cla}"><img src="${url}" alt="" width=""/></p>`
@@ -847,6 +861,7 @@ export default {
         this.editor.chain().focus().setFontSize('16px').setTextAlign('right').run()
         this.editor.chain().focus().setBold().run()
       }
+      if(v === 'paint') this.paintShow = true
     },
     getRandomCode(length) {
       if (length > 0) {
@@ -867,6 +882,7 @@ export default {
 </script>
 
 <style scoped>
+
   :deep(.w_100) {
     width: 100% !important;
   }

package/src/components/paint/index.js

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

package/src/components/paint/src/paint.vue

@@ -0,0 +1,787 @@
+<template>
+  <div class="paint" :id="ids">
+    <div class="paint-title">
+      <span>{{ title }}</span>
+      <div>
+        <button class="buts" @click="exportTap">确定</button>
+        <button class="buts" @click="cancel">取消</button>
+      </div>
+    </div>
+    <div class="paint-cont">
+      <Sketchpad ref="sketchpad"></Sketchpad>
+    </div>
+    <div class="tool-cont" :style="{left: left + 'px', top: top + 'px'}">
+      <div class="tool"
+           @mousedown.stop="mousedown"
+           @mouseup.stop="mouseup"
+           :id="ids + 'tool'">
+        <div class="tool-item" v-for="(item,index) in toolArr">
+          <div class="tool-img" :class="{'tool-arr-act': item.id === toolId}" :data-index="index">
+            <img :src="item.img" alt=""/>
+          </div>
+          <div class="prompt">{{ item.name }}</div>
+        </div>
+      </div>
+      <div class="tool-pop" v-if="toolMenu" :style="{bottom: toolTop + 'px', left: toolLeft + 'px'}">
+        <!--颜色-->
+        <div class="tool-pop-cont">
+          <div class="shape" v-if="['shape'].includes(this.toolId)">
+            <div class="tool-color">
+              <div class="tool-color-item" v-for="(item,index) in shapeData" @click="shapeTap(index)">
+                <div class="tool-color-select" :class="{'tool-active': shapeIndex === index}" :title="item.name">
+                  <img :src="item.img" alt=""/>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="link"></div>
+          <div class="tool-color">
+            <div class="tool-color-item" v-for="(item,index) in colorData" @click="colorTap(index)">
+              <div class="tool-color-select" :class="{'tool-active': colorIndex === index}" :title="item.name">
+                <div class="tool-color-col" :style="{'background-color': item.color}"></div>
+              </div>
+            </div>
+          </div>
+          <div class="link"></div>
+          <!--大小-->
+          <div class="tool-color" v-if="['pen','shape','text'].includes(this.toolId)">
+            <div class="tool-color-item" @click="sizeTap(index)" v-for="(item,index) in sizeData">
+              <div class="tool-color-select" :class="{'tool-active': sizeIndex === index}" :title="item.name">
+                <div class="tool-color-text">{{ item.text }}</div>
+              </div>
+            </div>
+          </div>
+          <div class="tool-color" v-if="['pen','shape'].includes(this.toolId)">
+            <div class="tool-color-item" @click="linkTap(index)" v-for="(item,index) in linkData">
+              <div class="tool-color-select" :class="{'tool-active': linkIndex === index}" :title="item.name">
+                <img :src="item.img" alt=""/>
+              </div>
+            </div>
+          </div>
+          <div class="tool-color" v-if="['shape'].includes(this.toolId)">
+            <div class="tool-color-item" @click="fillTap(index)" v-for="(item,index) in fillData">
+              <div class="tool-color-select" :class="{'tool-active': fillIndex === index}" :title="item.name">
+                <img :src="item.img" alt=""/>
+              </div>
+            </div>
+          </div>
+          <div class="tool-color" v-if="['text'].includes(this.toolId)">
+            <div class="tool-color-item" @click="fontTap(index)" v-for="(item,index) in fontData">
+              <div class="tool-color-select" :class="{'tool-active': fontIndex === index}" :title="item.name">
+                <img :src="item.img" alt=""/>
+              </div>
+            </div>
+          </div>
+<!--          <div class="tool-color" v-if="['text'].includes(this.toolId)">-->
+<!--            <div class="tool-color-item" @click="aligTap(index)" v-for="(item,index) in aligData">-->
+<!--              <div class="tool-color-select" :class="{'tool-active': aligIndex === index}" :title="item.name">-->
+<!--                <img :src="item.img" alt=""/>-->
+<!--              </div>-->
+<!--            </div>-->
+<!--          </div>-->
+        </div>
+      </div>
+    </div>
+    <dragPopup v-if="show" :dragStatus="false" :minimizeCir="false" :enlargeShow="false" @close="close">
+      <template #content>
+        <div class="can">
+          <div class="can-cont" :id="ids + 'cont'">
+            <canvas :id="ids + 'can'"></canvas>
+          </div>
+          <div class="can-but">
+            <div class="can-but-cont">
+              <span @click="reset">重置</span>
+              <span @click="distinguish">{{ distinguishText }}</span>
+            </div>
+          </div>
+        </div>
+        <div class="can-pop" v-if="show2">
+          <div class="can-pop-cont">
+            <img ref="canPopCont" :src="appData" alt="" />
+          </div>
+          <div class="can-pop-but-cont">
+            <div class="can-pop-but" @click="addImage">确认</div>
+          </div>
+        </div>
+      </template>
+    </dragPopup>
+  </div>
+</template>
+
+<script>
+import Sketchpad from '../../sketchpad/src/sketchpad'
+import dragPopup from '../../dragPopup/src/dragPopup'
+
+let stayTime = 0
+let timer = null
+export default {
+  components: {Sketchpad, dragPopup},
+  data() {
+    return {
+      show: false,
+      show2: false,
+      distinguishText: '识别',
+      colorIndex: 0,
+      sizeIndex: 0,
+      linkIndex: 0,
+      fillIndex: 0,
+      shapeIndex: 0,
+      fontIndex: 0,
+      aligIndex: 0,
+      toolArr: [
+        {id: 'choice', img: require('../src/img/huaban.png'), name: '选择'},
+        {id: 'pen', img: require('../src/img/bi.png'), name: '画笔'},
+        {id: 'shape', img: require('../src/img/tuxing.png'), name: '形状'},
+        {id: 'text', img: require('../src/img/wenzi.png'), name: '文字'},
+        {id: 'formula', img: require('../src/img/gongsi.png'), name: '公式'},
+        {id: 'rubber', img: require('../src/img/shanchu.png'), name: '橡皮'},
+        {id: 'clear', img: require('../src/img/qingchu.png'), name: '清屏'},
+      ],
+      colorData: [
+        {color: 'rgb(29, 29, 29)', name: '颜色-黑色', id: 'black'},
+        {color: 'rgb(159, 168, 178)', name: '颜色-灰色', id: 'grey'},
+        {color: 'rgb(224, 133, 244)', name: '颜色-浅紫色', id: 'light-violet'},
+        {color: 'rgb(174, 62, 201)', name: '颜色-紫色', id: 'violet'},
+        {color: 'rgb(68, 101, 233)', name: '颜色-蓝色', id: 'blue'},
+        {color: 'rgb(75, 161, 241)', name: '颜色-浅蓝色', id: 'light-blue'},
+        {color: 'rgb(241, 172, 75)', name: '颜色-黄色', id: 'yellow'},
+        {color: 'rgb(225, 105, 25)', name: '颜色-橙色', id: 'orange'},
+        {color: 'rgb(9, 146, 104)', name: '颜色-绿色', id: 'green'},
+        {color: 'rgb(76, 176, 94)', name: '颜色-浅绿色', id: 'light-green'},
+        {color: 'rgb(248, 119, 119)', name: '颜色-浅红色', id: 'light-red'},
+        {color: 'rgb(224, 49, 49)', name: '颜色-红色', id: 'red'},
+      ],
+      sizeData: [
+        {text: 'S', name: '大小-小', id: 's'},
+        {text: 'M', name: '大小-中', id: 'm'},
+        {text: 'L', name: '大小-大', id: 'l'},
+        {text: 'XL', name: '大小-加大', id: 'xl'},
+      ],
+      linkData: [
+        {img: require('../src/img/handwriting.png'), name: '划线-画笔', id: 'draw'},
+        {img: require('../src/img/virtual.png'), name: '划线-虚线', id: 'dashed'},
+        {img: require('../src/img/virtualRound.png'), name: '划线-虚点', id: 'dotted'},
+        {img: require('../src/img/lines.png'), name: '划线-实心', id: 'solid'},
+      ],
+      fillData: [
+        {img: require('../src/img/wu.png'), name: '填充-无', id: 'none'},
+        {img: require('../src/img/ban.png'), name: '填充-半填充', id: 'semi'},
+        {img: require('../src/img/quan.png'), name: '填充-全填充', id: 'solid'},
+        {img: require('../src/img/tuan.png'), name: '填充-图案', id: 'pattern'},
+      ],
+      fontData: [
+        {img: require('../src/img/case1.png'), name: '字体-画笔', id: 'draw'},
+        {img: require('../src/img/case.png'), name: '字体-无衬线', id: 'sans'},
+        {img: require('../src/img/case2.png'), name: '字体-衬线', id: 'serif'},
+        {img: require('../src/img/case3.png'), name: '字体-黑白', id: 'mono'},
+      ],
+      aligData: [
+        {img: require('../src/img/zuo.png'), name: '对齐-左对齐', id: 'start'},
+        {img: require('../src/img/zhong.png'), name: '对齐-居中', id: 'middle'},
+        {img: require('../src/img/you.png'), name: '对齐-右对齐', id: 'end'}
+      ],
+      shapeData: [
+        {img: require('../src/img/yuan.png'), name: '形状-圆', id: 'ellipse'},
+        {img: require('../src/img/sanjiao.png'), name: '形状-三角形', id: 'triangle'},
+        {img: require('../src/img/fang.png'), name: '形状-矩形', id: 'rectangle'},
+        {img: require('../src/img/lingxing.png'), name: '形状-菱形', id: 'rhombus'},
+        {img: require('../src/img/liubian.png'), name: '形状-六边形', id: 'hexagon'},
+        {img: require('../src/img/wujiao.png'), name: '形状-五角星', id: 'star'},
+        {img: require('../src/img/tixing.png'), name: '形状-梯形', id: 'trapezoid'},
+        {img: require('../src/img/yunduo.png'), name: '形状-云朵', id: 'cloud'},
+      ],
+      left: 0,
+      top: 0,
+      ids: null,
+      pressDown: false,
+      leftOffset: 0,
+      topOffset: '',
+      toolMenu: false,
+      toolTop: 0,
+      toolLeft: -160,
+      toolIndex: 0,
+      toolId: '',
+      num: '',
+      ctx: null,
+      canvasEle: null,
+      appData: ''
+    }
+  },
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    url: {
+      type: String,
+      default: ''
+    }
+  },
+  emits: ['cancel','exportImg'],
+  created() {
+    this.ids = this.randomId()
+  },
+  mounted() {
+    // 计算工具栏初始位置
+    const paint = document.getElementById(this.ids)
+    const tool = document.getElementById(this.ids + 'tool')
+    this.left = paint.offsetLeft + paint.offsetWidth - tool.offsetWidth - 20
+    this.top = paint.offsetTop + paint.offsetHeight / 2 - tool.offsetHeight / 2
+    // 绑定鼠标抬起事件
+    document.addEventListener('mouseup', this.mouseup)
+    // 绑定鼠标移动事件
+    document.addEventListener('mousemove', this.mousemove)
+  },
+  methods: {
+    exportTap() {
+      this.$refs.sketchpad.exportImg().then(res => {
+        this.$emit('exportImg', res)
+      })
+    },
+    // 添加公式图片
+    addImage() {
+      this.show = false
+      this.show2 = false
+      this.$refs.sketchpad.insertPicture({
+        width: this.$refs.canPopCont.offsetWidth,
+        height: this.$refs.canPopCont.offsetHeight,
+        src: this.appData
+      })
+    },
+    colorTap(i) {
+      this.colorIndex = i
+      this.toolTap()
+    },
+    sizeTap(i) {
+      this.sizeIndex = i
+      this.toolTap()
+    },
+    linkTap(i) {
+      this.linkIndex = i
+      this.toolTap()
+    },
+    fillTap(i) {
+      this.fillIndex = i
+      this.toolTap()
+    },
+    shapeTap(i) {
+      this.shapeIndex = i
+      this.toolTap()
+    },
+    fontTap(i) {
+      this.fontIndex = i
+      this.toolTap()
+    },
+    aligTap(i) {
+      this.aligIndex = i
+      this.toolTap()
+    },
+    toolTap() {
+      if(this.toolId === 'choice') {
+        this.$refs.sketchpad.select()
+      }
+      // 橡皮
+      if (this.toolId === 'clear') {
+        this.$refs.sketchpad.clear()
+      }
+      // 橡皮
+      if (this.toolId === 'rubber') {
+        this.$refs.sketchpad.eraser()
+      }
+      // 文字
+      if (this.toolId === 'text') {
+        this.$refs.sketchpad.text({
+          color: this.colorData[this.colorIndex].id,
+          size: this.sizeData[this.sizeIndex].id,
+          font: this.fontData[this.fontIndex].id
+        })
+      }
+      // 画笔
+      if (this.toolId === 'pen') {
+        this.$refs.sketchpad.draw({
+          color: this.colorData[this.colorIndex].id,
+          size: this.sizeData[this.sizeIndex].id,
+          dash: this.linkData[this.linkIndex].id
+        })
+      }
+      // 填充
+      if (this.toolId === 'shape') {
+        const pam = {
+          color: this.colorData[this.colorIndex].id,
+          size: this.sizeData[this.sizeIndex].id,
+          dash: this.linkData[this.linkIndex].id,
+          fill: this.fillData[this.fillIndex].id
+        }
+        if(this.shapeData[this.shapeIndex].id === 'ellipse') this.$refs.sketchpad.ellipse(pam)
+        if(this.shapeData[this.shapeIndex].id === 'triangle') this.$refs.sketchpad.triangle(pam)
+        if(this.shapeData[this.shapeIndex].id === 'rectangle') this.$refs.sketchpad.rectangle(pam)
+        if(this.shapeData[this.shapeIndex].id === 'rhombus') this.$refs.sketchpad.rhombus(pam)
+        if(this.shapeData[this.shapeIndex].id === 'hexagon') this.$refs.sketchpad.hexagon(pam)
+        if(this.shapeData[this.shapeIndex].id === 'star') this.$refs.sketchpad.star(pam)
+        if(this.shapeData[this.shapeIndex].id === 'trapezoid') this.$refs.sketchpad.trapezoid(pam)
+        if(this.shapeData[this.shapeIndex].id === 'cloud') this.$refs.sketchpad.cloud(pam)
+      }
+      // 公式
+      if (this.toolId === 'formula') {
+        this.show = !this.show
+        this.show2 = false
+        setTimeout(() => {
+          this.link() // 画线
+        }, 0)
+      }
+    },
+    dataURLtoBlob(dataurl) {
+      let arr = dataurl.split(',');
+      let mime = arr[0].match(/:(.*?);/)[1];
+      let bstr = atob(arr[1]);
+      let n = bstr.length;
+      let u8arr = new Uint8Array(n);
+      while (n--) {
+        u8arr[n] = bstr.charCodeAt(n);
+      }
+      return new Blob([u8arr], {type: mime});
+    },
+    // 识别
+    distinguish() {
+      this.distinguishText = '识别中'
+      const image = this.canvasEle.toDataURL("image/png");
+      let blob = this.dataURLtoBlob(image);
+      let file = new File([blob], "t.png", {lastModified: Date.now()});
+      this.HttpRequest(file).then(r => {
+        this.appData = r
+        this.distinguishText = '识别'
+        this.show2 = true
+      })
+    },
+    HttpRequest(file) {
+      return new Promise((rl,ri) => {
+        let token = null
+        let remember = localStorage.getItem('remember')
+        if (remember === '1') {
+          token = localStorage.getItem('sessionId')
+        } else {
+          token = sessionStorage.getItem('sessionId')
+        }
+        const xhr = new XMLHttpRequest()
+        let formData = new FormData();
+        formData.append('file', file);
+        xhr.open('POST', 'https://192.168.8.81:8081/zydx/latex/get')
+        xhr.setRequestHeader('Authorization', '276b6213-5937-49bd-9019-498ddb4dfd4f')
+        // xhr.open('GET', '/zydx/latex/get')
+        // xhr.setRequestHeader('Authorization', token)
+        this.error = true
+        xhr.onreadystatechange = () => {
+          if (xhr.readyState === 4) {
+            if (xhr.status === 200) {
+              rl(`${this.url}${JSON.parse(xhr.responseText).data}`)
+            }
+          }
+        }
+        xhr.send(formData)
+      })
+    },
+    // 清屏
+    reset() {
+      this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
+    },
+    // 画线
+    link() {
+      this.canvasEle = document.getElementById(this.ids + 'can')
+      const cont = document.getElementById(this.ids + 'cont')
+      this.ctx = this.canvasEle.getContext('2d')
+      this.canvasEle.width = cont.offsetWidth;
+      this.canvasEle.height = cont.offsetHeight;
+      let isDrawing = false;
+      let x = 0;
+      let y = 0;
+      this.canvasEle.addEventListener("mousedown", (event) => {
+        x = event.offsetX;
+        y = event.offsetY;
+        isDrawing = true;
+      });
+
+      this.canvasEle.addEventListener("mousemove", (event) => {
+        if (isDrawing) {
+          this.drawLine(this.ctx, x, y, event.offsetX, event.offsetY);
+          x = event.offsetX;
+          y = event.offsetY;
+        }
+      });
+
+      this.canvasEle.addEventListener("mouseup", (event) => {
+        this.drawLine(this.ctx, x, y, event.offsetX, event.offsetY);
+        x = 0;
+        y = 0;
+        isDrawing = false;
+      })
+    },
+    drawLine(ctx, x, y, lx, ly) {
+      ctx.beginPath()
+      ctx.strokeStyle = '#000'
+      ctx.lineWidth = 1
+      ctx.moveTo(x, y)
+      ctx.lineTo(lx, ly)
+      ctx.lineCap = 'round'
+      ctx.lineJoin = 'round'
+      ctx.stroke()
+      ctx.closePath()
+    },
+    close2() {
+      this.show2 = false
+    },
+    close() {
+      this.show = false
+    },
+    mousedown(e) {
+      e.preventDefault()
+      let x = e.offsetX
+      let y = e.offsetY
+      this.toolIndex = e.target.dataset.index
+      if (this.toolIndex) {
+        x = e.offsetX + 5
+        y = e.offsetY + this.toolIndex * (28 + 5)
+      }
+      this.leftOffset = x;
+      this.topOffset = y;
+      this.pressDown = true
+      timer = setInterval(() => {
+        stayTime += 100
+      }, 100)
+    },
+    mousemove(e) {
+      if (!this.pressDown) return
+      this.left = e.clientX - this.leftOffset;
+      this.top = e.clientY - this.topOffset;
+    },
+    mouseup(e) {
+      clearInterval(timer)
+      if (stayTime <= 100 && this.pressDown) { // 如果小于100就是点击事件
+        if (!this.toolArr[this.toolIndex]) {
+          stayTime = 0
+          this.pressDown = false
+          return
+        }
+        this.toolId = this.toolArr[this.toolIndex].id
+        this.toolTap()
+        const hei = e.target.parentNode.parentNode.offsetHeight
+        this.toolTop = -(Number(this.toolIndex) * (28 + 5)) - 50 + hei
+        // 判断是否显示工具菜单
+        if (['1', '2', '3'].includes(this.toolIndex)) {
+          if (this.num === this.toolIndex) {
+            this.toolMenu = !this.toolMenu
+          } else {
+            this.toolMenu = true
+          }
+          this.num = this.toolIndex
+        } else {
+          this.toolMenu = false
+        }
+      }
+      stayTime = 0
+      this.pressDown = false
+    },
+    randomId() { // 生成随机id
+      const id = Math.random().toString(36).substr(2)
+      return id.replace(/[0-9]/g, '')
+    },
+    cancel() {
+      this.$emit('cancel')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.can-pop{
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: 1200;
+  background: #fff;
+  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
+  width: 200px;
+  height: 200px;
+  margin-left: -100px;
+  margin-top: -100px;
+}
+.can-pop-cont{
+  width: 100%;
+  height: 160px;
+  display: flex;
+  align-items: center;
+}
+.can-pop-cont > img{
+  max-width: 100%;
+  max-height: 100%;
+  margin: 0 auto;
+}
+.can {
+  padding: 10px;
+  height: 100%;
+}
+.can-pop-but-cont{
+  text-align: center;
+}
+
+.can-cont {
+  width: 100%;
+  height: calc(100% - 30px);
+  border: 1px solid #ccc;
+  cursor: crosshair;
+}
+
+.can-cont canvas {
+  width: 100%;
+  height: 100%;
+}
+.can-cont img{
+  width: 100%;
+  height: 100%;
+}
+
+.can-but {
+  width: 100%;
+  height: 30px;
+  text-align: center;
+}
+
+.can-but-cont {
+  display: inline-block;
+  padding-top: 5px;
+}
+
+.can-but-cont > span, .can-pop-but {
+  display: inline-block;
+  width: 80px;
+  height: 25px;
+  background: #c64c10;
+  color: #fff;
+  line-height: 25px;
+  margin: 0 5px;
+  border-radius: 3px;
+  cursor: pointer;
+  text-align: center;
+}
+
+.link {
+  border-top: 1px solid #dedede;
+}
+
+.tool-color {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.tool-color-item {
+  width: 37px;
+  height: 37px;
+  padding: 3px;
+  box-sizing: border-box;
+}
+
+.tool-color-select {
+  border-radius: 5px;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+}
+
+.tool-color-select img {
+  width: 18px;
+  height: 18px;
+  margin: 0 auto;
+}
+
+.tool-color-text {
+  text-align: center;
+  font-weight: bold;
+  margin: 0 auto;
+  font-size: 14px;
+}
+
+.tool-color-select:hover {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+.tool-active{
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.tool-color-col {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  margin: 0 auto;
+}
+
+.tool-pop {
+  position: absolute;
+  background-color: #fff;
+  border-radius: 5px;
+  z-index: 1;
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
+  width: 150px;
+}
+
+.tool-pop-cont {
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  border-radius: 5px;
+  position: relative;
+  z-index: 3;
+}
+
+.tool-pop:before {
+  position: absolute;
+  bottom: 30px;
+  right: -6px;
+  content: '';
+  width: 0;
+  border: 6px solid #FFFFFF;
+  transform: rotate(-45deg);
+  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
+  margin-top: -5px;
+}
+
+.prompt {
+  position: absolute;
+  top: -38px;
+  left: -10px;
+  background-color: #000;
+  color: #fff;
+  border-radius: 5px;
+  padding: 5px 0;
+  width: 50px;
+  text-align: center;
+  display: none;
+}
+
+.prompt:after {
+  content: '';
+  width: 0;
+  height: 0;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-top: 6px solid #000;
+  position: absolute;
+  bottom: -6px;
+  left: 50%;
+  margin-left: -6px;
+}
+
+.tool {
+  width: 40px;
+  border-radius: 3px;
+  background: #FFFFFF;
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
+  box-sizing: border-box;
+  padding: 5px;
+  user-select: none;
+}
+
+.tool-cont {
+  position: fixed;
+  z-index: 200;
+}
+
+.tool-item {
+  width: 100%;
+  height: 28px;
+  margin-top: 5px;
+  cursor: pointer;
+  background-color: #F2F2F2;
+  border-radius: 3px;
+  position: relative;
+}
+
+.tool-item:first-child {
+  margin-top: 0;
+}
+
+.tool-item:hover {
+  background-color: #00FF00;
+}
+
+.tool-item:hover .prompt {
+  display: block;
+}
+
+.tool-img {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+}
+
+.tool-img > img {
+  width: 70%;
+  height: 70%;
+  border-radius: 3px;
+  margin: 0 auto;
+}
+.tool-arr-act{
+  background-color: #00FF00;
+  border-radius: 3px;
+}
+.tool-arr-act img{
+  filter: drop-shadow(30px 0 0 #fff);
+  position: relative;
+  left: -30px;
+}
+.tool-item:hover img {
+  filter: drop-shadow(30px 0 0 #fff);
+  position: relative;
+  left: -30px;
+}
+
+.paint-cont {
+  border: 1px solid rgba(204, 204, 204, 1);
+  width: 100%;
+  height: calc(100% - 34px);
+}
+
+.paint {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: 10;
+  width: 940px;
+  height: 687px;
+  margin-left: -420px;
+  margin-top: -344px;
+  background-color: #fff;
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
+  padding: 0 10px 10px 10px;
+}
+
+.paint-title {
+  font-size: 14px;
+  height: 34px;
+  line-height: 34px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.buts {
+  margin-left: 1px;
+  font-size: 12px;
+  background-color: transparent;
+  border: 1px solid #000;
+  border-radius: 3px;
+  padding: 2px 5px;
+  cursor: pointer;
+  min-width: 60px;
+  height: 20px;
+  display: inline-block;
+  line-height: 16px;
+  box-sizing: border-box;
+  font-family: Arial;
+  -moz-text-align-last: justify;
+  text-align-last: justify;
+  word-break: break-all;
+  text-justify: distribute;
+}
+</style>

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

@@ -1,11 +1,12 @@
 <template>
   <div ref="reactRef" class="react"></div>
+  <canvas id="canvas"></canvas>
 </template>
 
 <script>
 import {createElement} from 'react'
 import {createRoot} from 'react-dom/client'
-import {AssetRecordType,createShapeId, Tldraw} from 'tldraw'
+import {AssetRecordType,createShapeId, Tldraw, FileHelpers} from 'tldraw'
 import 'tldraw/tldraw.css'
 
 const clearJson = {
@@ -95,6 +96,39 @@ export default {
     }, null))
   },
   methods: {
+     exportImg() {
+       return new Promise((rl,ri) => {
+         editorAPP.getSvg([...editorAPP.getCurrentPageShapeIds()],{}).then(r => {
+           const s = new XMLSerializer().serializeToString(r);
+           const src = `data:image/svg+xml;base64,${window.btoa(s)}`;
+           const img = new Image(); // 创建图片容器承载过渡
+           img.src = src;
+           img.onload = () => {
+             // ↓ 第二部分
+             const canvas = document.createElement('canvas');
+             canvas.width = img.width;
+             canvas.height = img.height;
+             const context = canvas.getContext('2d');
+             context.drawImage(img, 0, 0);
+             const ImgBase64 = canvas.toDataURL('image/png');
+             let blob = this.dataURLtoBlob(ImgBase64);
+             let file = new File([blob], `${new Date().getTime()}.png`, {lastModified: Date.now()});
+             rl(file)
+           }
+         })
+       })
+    },
+    dataURLtoBlob(dataurl) {
+      let arr = dataurl.split(',');
+      let mime = arr[0].match(/:(.*?);/)[1];
+      let bstr = atob(arr[1]);
+      let n = bstr.length;
+      let u8arr = new Uint8Array(n);
+      while (n--) {
+        u8arr[n] = bstr.charCodeAt(n);
+      }
+      return new Blob([u8arr], {type: mime});
+    },
     handleMountedEditor(editor) {
       editorAPP = editor
       setTimeout(() => {
@@ -146,7 +180,7 @@ export default {
       this.styleProps('text', 'color').defaultValue = v?.color ?? 'black'
       this.styleProps('text', 'size').defaultValue = v?.size ?? 'm'
       this.styleProps('text', 'font').defaultValue = v?.font ?? 'draw' //['draw', 'sans', 'serif', 'mono']
-      // this.styleProps('text', 'align').defaultValue = v?.align ?? 'start'
+      this.styleProps('text', 'align').defaultValue = v?.align ?? 'start'
       editorAPP.setCurrentTool('text')
     },
     note(v) {
@@ -348,6 +382,7 @@ export default {
     },
     styleProps(t, e) {
       const style = [...editorAPP.styleProps[t]]
+      console.log(style)
       const index = style.findIndex(item => item[1] === e)
       return style[index][0]
     },
@@ -368,4 +403,10 @@ export default {
   width: 100%;
   height: 100%;
 }
+#canvas{
+  position: fixed;
+  top: -99999px;
+  left: 0;
+  z-index: -1;
+}
 </style>

package/src/index.js

@@ -83,7 +83,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.33.431',
+    version: '1.33.432',
     install,
     Calendar,
     Message,