Question

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

我想加入一个带有二次曲线边缘的fabric.js圆圈。有没有办法做到这一点。如果我将表示其中一个边的点与圆圈分组，则在移动圆圈时该点与路径分离

尝试了一些事后更新

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

使用以下链接提示：

Control line points. Make rectangle follow line but make bounding box adapt to new width and height of line

以下代码已编写用于测试：

一个。用户点击圆圈（因此它变为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）。

这意味着你在QuadraticBézier曲线中的最后一点是x = 300，y = 100.

请尝试join_obj3.path[1] = ["Q", 100, 100, x, y];

之类的内容

Here是QuadraticBézier曲线的一个很好的例子。

如何加入fabric.js的边缘一个圆的路径？

1 个答案: