Question

我在canvas元素中有一个用户脸部的图像。我希望他们能够围绕它来削减它。我已成功使用Splice在其脸部周围绘制一条漂亮的平滑曲线（每次点击鼠标时，拼接点阵列都会增加一个，越来越长）。

但我不确定如何实际使用此样条曲线来剪切图像。我可以使用mySpline.allPoints数组访问points数组，然后绘制我自己的剪切路径，但这会产生一个非常线性的形状，没有所有漂亮的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绘制曲线。

使用样条曲线剪辑图像？

1 个答案: