Question

我一直在努力让像素拖放功能在其网站上使用带有fabric.js的图像工作：http://fabricjs.com/per-pixel-drag-drop/。我希望在非透明部分被遮挡时检测到该对象，但如果我将perpixeltargetfind设置为true则检测不到任何内容。我已经尝试了一段时间，甚至在使用我自己的图像时逐字复制示例也没有用。如果有人有使用这个经验，我真的很感激帮助弄清楚我做错了什么。谢谢。这是我一直在使用的js小提琴的链接：http://jsfiddle.net/ahalbleib/bdofdbqg/ 和代码：

var canvas =this.__canvas = new fabric.Canvas('c1',{hoverCursor: 'pointer',
    selection: false});
var urls=['https://dl.dropboxusercontent.com/s/ix6mvv49wnx226a/Central-Richmon_clipped_rev_1.png?dl=0' , 
        'https://dl.dropboxusercontent.com/s/jjp2l0kgdw8iitb/Laurel-Heights.png?dl=0',
        'https://dl.dropboxusercontent.com/s/wdk02w40z1466g5/LoneMountain.png?dl=0',
        'https://dl.dropboxusercontent.com/s/t6tnptndu2k22xr/OuterRichmond.png?dl=0',
        'https://dl.dropboxusercontent.com/s/tv4rhwjc0nw35iz/Presidio-Heights.png?dl=0' ,
        'https://dl.dropboxusercontent.com/s/ttbf390w2vdx4id/Inner-richmond.png?dl=0'];
for (var i=0; i<urls.length; i++){
    fabric.Image.fromURL( urls[i], function(img){

        img.perPixelTargetFind = true;
         img.targetFindTolerance = 4;
          img.hasControls = img.hasBorders = false;
          canvas.add(img);

    }); 
}

canvas.findTarget = (function (originalFn) {
    return function () {
        var target = originalFn.apply(this, arguments);
        if (target) {
            if (this._hoveredTarget !== target) {
                canvas.fire('object:over', { target: target });
                if (this._hoveredTarget) {
                    canvas.fire('object:out', { target: this._hoveredTarget });
                }
                this._hoveredTarget = target;
            }
        }
        else if (this._hoveredTarget) {
            canvas.fire('object:out', { target: this._hoveredTarget });
            this._hoveredTarget = null;
        }
        return target;
    };
})(canvas.findTarget);

};

的init（）;

Answer 1

这是因为您没有从自己的服务器上获取图像，并且您将收到有关受污染画布的安全性错误。您需要将crossOrigin: 'Anonymous'设置为图像。我找了你jsFiddle

在织物js中的每像素图像对象检测

1 个答案: