Javascript Paper.js从一条路径绘制多条平行路径

我试图基于一组坐标绘制多条平行路径，如本例所示：

我根据一组段创建了路径，然后克隆了五次，并按以下方式进行转换：

var myPath;
var lineData = []; // Long array of segments
myPath.segments = lineData;

for (var i = 1; i < 5; i++) {
    var clone = myPath.clone();
    clone.translate(new paper.Point(0, i*5));
}

var-myPath；
变量lineData=[]；//长段数组
myPath.segments=线数据；
对于（变量i=1；i<5；i++）{
var clone=myPath.clone（）；
克隆翻译（新论文点（0，i*5））；
}

下面是我得到的结果：

---

我希望两条线完全平行，但距离总是不同的，有时会重叠。有没有办法解决这个问题，或者我应该尝试不同的方法来创建这种曲线？

一条三次贝塞尔曲线不能扩展为另一条平行的三次贝塞尔曲线。

@Blindman67沿原始曲线计算法线（与切线垂直）的方法以及在这些垂直线上绘制点将起作用

要开始，请参见此图，其中显示了计算垂直于贝塞尔曲线的点的算法

这里有一个概念证明示例：

如果只需要实心平行曲线，则通过将

t计数

设置得更高（例如

t计数=500

）进行过采样。此概念验证使用点创建直线，但对于实心曲线，可以使用一组直线点

如果需要虚线，则需要使用算法进行过采样（可能使用

tCount=500

而不是60），并对结果点集进行重复数据消除，直到曲线上的点距离均匀为止。这样你的点就不会沿着曲线稀疏聚集

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
//定义三次贝塞尔曲线的变量
var PI2=数学PI*2；
var s={x:20，y:30}；
var c1={x:200，y:40}；
var c2={x:40，y:200}；
变量e={x:270，y:220}；
//沿贝塞尔曲线绘制的点阵列
var点=[]；
//我们经常使用PI，所以把它放在一个变量中
var-PI=Math.PI；
//沿曲线绘制60个点
//并计算曲线在该点的角度
var t账户=60；
对于（var t=0；t不像贝塞尔曲线那么简单。如果纸张提供了这样的功能，您可以创建一组新的线段，并将它们偏移i*5*path.tangent（希望如此）或者它们可能有某种类型的偏移函数。另一种方法是通过用粗线绘制路径来创建遮罩，绘制线段，用更细的路径再次遮罩，然后再分段，直到完成为止。我可以只使用2D API显示切线方法，因为我不使用Paper.js，但这将很难转换回Paper的路径三次贝塞尔曲线无法扩展为另一条平行的三次贝塞尔曲线。@Blindman67沿原始曲线计算切线并在这些切线上绘制点的方法可以使用。要开始，请参阅此部分，以显示计算与贝塞尔曲线相切的点的算法。您需要使用Q&a算法进行过采样，然后进行反采样-复制生成的点集，直到曲线上的切线距离相等。我喜欢您创建的可变宽度线。：-）PaperJS中可能直接起作用的解决方案是通过将三次Bezier简化为一组近似的二次Bezier来近似三次Bezier，然后使用PaperJS样式“点化”二次曲线。问题是，沿着二次近似的点（可能）不会与原始的三次贝塞尔相切。如果不对齐的点对你的设计来说不是问题，那就去看看。还有另一种方法可以创建一个近似的（好的）平行贝塞尔曲线。它通过偏移（沿法线）原始贝塞尔曲线的部分来工作。贝塞尔曲线越小，其分段越像直线。因此，您可以根据原始图像方向的变化率进行细分，在OP曲线上进行3到4次细分（顺便说一句，我的意思是说法线而不是切线，对不起，您应该更正答案）。我刚刚在另一个问题@Blindman67上发布了一个bezier分割函数。是的，我在那里看到了你很好的答案——但现在是凌晨1点以后，所以我明天必须消化它。：-）是的，法线是正确的描述（不是切线——我的错）。我将使用不太准确的术语“垂直”，因为更多的观众可能知道垂直与正常。干杯