0

キャンバス要素にユーザーの顔の画像があります。私は彼らがそれを切り取るためにその周りを描くことができるようにしたい. Splice を使用して、顔の周りに素敵な滑らかな曲線を描くことに成功しました (スプライス ポイントの配列は、マウスをクリックするたびに 1 つずつ増加し、ますます長くなります)。

しかし、このスプラインを実際に使用して画像をクリップする方法がわかりません。mySpline.allPoints 配列を使用して points 配列にアクセスし、独自のクリッピング パスを描画できますが、これは非常に直線的な形状を生成し、素敵な Spline 計算曲線はすべてありません。

誰にも解決策がありますか？

4

1 に答える 1

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 を使用して曲線を描画します。

于 2013-01-30T14:47:49.167 に答える