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

Question

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

我想让他们使用那些光滑的Bezier曲线连接起来。所以我有两个形状，我可以通过直线连接它们，但现在我想在端点处有把手平滑这些对象，有点像这样： 所以在端点上有2个句柄，水平指向路径边界框的一半。 问题是我无法弄清楚如何使用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属性。）< / p>

文档在这里：Segment

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

sketch.paperjs.org solution