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

Question

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

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

这是我的锋利版本的代码:

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只改变路径笔划的画布样式.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;
}

这是在行动.