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

Question

我想通过单击实际内容来 select 对象。所以我设置了 perPixelTargetFind=true 并遵循介绍中的段落：

"By default, all Fabric objects on canvas can be dragged by the bounding box. However, if you want different behavior — clicking/dragging objects only by its actual contents, you can use "perPixelTargetFind" property on an object. Just set it to true to get the desired behavior."

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

是否可以只按实际内容点击对象？

Answer 1

Is this what you wanted?

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 为真，并且 (hasControls & hasBorders) 为假的。

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

How to select the objects by only clicking the actual contents by Fabric.js

html

javascript

fabricjs