将 PaperJS 导出路径与 Hummus PDF JS 一起使用答案

【问题标题】：Use PaperJS export path with Hummus PDF JS将 PaperJS 导出路径与 Hummus PDF JS 一起使用
【发布时间】：2018-01-18 04:23:33
【问题描述】：

我正在尝试根据从 PaperJS 导出的路径使用 Hummus PDF JS 绘制路径。

因此，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 进行绘制。

【问题讨论】：

很抱歉无法弄清楚这一点:(

标签： pdf bezier paperjs hummus.js

【解决方案1】：

您为 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}。

【讨论】：