首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >对Hummus PDF JS使用PaperJS导出路径

对Hummus PDF JS使用PaperJS导出路径
EN

Stack Overflow用户
提问于 2018-01-18 12:23:33
回答 1查看 183关注 0票数 1

我正在尝试绘制路径与Hummus PDF JS的基础上从PaperJS导出的路径。

因此,PaperJS数据输出将是Hummus的数据输入。

这两个库创建曲线的方式不同。PaperJS使用控制柄来绘制直线,而Hummus将基于3个点来绘制直线。

假设我想要一条通过3个关键点的曲线: 200,100 -> 300,200 -> 400,100。如图所示:

对于PaperJS,我将不得不这样做:

代码语言:javascript
复制
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绘图。

EN

回答 1

Stack Overflow用户

发布于 2018-02-21 08:11:50

您为Paper.js显示的代码用于定义由两行(作为向量)组成的路径,并由Paper.js的默认连接操作魔术般地连接在一起。

因此,如果您希望Hummus做同样的事情,要么查找如何让它做同样的事情,要么在您需要的地方手动生成两个线段(假设Hummus为此需要某种形式的line(x1,y1,x2,y2)命令),然后手动编写连接。有太多的方法来连接两条线段,所以让我们假设你想要一条简单的曲线,它适用于浅角度:

  • 线段1 {x1,y1,x2,y2}和
  • 线段2 {x3,y3,x4,y4}和
  • 坐标{x5,y5}线段所在的线,

然后,一个简单的二次连接将具有起点{x2,y2}、控制点{x5,y5}和终点{x3,y3}。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/48313820

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档