Холст - Наложение элементов

Question

Мне нужно создать какое-нибудь приложение для холста, но фигуры нерегулярны, а элементы перекрывают друг друга. Я использую fabric.js для холста и импортирования SVG-файлов для рисования элементов, но я не могу обнаружить объекты, зависающие справа.

Вот примеры:

Я хочу, чтобы обнаружить при наведении мыши, когда она будет выше формы.

Как это actualy на моем холсте (красная линия углы невидимы в холст OFC)

Example code from 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>