[Basic Fabric.js带蒙版的图像选择

Question

我有一个与Fabric.js一起修复的独特（但希望很简单）的问题。

我在下面有一个非常简单的示例：

我有

• 2张图像
• 通过absolutePositioned实例的clipPath属性都具有fabric.Image掩码

我的问题是：我希望只要选择发生在蒙版的边界内，而不是图像上的任何位置（甚至不在蒙版的边界之内），图像就只能是可选择的（并且可以悬停）。

[此图像显示了鼠标悬停在红色门图片上（即使鼠标在蒙版边界之外，但不在图像边界之外：

这是门图像片段的代码片段：

fabric.Image.fromURL(url1, function(img){
  canvas.add(img.set({
    left: 0,
    top: 0,
    clipPath: rect1,
    hasControls: false,
  }));
  img.on('mouseover', () => {
    const filter = new fabric.Image.filters.BlendColor({
      color: 'white',
      alpha: 0.7,
      mode: 'tint'
    })
    img.filters.push(filter)
    img.applyFilters()
    canvas.renderAll()
  })
  img.on('mouseout', () => {
    img.filters.pop()
    img.applyFilters()
    canvas.renderAll()
  })
}, {crossOrigin: "Anonymous"});

---

[JS Fiddle Example显示我要更改的当前行为。

Answer 1

一种可能的解决方案是侦听画布中的鼠标事件，并根据鼠标位置切换activeObject：

canvas.observe('mouse:move', function(options) {
  const pos = canvas.getPointer(options.e);
  if (!imageRight || !imageLeft) return
  if (pos.x > 200) {
    activeImage = imageRight
  } else {
    activeImage = imageLeft
  }
  const activeObj = canvas.getActiveObject();
  if (activeImage !== activeObj) {
    canvas.setActiveObject(activeImage);
    canvas.renderAll()
  }
});

这是检测鼠标是否在图像上方的非常简化的方法。它检查x > 200是否是两张图像之间的线所在的位置。可以对其进行改进以使其更加准确，但是它仅用于说明该想法。

var canvas = window._canvas = new fabric.Canvas('c');

const url1 = 'https://picsum.photos/300/200'
const url2 = 'https://picsum.photos/320'

let imageRight
let imageLeft
let activeImage

canvas.observe('mouse:move', function(options) {
  const pos = canvas.getPointer(options.e);
  if (!imageRight || !imageLeft) return
  if (pos.x > 200) {
    activeImage = imageRight
  } else {
    activeImage = imageLeft
  }
  const activeObj = canvas.getActiveObject();
  if (activeImage !== activeObj) {
    canvas.setActiveObject(activeImage);
    canvas.renderAll()
  }
});

const baseProps = {
  width: 200,
  height: 200,
  top: 0,
  fill: '#000',
  absolutePositioned: true,
  hasControls: false,
  evented: false,
  selectable: false
}

const rect1 = new fabric.Rect({
  ...baseProps,
  left: 0,
})

const rect2 = new fabric.Rect({
  ...baseProps,
  left: 200,
})

canvas.add(rect1)
canvas.add(rect2)

fabric.Image.fromURL(url2, function(img) {
  imageRight = img
  canvas.add(img.set({
    left: 200,
    top: 0,
    clipPath: rect2,
    hasControls: false
  }))
}, {
  crossOrigin: "Anonymouse"
})

fabric.Image.fromURL(url1, function(img) {
  imageLeft = img
  canvas.add(img.set({
    left: 0,
    top: 0,
    clipPath: rect1,
    hasControls: false,
  }));
}, {
  crossOrigin: "Anonymous"
});

canvas {
  border: 2px red solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.6.0/fabric.min.js"></script>
<canvas id="c" width="420" height="220"></canvas>