如何将 fabric.js 路径的边连接到圆？

Question

我在 fabric.js website 中找到了二次曲线的示例。

我想用二次曲线的一条边连接一个 fabric.js 圆。有没有办法做到这一点。如果我将代表其中一条边的点用一个圆分组，则该点在移动圆时会与路径分开

尝试一些东西后更新

有两个元素 - 一个是圆，另一个是二次曲线

根据以下 link 的提示：

为测试编写了以下代码：

一个。用户点击圆圈（因此它变成 activeObject）。之后，下面的函数就是运行:

join_obj1 = canvas.getActiveObject(); // The circle in this case

join_obj2 = the first point (p0) of the line

join_obj3 = the third point (p3) of the line

join_obj1.on('moving', function (options) {
    var x=join_obj1.getLeft();
    var y=join_obj1.getTop();
    join_obj3.path[0] = ["M", x, y]; // Sets the path co-ordinates
    join_obj2.top = y;               // Sets the first point co-ordinates
    join_obj2.left = x;              // Sets the first point co-ordinates
// Following will be tried for joining the third point
//        join_obj3.top = y;
//        join_obj3.left = x;

    canvas.renderAll();
    
});

以上代码成功地将线的左边缘（第一个点和线的原点）连接到圆上，并且工作正常。当我移动圆圈时，直线和第一个点也随之移动。但是，我不确定如何将线的右侧边缘与圆连接起来。 join_obj3.path[0] = ["M", x, y] 设置路径左侧的坐标。但是，我不确定如何将路径的右侧边缘设置为特定值

Answer 1

二次贝塞尔曲线是使用 fabric.Path 中的 'Q' 指令定义的。初始 'M' 指令设置第一个点 (65,0)。 'Q' 后面有两个坐标；单个控制点 (100,100) 和我们绘制的最终点 (300,100)。

这意味着您在二次贝塞尔曲线中的最后一点是 x = 300，y = 100。

所以试试 join_obj3.path[1] = ["Q", 100, 100, x, y];

Here 是二次贝塞尔曲线的一个很好的例子。

如何将 fabric.js 路径的边连接到圆？

How to join an edge of fabric.js Path to a circle?

fabricjs