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

Question

我想通过单击实际内容来选择对象。 因此，我设置了perPixelTargetFind=true并遵循简介中的段落：

“默认情况下，可以通过边界框拖动画布上的所有Fabric对象。但是，如果要执行其他操作-仅按对象的实际内容单击/拖动对象，则可以在对象上使用“ perPixelTargetFind ”属性。只需将其设置为以获得所需的行为。”

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

是否可以仅按对象的实际内容单击对象？

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。