From 45731d281d6e4c328c40beb66c92f3bc58bec4f8 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Sat, 16 Apr 2022 10:02:56 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E6=B7=BB=E5=8A=A0=E6=9B=B2=E7=BA=BF?=
 =?UTF-8?q?=E5=85=83=E7=B4=A0=E6=8E=A7=E5=88=B6=E7=82=B9=E8=BE=85=E5=8A=A9?=
 =?UTF-8?q?=E7=BA=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Canvas/Operate/LineElementOperate.vue     | 48 +++++++++++++++++--
 1 file changed, 45 insertions(+), 3 deletions(-)

diff --git a/src/views/Editor/Canvas/Operate/LineElementOperate.vue b/src/views/Editor/Canvas/Operate/LineElementOperate.vue
index 567ff962..6b8731b5 100644
--- a/src/views/Editor/Canvas/Operate/LineElementOperate.vue
+++ b/src/views/Editor/Canvas/Operate/LineElementOperate.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="text-element-operate">
+  <div class="line-element-operate">
     <template v-if="handlerVisible">
       <ResizeHandler
         class="operate-resize-handler" 
@@ -8,6 +8,27 @@
         :style="point.style"
         @mousedown.stop="$event => dragLineElement($event, elementInfo, point.handler)"
       />
+
+      <svg 
+        :width="svgWidth" 
+        :height="svgHeight" 
+        :stroke="elementInfo.color"
+        overflow="visible" 
+        :style="{ transform: `scale(${canvasScale})` }"
+      >
+        <template v-if="elementInfo.curve">
+          <g>
+            <line class="anchor-line" :x1="elementInfo.start[0]" :y1="elementInfo.start[1]" :x2="elementInfo.curve[0]" :y2="elementInfo.curve[1]"></line>
+            <line class="anchor-line" :x1="elementInfo.end[0]" :y1="elementInfo.end[1]" :x2="elementInfo.curve[0]" :y2="elementInfo.curve[1]"></line>
+          </g>
+        </template>
+        <template v-if="elementInfo.cubic">
+          <g v-for="(item, index) in elementInfo.cubic" :key="index">
+            <line class="anchor-line" v-if="index === 0" :x1="elementInfo.start[0]" :y1="elementInfo.start[1]" :x2="item[0]" :y2="item[1]"></line>
+            <line class="anchor-line" v-if="index === 1" :x1="elementInfo.end[0]" :y1="elementInfo.end[1]" :x2="item[0]" :y2="item[1]"></line>
+          </g>
+        </template>
+      </svg>
     </template>
   </div>
 </template>
@@ -22,7 +43,7 @@ import { OperateLineHandlers } from '@/types/edit'
 import ResizeHandler from './ResizeHandler.vue'
 
 export default defineComponent({
-  name: 'text-element-operate',
+  name: 'line-element-operate',
   inheritAttrs: false,
   components: {
     ResizeHandler,
@@ -44,6 +65,9 @@ export default defineComponent({
   setup(props) {
     const { canvasScale } = storeToRefs(useMainStore())
 
+    const svgWidth = computed(() => Math.max(props.elementInfo.start[0], props.elementInfo.end[0]))
+    const svgHeight = computed(() => Math.max(props.elementInfo.start[1], props.elementInfo.end[1]))
+
     const resizeHandlers = computed(() => {
       const handlers = [
         {
@@ -95,8 +119,26 @@ export default defineComponent({
     })
 
     return {
+      svgWidth,
+      svgHeight,
+      canvasScale,
       resizeHandlers,
     }
   },
 })
-</script>
\ No newline at end of file
+</script>
+
+<style lang="scss" scoped>
+svg {
+  position: absolute;
+  left: 0;
+  top: 0;
+  pointer-events: none;
+  transform-origin: 0 0;
+}
+.anchor-line {
+  stroke-width: 1px;
+  stroke-dasharray: 5 5;
+  opacity: .5;
+}
+</style>
\ No newline at end of file