javascript - paper.js - 使用闭合路径实现更平滑的边缘

Question

这是我生成的一个不规则形状的盒子:

这是我想要达到的最终效果(注意平滑的边缘):

这是我的 sharp 版本的代码:

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 实现这一目标而不会过度使用它吗？

Answer 1

如 markE 所述，strokeJoin 仅更改路径笔划的 Canvas 样式。 Paper.js 没有圆 Angular 功能，您必须自己制作。

这是一个可以作为起点的快速函数。它会将多边形的点负向偏移给定距离并添加适当的 handle 。

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.