在Hummus PDF JS中使用PaperJS导出路径 [英] Use PaperJS export path with Hummus PDF JS

问题描述

我正在尝试使用Hummus PDF JS基于PaperJS导出的路径绘制路径.

I am trying to draw paths with Hummus PDF JS based on paths exported from PaperJS.

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

Hence PaperJS data output would be the data input for Hummus.

这两个库在创建曲线时的工作方式不同. PaperJS使用手柄来弯曲一条直线，而Hummus会基于3点来弯曲一条直线.

Those two libraries works differently to create curves. PaperJS uses handles to curve a straight lines, while Hummus will curve a line based on 3 points.

比方说，我想有一条贯穿3个关键点的曲线:[200，100]-> [300，200]-> [400，100].像这张照片:

Let's say I want to have a curved line that goes through 3 key points: [200, 100] -> [300, 200] -> [400, 100]. Like this picture:

使用PaperJS，我将必须执行以下操作:

With PaperJS, I will have to do something like this:

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，我将不得不使用c(inX1,inY1,inX2,inY2,inX3,inY3) "nofollow noreferrer>此处 会是这样的: c(200，100，300，325，400，100);

However, with Hummus, I will have to use the operator c(inX1,inY1,inX2,inY2,inX3,inY3) from here It would be something like this: c(200, 100, 300, 325, 400, 100);

除非我使用了错误的运算符?

Unless I am using the wrong operator?

我在这里的目标只是了解如何从PaperJS中获取数据，并使其能够利用Hummus进行绘制.

My goal here is just to understand how to get data from PaperJS and make it exploitable to draw with Hummus.

推荐答案

您显示给Paper.js的代码用于定义由两行(作为矢量)组成的路径，由Paper神奇地连接在一起. .js的默认加入操作.

The code you show for Paper.js is for defining a path consisting of two lines (as vectors), magically joined by Paper.js's default join operation.

因此，如果您希望Hummus进行相同的操作，请查找如何使其做相同的事情，或者在需要它们的地方手动生成两个线段(大概Hummus为此需要某种形式的line(x1,y1,x2,y2)命令)然后手动编写联接.连接两条线段的方法太多了，因此，让我们假设您想要一条适用于浅角度的简单曲线:

So if you want Hummus to do the same, either look up how to make it do the same thing, or manually generate the two line segments where you need them (presumably Hummus needs some form of line(x1,y1,x2,y2) command for that) and then write the join manually. There are too many ways to join up two line segments, so let's pretend you want a simple curve that works well for shallow angles:

• 线段1 {x1，y1，x2，y2}和
• 线段2 {x3，y3，x4，y4}和
• 协调{x5，y5}线段所在的线的交叉点，

那么一个简单的二次连接将是起点{x2，y2}，控制点{x5，y5}和终点{x3，y3}.

then a simple quadratic join would be with start point {x2,y2}, control point {x5,y5}, and end point {x3,y3}.

这篇关于在Hummus PDF JS中使用PaperJS导出路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！