画布 - 元素叠加

Question

我需要构建一些画布应用程序，但形状是不规则的，元素彼此重叠。我使用 fabric.js 作为画布并导入SVG文件来绘制元素，但我无法检测到正确的悬停对象。

以下是示例：

我想在鼠标悬停时检测到它的形状是否超出形状。

它在我的画布上是如何实际的（红线角在画布上是不可见的）

Example code from Fabric.js

Answer 1

您必须使用fabricjs的“perPixelTargetFind”属性。

这将准确地检查鼠标在对象上。 如果有图形，它将触发目标，否则不会。

var canvas = new fabric.Canvas('canvas');
canvas.perPixelTargetFind = true;
canvas.add(new fabric.Circle({ radius: 30, fill: 'green', top: 50, left: 100 }));
canvas.add(new fabric.Circle({ radius: 30, fill: 'green', top: 100, left: 200 }));
  
canvas.on('mouse:over', function(e) {
  e.target.setFill('red');
  canvas.renderAll();
});

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

<script src="http://fabricjs.com/lib/fabric.js"></script>
<canvas id='canvas' width="550" height="550" style="border:#000 1px solid;"></canvas>