paper.js - 與封閉路徑

這實現更平滑的邊緣是不規則形狀的盒子，我已經產生：paper.js - 與封閉路徑

這是最終的效果我想達成的目標（注意平滑的邊緣）：

enter image description here

下面是我的銳版的代碼：

var path1 = new Path({ 
    segments: [[123, 6], [290, 6], [304, 142], [112, 142]], 
    strokeColor: 'white', 
    closed: true, 
    strokeWidth: 3, 
    strokeJoin: 'round' 
});

事情是，我已經在使用strokeJoin：'round'選項，差別幾乎不明顯，筆畫寬度爲3px。這是一件小事，但可能變成遊戲破解者，因爲將會出現像這樣的多個對象，並且差異很大。

有沒有辦法通過paper.js來實現，而不會過度使用它？

來源

2014-09-19 Paweł Duda

'strokeJoin'僅確定如何的2條線的交點將被顯示。由於這是一個點，它不會導致曲線。所以你需要使用直線和曲線（或弧）來調整你的梯形。 – markE 2014-09-19 16:11:49

正如markE提到的，strokeJoin僅改變路徑筆畫的畫布風格。 Paper.js不具有拐角功能，您必須自己創建。

這是一個快速的功能，您可以使用起點。它將消極地將多邊形的點偏移給定距離並添加適當的手柄。

function roundPath(path,radius) { 
    var segments = path.segments.slice(0); 
    path.segments = []; 
    for(var i = 0, l = segments.length; i < l; i++) { 
     var curPoint = segments[i].point; 
     var nextPoint = segments[i + 1 == l ? 0 : i + 1].point; 
     var prevPoint = segments[i - 1 < 0 ? segments.length - 1 : i - 1].point; 
     var nextDelta = curPoint - nextPoint; 
     var prevDelta = curPoint - prevPoint; 
     nextDelta.length = radius; 
     prevDelta.length = radius; 
     path.add({ 
      point:curPoint - prevDelta, 
      handleOut: prevDelta/2 
     }); 
     path.add({ 
      point:curPoint - nextDelta, 
      handleIn: nextDelta/2 
     }); 
    } 
    path.closed = true; 
    return path; 
}

Here it is in action.

來源

2014-09-19 17:05:51

工作得非常好，確實做我想要的。謝謝。 – 2014-09-22 10:51:39

這太棒了。我希望我可以兩次上癮。我已經將它翻譯成了一個普通的JavaScript版本：https：//gist.github.com/winduptoy/8b5c574e0e33bf547a31 – 2015-07-25 13:31:48

我一直在尋找一個確切的實施，如下所述：http://shanfanhuang.com/everything/2015/10/27/rounding-corners

我的實現原理如下：

curPoint是角落裏，prevPoint和NextPoint公司作爲
nextNorm和prevNorm是點的標準化版本
角度是角點的角度，衍生自點積
delta是從角點到控制點需要插入的距離，這是從控制點形成的直角三角形導出的， curPoint和角弧的中心。角部是一個半角和相對的角側爲半徑
prevDelta和nextDelta是邊的新端點，那些之間的電弧被插入

通過是在中途對電弧，發現通過獲得上述三角形的斜邊並減去半徑。

var segments = path.segments.slice(0); 
path.segments = []; 
for(var i = 0, l = segments.length; i < l; i++) { 
    var curPoint = segments[i].point; 
    var nextPoint = segments[i + 1 == l ? 0 : i + 1].point; 
    var prevPoint = segments[i - 1 < 0 ? segments.length - 1 : i - 1].point; 

    var nextNorm = (curPoint - nextPoint).normalize(); 
    var prevNorm = (curPoint - prevPoint).normalize(); 

    var angle = Math.acos(nextNorm.dot(prevNorm)); 

    var delta = radius/Math.tan(angle/2); 
    var prevDelta = prevNorm.normalize(delta); 
    var nextDelta = nextNorm.normalize(delta); 

    var through = curPoint - (prevNorm + nextNorm).normalize(Math.sqrt(delta*delta + radius*radius) - radius); 

    path.add(curPoint - prevDelta); 
    path.arcTo(through, curPoint - nextDelta); 
}

來源

2016-01-11 09:22:26 rikkertkoppes

paper.js - 與封閉路徑

回答

相關問題