javascript - 使用样条线剪裁图像？

Question

我在画布元素中有一张用户面部的图像。我希望他们能够在它周围画出来把它剪掉。我已经成功地使用 Splice 在他们的脸部周围绘制了一条漂亮的平滑曲线（每点击一次鼠标，拼接点数组就会增加一个，越来越长）。

但我不确定如何实际使用这个样条线来剪辑图像。我可以使用 mySpline.allPoints 数组访问点数组，然后绘制我自己的剪切路径，但这会产生一个非常线性的形状，没有所有漂亮的 Spline 计算曲线。

有人有解决方案吗？

Answer 1

这可能不是最好的答案，但这里是如何绘制样条的代码：

     drawFunc: function(canvas) {
        var points = this.getPoints(), length = points.length, context = canvas.getContext(), tension = this.getTension();
        context.beginPath();
        context.moveTo(points[0].x, points[0].y);

        // tension
        if(tension !== 0 && length > 2) {
            var ap = this.allPoints, len = ap.length;
            context.quadraticCurveTo(ap[0].x, ap[0].y, ap[1].x, ap[1].y);

            var n = 2;
            while(n < len - 1) {
                context.bezierCurveTo(ap[n].x, ap[n++].y, ap[n].x, ap[n++].y, ap[n].x, ap[n++].y);
            }

            context.quadraticCurveTo(ap[len - 1].x, ap[len - 1].y, points[length - 1].x, points[length - 1].y);

        }
        // no tension
        else {
            for(var n = 1; n < length; n++) {
                var point = points[n];
                context.lineTo(point.x, point.y);
            }
        }

        canvas.stroke(this);
    },

给定曲线的点，它使用 quadraticCurveTo 和 bezierCurveTo 绘制曲线。