畫布 - 元素覆蓋

Question

我需要構建一些畫布應用程序，但形狀不規則，元素相互重疊。我正在使用fabric.js進行畫布並導入SVG文件以繪製元素，但我無法檢測右對齊的對象。

下面舉例說明：

我想通過時，它就會上述形狀上鼠標檢測。

它是如何actualy在我的畫布（紅線角落都在畫布OFC無形）

Example code from Fabric.js

Answer 1

您必須使用 「perPixelTargetFind」 屬性的fabricjs。

這將檢查鼠標在對象上的準確性。 如果有圖形，它會觸發目標，否則不會。

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>