Question

我的画布上有很多svg路径，我的目的是将图像拖放到画布上，我能够做到这一点，当在画布上放下图像时，我想根据丢弃它的svg路径剪切图像，

我多次发布同样的问题，这次我分享我的页面链接给你们，请看看js代码，我不知道那里有什么问题，当我用一个剪辑图像使用ctx.rect（）方法的矩形，当我拖动图像时矩形没有移动，但是当我在画布上绘制相同的路径时它会随图像一起移动吗？

我想在放置它的路径中绘制并拖动图像。

以下是该页面的链接，我正在使用fabricjs.com/kitchensink/ page中的一个示例svg文件

http://qa.newagesme.com/wyz_editor/ 将图像拖放到页面上显示的头像的裙子上。

Answer 1

让我向您展示我的想法，当您将图像放入路径时，所以此路径可能是其基于过滤器的参数，如果您想要移动路径及其内部，使用组是我认为的一种方式。实际上这个图像不在路径内，但看起来像它。我真的希望fabricjs可以为对象创建另一个子树，因此对象的每个子节点都只能在此对象中活动，但显然这个想法不适合当前版本。我想尝试制作一个，仍在学习fabric.js源码。 http://jsfiddle.net/hellomaya/kjzZR/5/

这是从这里https://github.com/substack/point-in-polygon改编的PointInPoly函数，以及来自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;
});

Fabric.js基于SVG路径的多重剪辑

1 个答案: