fix: markerEndOffset of the path in the svg/canvas renderer is draw…

…n abnormally

.changeset/many-jeans-tan.md

@@ -1,5 +1,6 @@
 ---
 '@antv/g-lite': patch
+'@antv/g-plugin-canvas-path-generator': patch
 ---
 
-fix: `markerStartOffset` of the path in the svg renderer is drawn abnormally
+fix: `markerStartOffset`/`markerEndOffset` of the path in the svg/canvas renderer is drawn abnormally

__tests__/demos/bugfix/1760.ts

@@ -3,6 +3,7 @@ import { Canvas, Path, Line } from '@antv/g';
 /**
  * @see https://github.com/antvis/G/issues/1760
  * @see https://github.com/antvis/G/issues/1790
+ * @see https://github.com/antvis/G/pull/1808
  */
 export async function issue_1760(context: { canvas: Canvas }) {
   const { canvas } = context;
@@ -15,16 +16,27 @@ export async function issue_1760(context: { canvas: Canvas }) {
       transformOrigin: 'center',
     },
   });
+  const arrowMarker1 = new Path({
+    style: {
+      d: 'M 10,10 L -10,0 L 10,-10 Z',
+      stroke: '#ff90FF',
+      transformOrigin: 'center',
+    },
+  });
 
   const path = new Path({
     style: {
       lineWidth: 1,
       stroke: '#54BECC',
       // d: 'M 0,40 L 100,100',
-      d: 'M 10,100 L 100,100',
+      // d: 'M 10,100 L 100,100',
+      d: 'M 10,100 Q 100,100 150,150',
+      // d: 'M 10,100 C 100,100 150,150 180,200',
+      // d: 'M 10,100 A 30 50 0 0 1 162.55 162.45',
+      // d: 'M 10,100 A 30 50 0 0 0 162.55 162.45',
       markerStart: arrowMarker,
       markerStartOffset: 30,
-      markerEnd: arrowMarker,
+      markerEnd: arrowMarker1,
       markerEndOffset: 30,
     },
   });

packages/g-lite/src/utils/path.ts

@@ -959,39 +959,34 @@ export function translatePathToString(
             (nextSegment[0] === 'M' || nextSegment[0] === 'Z'))) &&
         endOffsetX !== 0 &&
         endOffsetY !== 0;
+      const [startOffsetXTemp, startOffsetYTemp] = useStartOffset
+        ? [startOffsetX, startOffsetY]
+        : [0, 0];
+      const [endOffsetXTemp, endOffsetYTemp] = useEndOffset
+        ? [endOffsetX, endOffsetY]
+        : [0, 0];
 
       switch (command) {
         case 'M':
-          // Use start marker offset
-          if (useStartOffset) {
-            return `M ${params[1] + startOffsetX},${params[2] + startOffsetY}`;
-          }
-          return `M ${params[1]},${params[2]}`;
+          return `M ${params[1] + startOffsetXTemp},${params[2] + startOffsetYTemp}`;
 
         case 'L':
-          return `L ${params[1] + (useEndOffset ? endOffsetX : 0)},${
-            params[2] + (useEndOffset ? endOffsetY : 0)
+          return `L ${params[1] + endOffsetXTemp},${
+            params[2] + endOffsetYTemp
           }`;
+
         case 'Q':
-          return `Q ${params[1]} ${params[2]},${params[3]} ${params[4]}${
-            useEndOffset
-              ? ` L ${params[3] + endOffsetX},${params[4] + endOffsetY}`
-              : ''
-          }`;
+          return `Q ${params[1]} ${params[2]},${params[3] + endOffsetXTemp} ${params[4] + endOffsetYTemp}`;
+
         case 'C':
-          return `C ${params[1]} ${params[2]},${params[3]} ${params[4]},${params[5]} ${params[6]}${
-            useEndOffset
-              ? ` L ${params[5] + endOffsetX},${params[6] + endOffsetY}`
-              : ''
-          }`;
+          return `C ${params[1]} ${params[2]},${params[3]} ${params[4]},${params[5] + endOffsetXTemp} ${params[6] + endOffsetYTemp}`;
+
         case 'A':
-          return `A ${params[1]} ${params[2]} ${params[3]} ${params[4]} ${params[5]} ${params[6]} ${params[7]}${
-            useEndOffset
-              ? ` L ${params[6] + endOffsetX},${params[7] + endOffsetY}`
-              : ''
-          }`;
+          return `A ${params[1]} ${params[2]} ${params[3]} ${params[4]} ${params[5]} ${params[6] + endOffsetXTemp} ${params[7] + endOffsetYTemp}`;
+
         case 'Z':
           return 'Z';
+
         default:
           return null;
       }

packages/g-plugin-canvas-path-generator/src/paths/Path.ts

@@ -48,43 +48,44 @@ export function generatePath(
         (nextSegment && (nextSegment[0] === 'M' || nextSegment[0] === 'Z'))) &&
       endOffsetX !== 0 &&
       endOffsetY !== 0;
+    const [startOffsetXTemp, startOffsetYTemp] = useStartOffset
+      ? [startOffsetX, startOffsetY]
+      : [0, 0];
+    const [endOffsetXTemp, endOffsetYTemp] = useEndOffset
+      ? [endOffsetX, endOffsetY]
+      : [0, 0];
 
     switch (command) {
       case 'M':
         // Use start marker offset
-        if (useStartOffset) {
-          context.moveTo(params[1] + startOffsetX, params[2] + startOffsetY);
-        } else {
-          context.moveTo(params[1], params[2]);
-        }
+        context.moveTo(
+          params[1] + startOffsetXTemp,
+          params[2] + startOffsetYTemp,
+        );
         break;
       case 'L':
-        if (useEndOffset) {
-          context.lineTo(params[1] + endOffsetX, params[2] + endOffsetY);
-        } else {
-          context.lineTo(params[1], params[2]);
-        }
+        context.lineTo(params[1] + endOffsetXTemp, params[2] + endOffsetYTemp);
         break;
       case 'Q':
-        context.quadraticCurveTo(params[1], params[2], params[3], params[4]);
-        if (useEndOffset) {
-          context.lineTo(params[3] + endOffsetX, params[4] + endOffsetY);
-        }
+        context.quadraticCurveTo(
+          params[1],
+          params[2],
+          params[3] + endOffsetXTemp,
+          params[4] + endOffsetYTemp,
+        );
         break;
       case 'C':
         context.bezierCurveTo(
           params[1],
           params[2],
           params[3],
           params[4],
-          params[5],
-          params[6],
+          params[5] + endOffsetXTemp,
+          params[6] + endOffsetYTemp,
         );
-        if (useEndOffset) {
-          context.lineTo(params[5] + endOffsetX, params[6] + endOffsetY);
-        }
         break;
       case 'A': {
+        // FIXME startOffset / endOffset
         const { arcParams } = segments[i];
         const { cx, cy, rx, ry, startAngle, endAngle, xRotation, sweepFlag } =
           arcParams;