Wie mache ich die alle Formen ausgewählt, ich meine Formen immer aktiviert sein muss, damit ich brauche, um eine beliebige Form klicken Sie nicht auf

Question

ich unten Code versucht:

canvas.setActiveGroup(new fabric.Group(canvas.getObjects())).renderAll(); 

Aber es wählt die ganze Gruppe als einzelne Einheit.

Answer 1

Hier habe ich eine Lösung, bei mouseover wähle ich das Element, das der Mauszeiger vorbei passiert.

here is the fiddle

window.canvas = new fabric.Canvas('c', {perPixelTargetFind: true}); 
 

 
var shadow = { 
 
    color: 'rgba(0,0,0,0.6)', 
 
    blur: 20,  
 
    offsetX: 10, 
 
    offsetY: 10, 
 
    opacity: 0.6, 
 
    fillShadow: true, 
 
    strokeShadow: true 
 
} 
 

 
var rect = new fabric.Rect({ 
 
     left: 120, 
 
     top: 100, 
 
     fill: "#FF0000", 
 
     stroke: "#000", 
 
     width: 100, 
 
     height: 100, 
 
     strokeWidth: 10, 
 
     opacity: .8  
 
    }); 
 

 

 
var rect1 = new fabric.Rect({ 
 
     left: 0, 
 
     top: 100, 
 
     fill: "#FF0000", 
 
     stroke: "#000", 
 
     width: 100, 
 
     height: 100, 
 
     strokeWidth: 10, 
 
     opacity: .8  
 
    }); 
 

 
canvas.on('mouse:move', function(e){ 
 
\t console.log('over1',e.target) 
 
    if(e.target && e.target !== canvas.getActiveObject()) 
 
    canvas.setActiveObject(e.target) 
 
}) 
 

 
rect.setShadow(shadow); 
 
canvas.add(rect); 
 
canvas.add(rect1);

<canvas id="c" width="300" height="300"></canvas>

here is the fiddle