我正在尝试绘制路径与Hummus PDF JS的基础上从PaperJS导出的路径。
因此,PaperJS数据输出将是Hummus的数据输入。
这两个库创建曲线的方式不同。PaperJS使用控制柄来绘制直线,而Hummus将基于3个点来绘制直线。
假设我想要一条通过3个关键点的曲线: 200,100 -> 300,200 -> 400,100。如图所示:

对于PaperJS,我将不得不这样做:
var vector = new Point({
angle: 45,
length: 188
});
var path = new Path({
strokeColor: 'blue',
segments: [
[[200, 100], null, vector],
[[400, 100], vector.rotate(90), null]
],
});然而,对于Hummus,我将不得不使用here中的运算符c(inX1,inY1,inX2,inY2,inX3,inY3),它可能是这样的: c(200,100,300,325,400,100);
除非我用错了运算符?
我在这里的目标只是理解如何从PaperJS获取数据,并使其可用于使用Hummus绘图。
发布于 2018-02-21 08:11:50
您为Paper.js显示的代码用于定义由两行(作为向量)组成的路径,并由Paper.js的默认连接操作魔术般地连接在一起。
因此,如果您希望Hummus做同样的事情,要么查找如何让它做同样的事情,要么在您需要的地方手动生成两个线段(假设Hummus为此需要某种形式的line(x1,y1,x2,y2)命令),然后手动编写连接。有太多的方法来连接两条线段,所以让我们假设你想要一条简单的曲线,它适用于浅角度:
然后,一个简单的二次连接将具有起点{x2,y2}、控制点{x5,y5}和终点{x3,y3}。
https://stackoverflow.com/questions/48313820
复制相似问题