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 - 与封闭路径

回答

相关问题