调整maotu配置

src/components/mt-edit/components/draw-line-render/index.vue

@@ -19,8 +19,8 @@
           viewBox="0 0 10 10"
           refX="8"
           refY="5"
-          markerWidth="6"
-          markerHeight="6"
+          :markerWidth="arrow_marker_size"
+          :markerHeight="arrow_marker_size"
           orient="auto-start-reverse">
           <path d="M 0 0 L 10 5 L 0 10 z" :fill="lineRenderProps.itemJson.props.stroke.val" />
         </marker>
@@ -29,8 +29,8 @@
           viewBox="0 0 10 10"
           refX="8"
           refY="5"
-          markerWidth="6"
-          markerHeight="6"
+          :markerWidth="arrow_marker_size"
+          :markerHeight="arrow_marker_size"
           orient="auto">
           <path d="M 0 0 L 10 5 L 0 10 z" :fill="lineRenderProps.itemJson.props.stroke.val" />
         </marker>
@@ -114,6 +114,10 @@ const offset = configStore.lineRenderOffset
 const grid_align_size = computed(() =>
   !lineRenderProps.grid.align || !lineRenderProps.grid.enabled ? 1 : lineRenderProps.grid.size
 )
+const arrow_marker_size = computed(() => {
+  const stroke_width = Number(lineRenderProps.itemJson.props['stroke-width'].val) || 1
+  return Math.min(Math.max(16 / stroke_width, 2.5), 6)
+})
 const onMouseDown = (de: MouseTouchEvent, point_index: number, item: { x: number; y: number }) => {
   de.stopPropagation()
   // 记录鼠标按下时实际点的坐标

src/components/mt-edit/components/line-render/index.vue

@@ -13,13 +13,34 @@
     pointer-events="none">
     <g>
       <defs>
+        <mask
+          :id="'lineWaterdropMask' + lineRenderProps.itemJson.id"
+          maskUnits="userSpaceOnUse"
+          x="0"
+          y="0"
+          :width="lineRenderProps.canvasCfg.width + offset"
+          :height="lineRenderProps.canvasCfg.height + offset">
+          <rect
+            x="0"
+            y="0"
+            :width="lineRenderProps.canvasCfg.width + offset"
+            :height="lineRenderProps.canvasCfg.height + offset"
+            fill="black" />
+          <path
+            :d="line_path"
+            fill="none"
+            stroke="white"
+            :stroke-width="lineRenderProps.itemJson.props['stroke-width'].val"
+            stroke-linecap="butt"
+            stroke-linejoin="round" />
+        </mask>
         <marker
           :id="'markerArrowStart' + lineRenderProps.itemJson.id"
           viewBox="0 0 10 10"
           refX="8"
           refY="5"
-          markerWidth="6"
-          markerHeight="6"
+          :markerWidth="arrow_marker_size"
+          :markerHeight="arrow_marker_size"
           orient="auto-start-reverse">
           <path d="M 0 0 L 10 5 L 0 10 z" :fill="lineRenderProps.itemJson.props.stroke.val" />
         </marker>
@@ -28,21 +49,15 @@
           viewBox="0 0 10 10"
           refX="8"
           refY="5"
-          markerWidth="6"
-          markerHeight="6"
+          :markerWidth="arrow_marker_size"
+          :markerHeight="arrow_marker_size"
           orient="auto">
           <path d="M 0 0 L 10 5 L 0 10 z" :fill="lineRenderProps.itemJson.props.stroke.val" />
         </marker>
       </defs>
 
       <path
-        :d="
-          positionArrarToPath(
-            lineRenderProps.itemJson.props.point_position.val,
-            lineRenderProps.itemJson.binfo.left + offset,
-            lineRenderProps.itemJson.binfo.top + offset
-          )
-        "
+        :d="line_path"
         pointer-events="visibleStroke"
         fill="none"
         :stroke="
@@ -91,13 +106,7 @@
       </path>
       <!-- 电流状态不太好选中，所以放个透明的放下面 -->
       <path
-        :d="
-          positionArrarToPath(
-            lineRenderProps.itemJson.props.point_position.val,
-            lineRenderProps.itemJson.binfo.left + offset,
-            lineRenderProps.itemJson.binfo.top + offset
-          )
-        "
+        :d="line_path"
         pointer-events="visibleStroke"
         fill="none"
         stroke="transparent"
@@ -117,18 +126,13 @@
       <!-- 水珠 -->
       <path
         v-if="lineRenderProps.itemJson.props.ani_type.val === 'waterdrop'"
-        :d="
-          positionArrarToPath(
-            lineRenderProps.itemJson.props.point_position.val,
-            lineRenderProps.itemJson.binfo.left + offset,
-            lineRenderProps.itemJson.binfo.top + offset
-          )
-        "
+        :d="line_path"
         fill="none"
         fill-opacity="0"
         :stroke="lineRenderProps.itemJson.props.ani_color.val"
         :stroke-width="lineRenderProps.itemJson.props['stroke-width'].val"
         :stroke-dasharray="lineRenderProps.itemJson.props['stroke-width'].val * 3"
+        :mask="`url(#lineWaterdropMask${lineRenderProps.itemJson.id})`"
         stroke-dashoffset="0"
         stroke-linecap="round">
         <animate
@@ -160,11 +164,7 @@
         :fill="lineRenderProps.itemJson.props.ani_color.val">
         <animateMotion
           :path="
-            positionArrarToPath(
-              lineRenderProps.itemJson.props.point_position.val,
-              lineRenderProps.itemJson.binfo.left + offset,
-              lineRenderProps.itemJson.binfo.top + offset
-            )
+            line_path
           "
           :dur="`${
             lineRenderProps.itemJson.props.ani_dur.val < 1
@@ -173,6 +173,22 @@
           }s`"
           repeatCount="indefinite" />
       </circle>
+      <path
+        :d="line_path"
+        fill="none"
+        stroke="transparent"
+        :stroke-width="lineRenderProps.itemJson.props['stroke-width'].val"
+        pointer-events="none"
+        :marker-start="
+          lineRenderProps.itemJson.props?.['marker-start']?.val
+            ? `url(#markerArrowStart${lineRenderProps.itemJson.id})`
+            : ''
+        "
+        :marker-end="
+          lineRenderProps.itemJson.props?.['marker-end']?.val
+            ? `url(#markerArrowEnd${lineRenderProps.itemJson.id})`
+            : ''
+        " />
       <g v-if="lineRenderProps.itemJson.active">
         <circle
           v-for="(item, index) in addPointPosition"
@@ -237,6 +253,17 @@ const offset = configStore.lineRenderOffset
 const grid_align_size = computed(() =>
   !lineRenderProps.grid.align || !lineRenderProps.grid.enabled ? 1 : lineRenderProps.grid.size
 )
+const arrow_marker_size = computed(() => {
+  const stroke_width = Number(lineRenderProps.itemJson.props['stroke-width'].val) || 1
+  return Math.min(Math.max(16 / stroke_width, 2.5), 6)
+})
+const line_path = computed(() =>
+  positionArrarToPath(
+    lineRenderProps.itemJson.props.point_position.val,
+    lineRenderProps.itemJson.binfo.left + offset,
+    lineRenderProps.itemJson.binfo.top + offset
+  )
+)
 const addPointPosition = ref()
 const onMouseDown = (
   de: MouseTouchEvent,

src/components/mt-preview/index.vue

@@ -47,7 +47,7 @@ type MtPreviewProps = {
 const mtPreviewProps = withDefaults(defineProps<MtPreviewProps>(), {
   canDrag: true,
   canZoom: true,
-  showPopover: true
+  showPopover: false
 })
 const emits = defineEmits(['onEventCallBack'])
 const canvasAreaRef = ref()