feature: 123

src/views/svg/components/svgRect.vue

@@ -9,7 +9,7 @@
       @mouseenter="pointMouseEnter(i)"
       @mouseleave="pointMouseLeave(i)"
       @mousedown="($event) => startLine($event, i)"
-    ></circle>
+    />
   </g>
 </template>
 

src/views/svg/index.vue

@@ -40,6 +40,7 @@ let curPos = ref({ x: 0, y: 0 });
 const wrapSize = reactive({ width: 0, height: 0 });
 const draggingId = ref(0);
 const lineStartPoint = ref(null);
+const lineEndPoint = ref(null);
 const children = ref([
   {
     id: 1,
@@ -66,8 +67,8 @@ const dashLineAttr = computed(() => {
     return {
       x1: lineStartPoint.value?.cx,
       y1: lineStartPoint.value?.cy,
-      x2: curPos.value.x,
-      y2: curPos.value.y,
+      x2: lineEndPoint.value?.cx ?? curPos.value.x,
+      y2: lineEndPoint.value?.cy ?? curPos.value.y,
       stroke: "black",
       "stroke-dasharray": "3 4",
       "stroke-width": "2",
@@ -79,6 +80,7 @@ const dashLineAttr = computed(() => {
 function startDrag({ id, event }) {
   draggingId.value = id;
   lineStartPoint.value = null;
+  lineEndPoint.value = null;
   curPos.value = getPosFromEvent(event);
   const { index, result } = findFromArray(children.value, (i) => i.id === id);
   children.value.splice(index, 1);
@@ -95,6 +97,11 @@ function startLine({ id, point }) {
 
 function endLine({ id, point }) {
   if (lineStartPoint.value) {
+    // const { index, result } = findFromArray(children, (i) => i.id === id);
+    lineEndPoint.value = {
+      itemId: id,
+      ...point,
+    };
   }
 }
 
@@ -110,6 +117,7 @@ function handleMouseMove(e) {
 function handleMouseUp() {
   draggingId.value = 0;
   lineStartPoint.value = null;
+  lineEndPoint.value = null;
 }
 
 function initSvgSize() {