如何使用 Paper.js 将对象与贝塞尔曲线连接起来答案

【问题标题】：How to connect objects with Bezier-like curves using Paper.js如何使用 Paper.js 将对象与贝塞尔曲线连接起来
【发布时间】：2017-04-19 21:31:12
【问题描述】：

我有一个 Web 应用程序原型，其中类似于 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，这是测试框架的好方法。

【问题讨论】：

标签： javascript canvas paperjs

【解决方案1】：

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

文档在这里：Segment

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

sketch.paperjs.org solution

【讨论】：