fabric js中的每像素图像对象检测

Question

我一直在尝试使用带有 fabric.js 的图像来使每像素拖放功能正常工作，例如他们网站上的示例：http://fabricjs.com/per-pixel-drag-drop/。我希望在将鼠标悬停在非透明部分上时检测到该对象，但是如果我将 perpixeltargetfind 设置为 true，则不会检测到任何内容。我已经尝试了一段时间，甚至在使用我自己的图像时逐字复制示例也没有用。如果有人有使用这个的经验，我真的很感激一些帮助来弄清楚我做错了什么。谢谢。这是一个 link 到一个 js fiddle 我一直在使用：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);

};

初始化();

Answer 1

那是因为您没有从自己的服务器获取图像，您会收到有关受污染 canvas 的安全错误。您需要将 crossOrigin: 'Anonymous' 设置为图像。我给你做了一个jsFiddle

fabric js中的每像素图像对象检测

per pixel image object detection in fabric js

fabricjs