Pārlūkot izejas kodu

feat:添加铅笔

ananzhusen 10 mēneši atpakaļ
vecāks
revīzija
0a9044ac3f
1 mainītis faili ar 37 papildinājumiem un 2 dzēšanām
  1. 37 2
      src/views/components/View.vue

+ 37 - 2
src/views/components/View.vue

@@ -138,10 +138,18 @@
           >T</a
         >
       </t-tooltip>
+      <t-tooltip content="铅笔" placement="bottom">
+        <a @click="onPencil" :style="{
+          background: pencil ? '#4480F929' : '',
+          color: pencil ?( theme==='light'?'#4480F9':'#4480F9'):''
+        }">
+          <PenBrushIcon />
+        </a>
+      </t-tooltip>
       <t-tooltip content="连线(双击可连续使用)" placement="bottom">
         <a
           @click="oneDraw"
-          @dblclick="alwaysDraw"
+          @dblclick.stop="alwaysDraw"
           :style="{
             background: oneD || alwaysD ? '#4480F929' : '',
             color: oneD || alwaysD ?( theme==='light'?'#4480F9':'#4480F9'):''
@@ -958,7 +966,7 @@ import ContextMenu from './ContextMenu.vue';
 import Network from './Network.vue';
 import Dataset from './Dataset.vue';
 import ChargeCloudPublish from './ChargeCloudPublish.vue';
-import { AddIcon, EditIcon, SaveIcon, RootListIcon,SlashIcon, RefreshIcon, ServerIcon, CaretRightIcon, ShareIcon, QrcodeIcon, CloudIcon, DeleteIcon, SearchIcon, RollbackIcon, LaptopIcon, StopCircleIcon , PlayCircleIcon, PlayCircleStrokeIcon, LayersIcon, FullscreenExitIcon, FileIcon, FileExcelIcon, CloudDownloadIcon } from 'tdesign-icons-vue-next';
+import { AddIcon, EditIcon, SaveIcon, RootListIcon,SlashIcon, RefreshIcon, ServerIcon, CaretRightIcon, ShareIcon, QrcodeIcon, CloudIcon, DeleteIcon, SearchIcon, RollbackIcon, LaptopIcon, StopCircleIcon , PlayCircleIcon, PlayCircleStrokeIcon, LayersIcon, FullscreenExitIcon, FileIcon, FileExcelIcon, CloudDownloadIcon, PenBrushIcon } from 'tdesign-icons-vue-next';
 import {transformData} from '@/services/utils';
 import { importExcel, saveAsExcel } from '@/services/excel';
 import { typeOptions } from '@/services/common';
@@ -1355,6 +1363,11 @@ const changeToArrow = (value: string) => {
 const oneD = ref<boolean>(false);
 const alwaysD = ref<boolean>(false);
 const oneDraw = () => {
+  if(meta2d.canvas.pencil){
+    //关掉铅笔
+    pencil.value = false;
+    meta2d.stopPencil();
+  }
   if (oneD.value) {
     oneD.value = false;
     if (!alwaysD.value) {
@@ -1376,11 +1389,33 @@ const oneDraw = () => {
   }
 };
 const alwaysDraw = () => {
+  if(meta2d.canvas.pencil){
+    //关掉铅笔
+    pencil.value = false;
+    meta2d.stopPencil();
+  }
   alwaysD.value = true;
   meta2d.drawLine(meta2d.store.options.drawingLineName);
   meta2d.store.options.disableAnchor = false;
 };
 
+const pencil = ref(false);
+const onPencil = () => {
+  // 开了铅笔需要关掉钢笔
+  if(meta2d.canvas.drawingLineName){
+    meta2d.finishDrawLine();
+    meta2d.drawLine();
+    oneD.value = false;
+    alwaysD.value = false;
+  }
+  if (!meta2d.canvas.pencil) {
+    meta2d.drawingPencil();
+  } else {
+    meta2d.stopPencil();
+  }
+  pencil.value = meta2d.canvas.pencil;
+}
+
 const lineAdd = (pens: Pen[]) => {
   if (pens.length === 1 && pens[0].name === 'line') {
     //连线类型