7
votes

Regroupement et ingraving tissu.js objets

J'ai créé une sorte de "sélecteur de polygone" ou "fabricant de polygone" à l'aide de tissu.js. Chaque clic crée un coin du polygone, qui peut être sélectionné, déplacé, etc ... double cliquant sur le point d'origine "ferme" le polygone. À ce stade, je prends tous les cercles / lignes qui composent les polygones et les regrouper. Jusqu'à présent, si bon.

Lorsqu'un tel groupe est double-cliqué, je voudrais ingraisser et revenir à des nœuds mobiles (c'est-à-dire déplacer les cercles remodèle le polygone, etc.); Mais il y a une certaine étrangeté à partir - Vérifiez ce qui se passe lorsque vous déplacez les cercles, certaines lignes semblent «non rejointes» aux cercles ... P>

J'ai déjà passé en revue tous les groupes / ingravage associé tissu.js fil (ici / là / partout). Aucun ne semble couvrir le type d'objets "connectés" que j'ai ici. P>

Le violon Je mets ensemble pour montrer le problème le dit mieux que je ne le peux: http://jsfiddle.net/bhilleli/4v8mkw6q/ p>

Le bit de code brisé est @: p>

       //dbl clicked a group so lets ungroup it!
        items = p._objects; // grab the items from the group you want to

        // translate the group-relative coordinates to canvas relative ones
        p._restoreObjectsState();
        // remove the original group and add all items back to the canvas
        canvas.remove(p);
        for (var i = items.length - 1; i >= 0; i--) {
            canvas.add(items[i]);
        }
        canvas.renderAll();

javascript jquery canvas html5-canvas fabricjs

0 commentaires

3 Réponses :

9
votes

Vous pouvez utiliser l'outil de regroupement de tissu

Vous pouvez regrouper et ingraisser des objets ensemble et les manipuler à la même temps
par exemple xxx
Veuillez vérifier le lien suivant

http://jsfiddle.net/softvar/nue78/1/

0 commentaires

0
votes

Si getactivegroup () n'est pas disponible, vous pouvez l'utiliser pour grouper (après la sélection de la souris de plusieurs objets):

togroup () n'est disponible que si plusieurs objets sont sélectionnés P>

var activeObj = canvas.getActiveObject();
var activegroup = activeObj.toGroup();
var objectsInGroup = activegroup.getObjects();
activegroup.clone(function(newgroup) {
    canvas.remove(activegroup);
    objectsInGroup.forEach(function(object) {
        canvas.remove(object);  
    });
    canvas.add(newgroup);
});

0 commentaires

1
votes

    if (!canvas.getActiveObject()) {
      return;
    }
    if (canvas.getActiveObject().type !== 'group') {
      return;
    }
    canvas.getActiveObject().toActiveSelection();
    canvas.requestRenderAll();
From : http://fabricjs.com/manage-selection

0 commentaires