FabricJs Canvas 'Mouse:over' 事件不工作

Question

我正在尝试监听 FabricJS 上的 mouse:over 事件（版本：1.4.0）canvas，但它似乎无法正常工作，因为我预计。这是片段

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() 函数以重新绘制 canvas。

Answer 1

来自 1.5.0 changelog：

Add "mouse:over" and "mouse:out" canvas events (and corresponding "mouseover", "mouseout" object events).

在 1.5.0 之前几乎没有此类事件。

Answer 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>

FabricJs Canvas 'Mouse:over' 事件不工作

FabricJs Canvas 'Mouse:over' event not working

javascript

fabricjs