fix: fix issue with path parse, closed #1616

common/changes/@visactor/vrender-core/fix-path-render_2025-02-08-08-38.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vrender-core",
+      "comment": "fix: fix issue with path parse, closed #1616",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vrender-core"
+}

packages/vrender-core/src/common/custom-path2d.ts

@@ -390,52 +390,55 @@ export class CustomPath2D extends CurvePath implements ICustomPath2D {
           // transform to absolute x,y
           tempX = x + (current[3] as number);
           tempY = y + (current[4] as number);
-          // calculate reflection of previous control points
-          controlX = 2 * x - controlX;
-          controlY = 2 * y - controlY;
-          this.bezierCurveTo(
-            controlX + l,
-            controlY + t,
-            x + (current[1] as number) + l,
-            y + (current[2] as number) + t,
-            tempX + l,
-            tempY + t
-          );
 
-          // set control point to 2nd one of this command
-          // the first control point is assumed to be the reflection of
-          // the second control point on the previous command relative
-          // to the current point.
-          controlX = x + (current[1] as number);
-          controlY = y + (current[2] as number);
+          if ((previous![0] as string).match(/[CcSs]/) === null) {
+            // If there is no previous command or if the previous command was not a C, c, S or s,
+            // assume the control point is coincident with the current point
+            controlX = x;
+            controlY = y;
+          } else {
+            // calculate reflection of previous control points
+            controlX = 2 * x - controlX;
+            controlY = 2 * y - controlY;
+          }
 
+          tempControlX = x + (current[1] as number); // store new control point
+          tempControlY = y + (current[2] as number);
+
+          this.bezierCurveTo(controlX + l, controlY + t, tempControlX + l, tempControlY + t, tempX + l, tempY + t);
+
+          // update control point
+          controlX = tempControlX;
+          controlY = tempControlY;
           x = tempX;
           y = tempY;
           break;
 
         case 'S': // shorthand cubic bezierCurveTo, absolute
           tempX = current[3] as number;
           tempY = current[4] as number;
-          // calculate reflection of previous control points
-          controlX = 2 * x - controlX;
-          controlY = 2 * y - controlY;
-          this.bezierCurveTo(
-            controlX + l,
-            controlY + t,
-            (current[1] as number) + l,
-            (current[2] as number) + t,
-            tempX + l,
-            tempY + t
-          );
+
+          if ((previous![0] as string).match(/[CcSs]/) === null) {
+            // If there is no previous command or if the previous command was not a C, c, S or s,
+            // assume the control point is coincident with the current point
+            controlX = x;
+            controlY = y;
+          } else {
+            // calculate reflection of previous control points
+            controlX = 2 * x - controlX;
+            controlY = 2 * y - controlY;
+          }
+
+          tempControlX = current[1] as number; // store new control point
+          tempControlY = current[2] as number;
+
+          this.bezierCurveTo(controlX + l, controlY + t, tempControlX + l, tempControlY + t, tempX + l, tempY + t);
+
+          // update control point and current position
+          controlX = tempControlX;
+          controlY = tempControlY;
           x = tempX;
           y = tempY;
-          // set control point to 2nd one of this command
-          // the first control point is assumed to be the reflection of
-          // the second control point on the previous command relative
-          // to the current point.
-          controlX = current[1] as number;
-          controlY = current[2] as number;
-
           break;
 
         case 'q': // quadraticCurveTo, relative

packages/vrender/__tests__/browser/src/pages/path.ts

@@ -2,24 +2,21 @@ import { createStage, createRect, IGraphic, createPath, vglobal, loadHarmonyEnv,
 import { roughModule } from '@visactor/vrender-kits';
 import { addShapesToStage, colorPools } from '../utils';
 
-loadHarmonyEnv(container);
-
-vglobal.setEnv('harmony');
-
 // container.load(roughModule);
 export const page = () => {
   const graphics: IGraphic[] = [];
   graphics.push(
     createPath({
       x: 100,
       y: 100,
-      path: 'M -2 2 L 4 -5 L 7 -6 L 6 -3 L -1 3 C 0 4 0 5 1 4 C 1 5 2 6 1 6 A 1.42 1.42 0 0 1 0 7 A 5 5 0 0 0 -2 4 Q -2.5 3.9 -2.5 4.5 T -4 5.8 T -4.8 5 T -3.5 3.5 T -3 3 A 5 5 90 0 0 -6 1 A 1.42 1.42 0 0 1 -5 0 C -5 -1 -4 0 -3 0 C -4 1 -3 1 -2 2 M 4 -5 L 4 -3 L 6 -3 L 5 -4 L 4 -5',
+      scaleX: 0.5,
+      scaleY: 0.5,
+      path: 'M430.08 832s89.28-176.224 191.904-328.672C701.216 385.664 800 282.656 800 282.656L779.392 224s-117.184 83.328-212.064 185.6c-96.32 103.776-170.336 226.688-170.336 226.688L251.52 496.832 192 561.632 430.08 832z',
       fill: '#ccc',
-      stroke: 'grey',
-      scaleX: 10,
-      scaleY: 10
+      stroke: 'grey'
     })
   );
+  console.log(graphics[0]);
 
   const stage = createStage({
     canvas: 'main',