如何通过 Fabric.js 仅单击实际内容来选择对象

Question

我想通过单击实际内容来选择对象。所以我perPixelTargetFind=true在引言中设置了以下段落：

\n\n

\n

“默认情况下，Fabric画布上的所有对象都可以通过边界框拖动。但是，如果您想要不同的行为 \xe2\x80\x94 仅通过其实际内容单击/拖动对象，您可以perPixelTargetFind在对象上使用“”属性。只需将其设置为 true 以获得所需的行为。”

\n

\n\n

通过这样做，我可以按实际内容拖动对象，但仍然可以通过单击边界区域来选择对象。

\n\n

是否可以仅通过其实际内容来单击对象？

\n

Answer 1

这是你想要的吗？

for (var i = 0, len = 15; i < len; i++) {
    fabric.Image.fromURL('../assets/ladybug.png', function(img) {
        img.set({
            left: fabric.util.getRandomInt(0, 600),
            top: fabric.util.getRandomInt(0, 500),
            angle: fabric.util.getRandomInt(0, 90)
        });

        img.perPixelTargetFind = true;
        img.targetFindTolerance = 4;
        img.hasControls = img.hasBorders = false;

        img.scale(fabric.util.getRandomInt(50, 100) / 100);

        canvas.add(img);
    });
}

基本上，您指定perPixelTargetFind为 true，并且 ( hasControls & hasBorders ) 为 false。