帆布-元素叠加

Question

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

这里有一些例子：

我想在鼠标上检测到它何时会超过形状。

​

​

它在我的画布上是怎样的(红线角在画布ofc中是看不见的)

​

​

来自Fabric.js的示例代码

Answer 1

你必须使用"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>

​