FabricJs Canvas 'Mouse:over' 事件不起作用答案

【问题标题】：FabricJs Canvas 'Mouse:over' event not workingFabricJs Canvas 'Mouse:over' 事件不起作用
【发布时间】：2020-01-17 12:07:00
【问题描述】：

我正在尝试在 FabricJS(version:1.4.0) 画布上监听 mouse:over 事件，但它似乎没有像我预期的那样工作。这是sn-p

const canvas = new fabric.Canvas('gameCanvas', {selection: false});

const rect = new fabric.Rect({
    left: 120,
    top: 30,
    width: 100,
    height: 100,
    fill: 'green',
    angle: 20,
    name: 'Rectangle',
    hoverCursor: 'pointer'
});

canvas.add(rect);
canvas.renderAll();

$('.upper-canvas').mouseover(function (e)
{
     
     if(e.target !== null)
     {
        if(e.target.name === 'Rectangle')
       {
          e.target.set('fill', 'red');
          canvas.renderAll();
          console.log('mouse:over', e.target.name);
       }
     } 

});

$('.upper-canvas').mouseout(function (e)
{
    if(e.target !== null){
      e.target.set('fill', 'green');
      canvas.renderAll();
      console.log('mouse:out', e.target.name);
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>
<canvas id="gameCanvas" width="500" height="300" style="border: 2px solid green;"></canvas>

还添加了 mouse:out 事件和 canvas.renderAll() 函数来重新绘制画布。

【问题讨论】：

我记得有一个类似的问题。这可能是因为fabric js 在画布上放置了一个元素。您想收听该元素上的事件。 .upper-canvas
在 .upper-canvas 上收听是什么意思？
Fabric js 在原始的 canvas 元素上放置了一个 canvas 元素，类为 upper-canvas。它阻止点击事件对其下的元素起作用。
如何将事件附加到upper-canvas下的元素？
我不确定。我可能会把你引向错误的方向。当我阅读他们的文档时。您拥有的解决方案应该有效。 fabricjs.com/hovering

标签： javascript fabricjs

【解决方案1】：

来自1.5.0 changelog：

添加“mouse:over”和“mouse:out”画布事件（以及相应的 "mouseover"、"mouseout" 对象事件）。

在 1.5.0 之前实际上没有此类事件。

【讨论】：

@Xris ，同样，它不适用于 1.4.0。 1.4.0 中没有 over/out 事件。根据变更日志，这些事件是在 1.5.0 中添加的。如果您出于某种原因不能使用 1.5.0 - 您必须 1) 实现自己的事件，或 2) 在 1.5.0 中查找添加这些事件并修补您正在运行的版本的提交。
知道我将如何实现这些事件吗？我尝试升级到 1.5.0 版，但一切都崩溃了
@Xris This 可能会有所帮助。尽管在我看来，从长远来看，升级（并修复损坏的部分）总是更好。
非常感谢哥们，我要试试看能不能把这两个缺失的事件加进去。再次非常感谢

【解决方案2】：

我能为 1.4.0 想出的最佳解决方案。我建议使用不同的版本。

const canvas = new fabric.Canvas('gameCanvas', {selection: false});

const rect = new fabric.Rect({
    left: 120,
    top: 30,
    width: 100,
    height: 100,
    fill: 'green',
    angle: 20,
    name: 'Rectangle',
    hoverCursor: 'pointer'
});

canvas.add(rect);
canvas.renderAll();

$('.upper-canvas').mouseover(function(e){
  rect.set('fill','red');
  canvas.renderAll();
});

$('.upper-canvas').mouseout(function(e){
  rect.set('fill','green');
  canvas.renderAll();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>
<canvas id="gameCanvas" width="500" height="300" style="border: 2px solid green;"></canvas>

【讨论】：