Pārlūkot izejas kodu

优化线条的鼠标操作范围

pipipi-pikachu 5 gadi atpakaļ
vecāks
revīzija
df23eb6870
1 mainītis faili ar 13 papildinājumiem un 4 dzēšanām
  1. 13 4
      src/views/components/element/LineElement/index.vue

+ 13 - 4
src/views/components/element/LineElement/index.vue

@@ -6,11 +6,9 @@
       top: elementInfo.top + 'px',
       left: elementInfo.left + 'px',
     }"
-    @mousedown="$event => handleSelectElement($event)"
   >
     <div 
       class="element-content" 
-      v-contextmenu="contextmenus"
       :style="{ filter: shadowStyle ? `drop-shadow(${shadowStyle})` : '' }"
     >
       <SvgWrapper
@@ -48,6 +46,15 @@
           :marker-start="elementInfo.points[0] ? `url(#${elementInfo.id}-${elementInfo.points[0]}-start)` : ''"
           :marker-end="elementInfo.points[1] ? `url(#${elementInfo.id}-${elementInfo.points[1]}-end)` : ''"
         ></path>
+				<path
+          class="line-path"
+          :d="path" 
+          stroke="transparent" 
+          stroke-width="20" 
+          fill="none" 
+          @mousedown="$event => handleSelectElement($event)"
+          v-contextmenu="contextmenus"
+        ></path>
 			</SvgWrapper>
     </div>
   </div>
@@ -121,9 +128,8 @@ export default defineComponent({
 <style lang="scss" scoped>
 .editable-element-shape {
   position: absolute;
-  cursor: move;
 
-  &.lock .element-content {
+  &.lock .line-path {
     cursor: default;
   }
 }
@@ -138,4 +144,7 @@ export default defineComponent({
     overflow: visible;
   }
 }
+.line-path {
+  cursor: move;
+}
 </style>