Paper.js借鑑一條路徑

Question

我試圖繪製多個並行路徑基於一組像這個例子中的座標的多個並行路徑：

我都基於一套創建我的路段，那麼我會克隆五次，並翻譯是這樣的：

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)); 
} 

這裏是結果我得到：

我想讓線條完全平行，但距離總是不一樣，它們有時會重疊。有沒有辦法解決它或mayby我應該嘗試不同的方法來創建這種曲線？

Answer 1

三次貝塞爾曲線不能擴展到另一個平行三次貝塞爾曲線。

@ Blindman67沿着原始曲線計算法線（正切線的垂線）的方法&在這些垂線上畫點會奏效。

要開始，請參閱此SO Q&A，其中顯示了計算垂直於貝塞爾曲線的點的算法。

下面是一個例子證明的概念：

如果你只是想紮實地平行曲線，然後過採樣通過設置tCount更高（例如tCount=500）。這個概念驗證使用點來創建線條，但對於實線曲線，您可以使用一組線條點。

待辦事項，如果你想虛線：你需要的算法進行過採樣（也許使用tCount=500而不是60）和重複數據刪除技術所得到的點集，直到你點沿着曲線以相同的距離。然後你的點不會稀疏沿曲線聚集。

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 

 
// variables defining a cubic bezier curve 
 
var PI2=Math.PI*2; 
 
var s={x:20,y:30}; 
 
var c1={x:200,y:40}; 
 
var c2={x:40,y:200}; 
 
var e={x:270,y:220}; 
 

 
// an array of points plotted along the bezier curve 
 
var points=[]; 
 

 
// we use PI often so put it in a variable 
 
var PI=Math.PI; 
 

 
// plot 60 points along the curve 
 
// and also calculate the angle of the curve at that point 
 
var tCount=60; 
 
for(var t=0;t<=tCount;t++){ 
 

 
    var T=t/tCount; 
 

 
    // plot a point on the curve 
 
    var pos=getCubicBezierXYatT(s,c1,c2,e,T); 
 

 
    // calculate the perpendicular angle of the curve at that point 
 
    var tx = bezierTangent(s.x,c1.x,c2.x,e.x,T); 
 
    var ty = bezierTangent(s.y,c1.y,c2.y,e.y,T); 
 
    var a = Math.atan2(ty, tx)-PI/2; 
 

 
    // save the x/y position of the point and the perpendicular angle 
 
    // in the points array 
 
    points.push({ 
 
     x:pos.x, 
 
     y:pos.y, 
 
     angle:a 
 
    }); 
 
} 
 

 
var PI2=Math.PI*2; 
 
var radii=[-12,-6,0,6,12]; 
 

 
// fill the background 
 
ctx.fillStyle='navy'; 
 
ctx.fillRect(0,0,cw,ch); 
 

 
// draw a dots perpendicular to each point on the curve 
 
ctx.beginPath(); 
 
for(var i=0;i<points.length;i++){ 
 
    for(var j=-2;j<3;j++){ 
 
     var r=radii[j+2]; 
 
     var x=points[i].x+r*Math.cos(points[i].angle); 
 
     var y=points[i].y+r*Math.sin(points[i].angle); 
 
     ctx.moveTo(x,y); 
 
     ctx.arc(x,y,1.5,0,PI2); 
 
    } 
 
} 
 
ctx.fillStyle='skyblue'; 
 
ctx.fill(); 
 

 

 
////////////////////////////////////////// 
 
// helper functions 
 
////////////////////////////////////////// 
 

 
// calculate one XY point along Cubic Bezier at interval T 
 
// (where T==0.00 at the start of the curve and T==1.00 at the end) 
 
function getCubicBezierXYatT(startPt,controlPt1,controlPt2,endPt,T){ 
 
    var x=CubicN(T,startPt.x,controlPt1.x,controlPt2.x,endPt.x); 
 
    var y=CubicN(T,startPt.y,controlPt1.y,controlPt2.y,endPt.y); 
 
    return({x:x,y:y}); 
 
} 
 

 
// cubic helper formula at T distance 
 
function CubicN(T, a,b,c,d) { 
 
    var t2 = T * T; 
 
    var t3 = t2 * T; 
 
    return a + (-a * 3 + T * (3 * a - a * T)) * T 
 
    + (3 * b + T * (-6 * b + b * 3 * T)) * T 
 
    + (c * 3 - c * 3 * T) * t2 
 
    + d * t3; 
 
} 
 

 
// calculate the perpendicular angle at interval T on the curve 
 
function bezierTangent(a, b, c, d, t) { 
 
    return (3 * t * t * (-a + 3 * b - 3 * c + d) + 6 * t * (a - 2 * b + c) + 3 * (-a + b)); 
 
};

body{ background-color: ivory; } 
 
#canvas{border:1px solid red; margin:0 auto; }

<h4>Dotted parallel Bezier Curve.</h4> 
 
<canvas id="canvas" width=300 height=300></canvas>