如何使用 Paper.js 连接具有类似贝塞尔曲线的对象

Question

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

我希望使用那些平滑的贝塞尔曲线将它们连接起来。所以我有 2 个形状，我可以通过做一条直线来连接它们，但现在我想在端点处有手柄来平滑这些对象，有点像这样：所以 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 对象而不是使用 Points（或者您可以在创建路径后设置 handleIn 和 handleOut 属性） .

文档在这里：Segment

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

sketch.paperjs.org solution

如何使用 Paper.js 连接具有类似贝塞尔曲线的对象

How to connect objects with Bezier-like curves using Paper.js

javascript

canvas

paperjs