javascript - 如何使用 Paper.js 将对象与贝塞尔曲线连接

Question

我有一个网络应用程序原型(prototype)，其中类似于 Blender 着色器编辑器的节点相互连接。我正在使用 Paper.js 框架

我希望使用那些平滑的贝塞尔曲线将它们连接起来。所以我有 2 个形状，我可以通过画一条直线来连接它们，但现在我想在端点处有 handle 来平滑这些对象，有点像这样: 因此，端点上有 2 个 handle ，水平指向路径边界框的一半。 问题是我不知道如何使用 Paper.js 添加和编辑这些句柄 我的代码是这样的:

function makeRectangle(topLeft, size, cornerSize, colour){
    var rectangle = new Rectangle(topLeft, size);
    var cornerSize = cornerSize;
    var path = new Path.RoundRectangle(rectangle, cornerSize);
    path.fillColor = colour;
    return path;
}

var xy1 = new Point(50,50); //Position of 1st rectangle.
var size = new Size(100, 80); //Size
var c = new Size(8,8); //Corner radius
var col = "#167ee5"; //Colour

var r1 = makeRectangle(xy1, size, c, col); //Make first rectangle

var xy2 = new Point(467,310); //Position of second rectangle
var size2 = new Size(115, 70); //Size of second rectangle

var r2 = makeRectangle(xy2, size2, c, col); //Make secont rectangle

var r1cent = r1.bounds.center; //Get the center points, they will be used as endpoints for the curve.

var r2cent = r2.bounds.center;

var connector = new Path(r1cent, r2cent); //Ok so I made this path... Now what? How do access and edit the handlers at endpoints like in the image?

connector.strokeColor = 'black'; //Give it some colour so we can see it.

您可以粘贴所有这些代码 here无需任何设置，这是测试框架的好方法。

Answer 1

在定义连接器时，您可以使用 Segment 对象，而不是使用 Point(或者您可以设置 handleIn 和 handleOut 创建路径后的属性)。

文档在这里:Segment

下面是一个草图，展示了如何在代码中使用 handleIn 和 handleOut:

sketch.paperjs.org solution