Dynamic quadratic curves and point transformations

[SupremeDeity]

Hello!
I am trying to create a curve similar to: Fabric Quadratic Curve demo however there are several differences. Mainly that my line can be moved like an object and i need to pass it through roughjs. I have created a control point in the middle for now. The questions i have are:

1. Is there an easy way or efficient way to convert ScenePoint to a point relative to the object? For example my control point in the center is initially at 0,0, but on moving that control point i need to convert it to the displacement between the two points.
2. Are there some resources or something i can look at to understand what all these transformations fabric is doing? Like this which i copied to make it look like the arrow is being drawn from the mouse point and not the center, and also whatever scenepoint, viewpoint and the transformations using the Point class:

  const relativeCenter = this.getRelativeCenterPoint();
        const constraint = this.translateToOriginPoint(
            relativeCenter,
            originX,
            originY
        );

Here is the current demo (use the line shape): My Curved Line demo
Here is the code: Custom quadratic line code
What i want to achieve is similar to excallidraw:

2024-09-26.16-01-05.mp4

[SupremeDeity]

Ok so i had the demo url wrong and it was protected so others wouldn't be able to see but i have fixed that.
I tried using a easier approach to get relative position for the middlepoint:

this.controls.bendControls = new fabric.Control({
            cursorStyle: "pointer",
            x: (this.midpoint[0]), y: this.midpoint[1],
            actionHandler: (eventData) => {
                const pointer = this.canvas.getScenePoint(eventData);
                const centerPoint = this.getCenterPoint();
                const deltaX = pointer.x - centerPoint.x;
                const deltaY = pointer.y - centerPoint.y;

                this.midpoint = [deltaX, deltaY];
                // console.log(displacement)
                this.update();
                this.canvas.requestRenderAll();
                this.canvas.fire("object:modified");
            },
        });

However this doesn't seem to work very well. My original approach in the link i provided in the message does work but i wanted to see if a much easier approach was available. Other than that there's a bit of issues of how i cant rely on left and top because changing position messes with it.

[SupremeDeity]

I ensure you i do not understand what are you doing or what i should do in that test app to understand.
What path is not being recalculated? What happens on screen?

Ah sorry 😅. I am using path controls that you suggested. I thought that would would update the Path.path(the parsed path inside the fabric.Path), but it apparently doesn't. Is there a way to make it do so? fabric.util.transformPath doesn't work well it seems. I was just passing it the path's offset and the result of calcOwnMatrix.

[asturur]

It definetely should do that indeed. It should update Path.path, yes.

[SupremeDeity]

It definetely should do that indeed. It should update Path.path, yes.

Very weird, idk why its happening with me then, cause the control points are updating correctly, but the Path.path doesn't change. I doubt its because im subclassing fabric.Path for this usecase.

[asturur]

i can't find the quadratic curve on the links you give, or i would checked. there are only straight lines

[SupremeDeity]

i can't find the quadratic curve on the links you give, or i would checked. there are only straight lines

I have not gotten to quadratic curves, adding a quadratic curve control point would be just adding a Q 0 0 0 0 i think?

Currently i only have straight lines, when i use the control points from the utils, they dont seem to update the Path.path

[SupremeDeity]

No worries, i have been busy too anyways thanks for your help, I'll look more into it a bit later and get back to you

…

On Wed, Oct 16, 2024, 12:45 PM Andrea Bogazzi ***@***.***> wrote: Sorry i have been on paternity leave quite busy here. There is this tool to add control points to curves in fabricJS: #9998 <#9998> I wanted to add a guide but i have no time. Check this sample was added as a quick test https://github.com/fabricjs/fabric.js/pull/9998/files#diff-70f24eb979856f3b260b75b17ccd49fa9cbc218efdedaf22d8d934cdb9854ddf and use your quadratic curve there, check if is what you need. — Reply to this email directly, view it on GitHub <#10183 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AG7G3TSUO44KQ5ZHWQHJMO3Z3YKTDAVCNFSM6AAAAABO4XX6YOVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTAOJVGYZTENA> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[asturur]

If there is a type issue we can change the util to take an object that has a path data and not necessarly a path. It can be change to an interface