Canvas - 元素叠加

Question

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

示例如下：

我想检测鼠标悬停在什么时候会高于形状。

我的 canvas 实际情况如何（红线角在 canvas ofc 中不可见）

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>

Canvas - 元素叠加

Canvas - Elements overlaying

javascript

svg

html5-canvas

fabricjs