Fabric js悬停不起作用答案

【问题标题】：Fabric js Hovering doesn't functionFabric js悬停不起作用
【发布时间】：2019-09-14 00:02:33
【问题描述】：

我有几个元素（三角形），当我将鼠标悬停在每个元素（鼠标：over/mouse:move）上方时，我希望能够突出显示（setShadow）它们，并在鼠标未悬停时重置突出显示。

我试过this，但它什么也没做。以下是我的代码：

var canvas = new fabric.Canvas('canvas');

var petal1 = new fabric.Triangle({
  width: 200,
  height: 300,
  fill: '#DBDBDB',
  left: 500,
  top: 350,
  angle: 200,
  strokeLineJoin: 'round',
  strokeWidth: 20,
  stroke: '#DBDBDB'
});

var petal2 = new fabric.Triangle({
  // same options as above
});

var petal3 = new fabric.Triangle({
  // same options as above
});

  canvas.on('mouse:over', function(e) {
    e.target.set('fill', 'red');
    canvas.renderAll();
  });

  canvas.on('mouse:out', function(e) {
    e.target.set('fill', 'green');
    canvas.renderAll();
  });


canvas.add(petal1, petal2, petal3);

我添加了console.log(e.target);，但它什么也没打印。

【问题讨论】：

标签： html5-canvas mouseevent fabricjs

【解决方案1】：

您的 sn-p 工作并在为其设置属性之前检查目标。

演示

var canvas = new fabric.Canvas('canvas');
var options = {
  width: 100,
  height: 200,
  fill: '#DBDBDB',
  strokeLineJoin: 'round',
  strokeWidth: 20,
  stroke: '#DBDBDB'
};
var petal1 = new fabric.Triangle(options);
var petal2 = new fabric.Triangle(options);
var petal3 = new fabric.Triangle(options);

canvas.on('mouse:over', function(e) {
  if(e.target){
    e.target.set('fill', 'red');
    canvas.requestRenderAll();
  }
});

canvas.on('mouse:out', function(e) {
  if(e.target){
    e.target.set('fill', 'green');
    canvas.requestRenderAll();
  }
});

canvas.add(petal1, petal2, petal3);

canvas{
  border:1px solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.7.0/fabric.js"></script>
<canvas id="canvas" width="300" height="300"></canvas>

【讨论】：