Javascript paper.js-通过闭合路径实现更平滑的边缘

这是我生成的一个不规则形状的长方体：

这就是我想要达到的最终效果（注意平滑的边缘）：

以下是我的夏普版本的代码：

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

问题是，我已经在使用笔划连接：“round”选项，笔划宽度为3px时，差异几乎不明显。这是一件小事，但可能会成为游戏的破坏者，因为会有多个像这样的对象，差异是巨大的

---

使用paper.js有没有办法做到这一点而不过分

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

函数圆路径（路径、半径）{
var segments=path.segments.slice（0）；
path.segments=[]；
对于（变量i=0，l=segments.length；i

---

我正在寻找一个精确的实现，如下所述：

我的实施工作如下：

• curPoint是角点、上一点和下一点，如上所述
• 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);
  }
  

  var segments=path.segments.slice（0）；
  path.segments=[]；
  对于（变量i=0，l=segments.length；i

---

strokeJoin

仅确定如何显示两条线的交点。因为它是一个点，所以不会产生曲线。所以你需要同时使用直线和曲线（或圆弧）来环绕你的梯形。效果非常好，完全符合我的要求。谢谢，太棒了。我希望我能投两次票。我已经在这里将其转换为纯JavaScript版本：