带有蒙版的基本 Fabric.js 图像选择

Question

我有一个独特的（但希望是简单的）问题需要用 Fabric.js 来修复。

我在下面有这个非常简单的例子：

我有

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

我的问题是：我希望图像只能在选择发生在蒙版范围内时才可选择（并且可悬停），而不是图像上的任何位置（甚至在其蒙版范围之外）。

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

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

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

一种可能的解决方案是在 canvas 中监听鼠标事件并根据鼠标 position 切换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>