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

Question

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

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

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)
})

现在我像这样在 canvas 上设置 Mouseclick 侦听器：

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

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

但我需要的是此点击忽略图像，该图像位于第一个图像之上，我们可以直接与下方的图像进行交互

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

如有任何帮助，将不胜感激，谢谢

Answer 1

你可以直接设置evented:false and 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 添加对交互绝对惰性的图像

How to add an Image with Fabric JS that is absolutely inert for interaction

canvas

fabricjs