Question

是否可以使用Fabric JS添加对任何类型的交互都是绝对惰性的图像？

我是什么意思？首先我们添加Image：

let image1 = fabric.Image.fromURL(src1, function (img) {        
    img.set({
        left: 0,
        top: 0,
    });
    canvas.add(img)
})

然后，是上一张图片的另一张图片

let image2 = fabric.Image.fromURL(src2, function (img) {        
    img.set({
        left: 0,
        top: 0,
    });
    canvas.add(img)
})

现在我像这样在画布上设置Mouseclick监听器：

canvas.on({
'mouse:down': (options) => { console.log(options.target) }
})

...因此，如果单击image2（在image1的正上方），则options.taget当然是指向image2。

但是我需要的是，此点击会忽略图片，该图片位于第一个图片上方，我们可以直接与下面的图片互动

看起来有可能重写结构侦听器来实现我需要的功能，但我什至不知道从哪里开始（我的技能太低）。

将感谢您的帮助

Answer 1

您可以只设置evented:false和selectable:false。

不言自明。

const canvas = new fabric.Canvas("c")

const url = "https://via.placeholder.com/200x200"
const url2 = "https://via.placeholder.com/100x100"

fabric.Image.fromURL(url, (img) => {
  canvas.add(img)
}, {
  left: 0,
  top: 0,
  stroke: 'blue',
  strokeWidth: 1,
  evented: false,
  selectable: false
})

fabric.Image.fromURL(url2, (img) => {
  canvas.add(img)
  img.sendToBack()
}, {
  left: 150,
  top: 50,
  stroke: 'blue',
  strokeWidth: 1
})

canvas.on({
  "mouse:down": options => {
    console.log(options.target);
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.4/fabric.js"></script>
<canvas id='c' width="300" height="250"></canvas>

如何使用对交互绝对惰性的Fabric JS添加图像

1 个答案: