Fabricjs - Wie kann ich ein Objekt abwählen und eine Gruppe auswählen, ohne die Maustaste loszulassen?

Question

Ich habe 3 Fabric-Objekte auf der Leinwand, ein Rect und Text werden als 1 Objekt gruppiert, dann erstelle ich dynamisch ein Polygon und zeichne es neu Objekt: Bewegung zwischen dem Gruppenobjekt und einem anderen Rect. Diese bilden etwas, was wie eine "Sprechblase" aussieht, wobei die Gruppe und der Rect (Zeiger) beide beweglich sind.

Was ich erreichen möchte, ist: Wenn das Polygon mit der Maus angeklickt wird, können Sie alle 3 Objekte bewegen, während Sie die Maustaste gedrückt halten.

Bisher was ich Gruppen die Elemente zusammen fein, aber Sie können alle Elemente nur bewegen, wenn Sie das Polygon auswählen, dann die Maustaste los und dann auf die Gruppe wieder, halten Sie die Maus und Verschiebe die Gruppe.

Ich habe die folgenden Canvas-Methoden ausprobiert und dachte, sie könnten das Polygon beim Klicken "abwählen", aber keiner von ihnen scheint zu funktionieren.

canvas.deactivateAllWithDispatch(); 
canvas.deactivateAll(); 
canvas.discardActiveObject(); 

Jsfiddle des Prototyps I ist hier so weit haben:

http://jsfiddle.net/beewayne/3y2x3vty/

Answer 1

ich messed um ein wenig und das Beste was ich habe ist manuell das Objekt und die Gruppe bewegen zusammen, bis der Benutzer lässt die Maus zum ersten Mal.

modifizierte ich MouseDown- Zuhörer eher wie folgt aussehen:

shape.on('mousedown', function(evt) { 

    var objs = canvas.getObjects(); 

    var group = new fabric.Group(objs, {status: 'moving'}); 

    // Relevant code 
    var originalX = shape.left, 
     originalY = shape.top, 
     mouseX = evt.e.pageX, 
     mouseY = evt.e.pageY; 

    canvas.on('object:moving', function(evt) { 
     shape.left = originalX; 
     shape.top = originalY; 
     group.left += evt.e.pageX - mouseX; 
     group.top += evt.e.pageY - mouseY; 
     originalX = shape.left; 
     originalY = shape.top; 
     mouseX = evt.e.pageX; 
     mouseY = evt.e.pageY; 
    }); 

    canvas.setActiveGroup(group.setCoords()).renderAll(); 
    }); 

    // clean up the listener 
    shape.on('mouseup', function(evt) { 
    canvas.off('object:moving'); 
    }); 

ich die Maus versetzt, auf die Gruppe seit Hinzufügen des Objekts verwendet macht es ein wenig „springen“. Außerdem setze ich das Objekt kontinuierlich auf die gleiche Position, so dass es sich nicht innerhalb der Gruppe bewegt.

http://jsfiddle.net/kqfswu4b/1/