帶有蒙版的基本 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>