Path values do not update as the path moves or transforms, how to get/calculate the new points of the path? fabric v6

[lance-lfx]

From doing a bit of research on the Path object I realized that when the Path transforms/moves on the canvas by using default controls of fabric.js, the Path values within the Path.path prop does not update.

So that gives me a bit of a headache when I am trying to display the control point of a Quadratic curve (with 1 control point), and the control point doesn't move with the path when I move the path using the Path values (since the Path values are not updated), and it seems like I have to move the control point manually programmatically.

Can anyone walk me through how would you transform the points from existing to new?

I've tried this below as the event handler of 'object:moving', where the path argument is the event.target. It got me close in the sense that it follows the movement of the path, but there is a certain weird offset that it gave me that led my control point to be relocated further to the bottom-right of the canvas.

// event handler function
const updateControlObjects = (path: Path) => {
const origCtrl = new Point(path.path[1][1]!, path.path[1][2]!);

// Calculate the transformation
const matrix = path.calcTransformMatrix();
const transformPoint = (p: Point) => p.transform(matrix);

// Apply transformation to get new coordinates
const newCtrl = transformPoint(origCtrl);

if (circle) {
  circle.set({
    left: newCtrl.x,
    top: newCtrl.y,
  });
  circle.setCoords();
}
 canvas?.renderAll();

};

[lance-lfx]

I realized there is now a createPathControls that will achieve the same results, so this is resolved.

[TheoAtTechStack]

Hey @lance-lfx ! Could you provide more details on how exactly you achieved this? Tried to find the function you mentioned in the documentation but I didn't and I am not sure exactly how to use it.

Hit the same issue regarding updating a path :)

[lance-lfx]

The "createPathControls" is under controlUtils:
https://fabricjs.github.io/api/namespaces/controlsutils/functions/createpathcontrols/

However, this is only helpful if you are trying to create controls for the Path which is what I was trying to do manually, because like I mentioned up there, the path values do not update by default and the path displayed did not exactly reflect the update as I move the path itself or the controls. I was only 80-90% with the code there, and there is a weird offset between the displayed path and the actual path location wanted.

If that is what you are trying to do, it would be similar to the poly control demo, but replacing the createPolyControls with createPathControls. Other than that, I don't have any better suggestions as to how to recalculate the path transformations.

[TheoAtTechStack]

For future reference, I managed to create a function to update a path based on the logic mentioned here:
https://stackoverflow.com/questions/51406351/fabricjs-when-moving-a-path-the-path-object-doesnt-update?noredirect=1&lq=1
I just adapted the code to my scenario and made some tweaks to it, cheers!

[asturur]

For who is looking forward a way to transform the path instead there is an utility called util.transformPath that does the transformation.

https://github.com/fabricjs/fabric.js/blob/master/src/util/path/index.ts#L966

[asturur]

For who is looking forward a way to transform the path instead there is an utility called util.transformPath that does the transformation.