1

私は多くの svg パスを持つキャンバスを持っています。私の目的は、画像をキャンバスにドラッグ アンド ドロップすることです。それができます。画像がキャンバスにドロップされたときに、svg パスに基づいて画像をクリップしたい落としたところ、

私は何度も同じ問題を投稿しました. 今回は私のページのリンクを皆さんに共有します. js コードを見てください. 何が問題なのかわかりません.画像をドラッグしてもrectが動かないctx.rect（）メソッドですが、キャンバスに同じパスを描くと画像と一緒に移動しますか？

ドロップされたパス内に画像を描画してドラッグしたい。

ここにページへのリンクがあります。fabricjs.com/kitchensink/ ページから 1 つのサンプル svg ファイルを使用しています。

http://qa.newagesme.com/wyz_editor/ ページに表示されているアバターのスカートに画像をドラッグ アンド ドロップします。

4

1 に答える 1

1

画像をパスに入れるときの私の考えをお見せしましょう。このパスはフィルターベースのパラメーターになる可能性があり、パスとその中のすべてを移動したい場合は、グループを使用するのが私の考えです。実際には、この画像はパス内にはありませんが、パス内にあるように見えます。fabricjs がオブジェクト用の別の子ツリーを持つことができることを本当に願っています。そのため、オブジェクトのすべての子はこのオブジェクト内でのみアクティブになる可能性がありますが、明らかにこのアイデアは現在のバージョンには適していません。まだfabric.jsソースを勉強中ですが、作ってみようと思います。http://jsfiddle.net/hellomaya/kjzZR/5/

この isPointInPoly 関数は、ここhttps://github.com/substack/point-in-polygonと、fabricjs.com のフィルター作成コードから適応されています。

あなたの質問は興味深いもので、同様の製品にも役立ちます。

var canvas = new fabric.Canvas('c1');
var src = "http://fiddle.jshell.net/img/logo.png";
canvas.backgroundColor = "#ccc";
canvas.renderAll();

var padding = 0;

fabric.Image.fromURL(src, function (img) {

    img.set({
        originX: 'left',
        originY: 'top',
        left: 120,
        top: 20
    });

    var points = [{
        x: 185,
        y: 0
    }, {
        x: 250,
        y: 100
    }, {
        x: 385,
        y: 170
    }, {
        x: 0,
        y: 245
    }];

    var polygon = new fabric.Polygon([{
        x: 185,
        y: 0
    }, {
        x: 250,
        y: 100
    }, {
        x: 385,
        y: 170
    }, {
        x: 0,
        y: 245
    }], {
        left: 0,
        top: 0,
        originX: 'left',
        originY: 'top',
        fill: 'transparent',
        stroke: 'black',
        stokeWidth: 1
    });
    console.log(polygon.width + ":" + polygon.height);

    canvas.add(img);
    canvas.add(polygon);
    polygon.selectable = false;

    fabric.Image.filters.Redify = fabric.util.createClass({

        type: 'Redify',

        applyTo: function (canvasEl) {
            var context = canvasEl.getContext('2d'),
                imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
                data = imageData.data;
            var width = imageData.width;
            var height = imageData.height;

            width = Math.ceil (img.width);
            height = Math.ceil (img.height);

            console.log (width + ":" + height);
            //console.log ("left=" + img.left + ":top=" + img.top);

            for (var i = 0, len = data.length; i < len; i += 4) {
                //data[i + 1] = 0;
                //data[i + 2] = 0;
                var x = Math.ceil(i / 4);
                var y = Math.ceil(x / width);

                x = x % width;

                x = x * img.scaleX + img.left;
                y = y * img.scaleY + img.top;

                //console.log (x + ":" + y);

                if (!isPointInPoly(points, {
                    x: x,
                    y: y
                })) {
                    //alert (x + ":" + y);
                    //data[i + 1] = 0;
                    //data[i + 2] = 0;
                    data[i + 3] = 0;
                }
            }

            context.putImageData(imageData, 0, 0);
        }
    });

    fabric.Image.filters.Redify.fromObject = function (object) {
        return new fabric.Image.filters.Redify(object);
    };

    img.filters.push(new fabric.Image.filters.Redify());

    canvas.on("object:moving", function () {
        img.applyFilters(canvas.renderAll.bind(canvas));
    });

    function isPointInPoly(vs, pt) {
        var x = pt.x,
            y = pt.y;

        var inside = false;
        for (var i = 0, j = vs.length - 1; i < vs.length; j = i++) {
            var xi = vs[i].x,
                yi = vs[i].y;
            var xj = vs[j].x,
                yj = vs[j].y;

            var intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
            if (intersect) inside = !inside;
        }

        return inside;
    }

    //polygon.selectable = false;
});
于 2013-10-06T11:39:30.770 に答える