Fabric.js - Grouped iText nicht editierbar

Question

Der Titel sagt alles. Wenn ein Teil eines fabric.Group ist, reagiert es nicht mehr wie ein bearbeitbarer Text.

ist hier eine Use-Case: http://jsfiddle.net/vAjYd/

Gibt es eine Möglichkeit, dieses Problem zu lösen? Ansonsten muss ich meine on group schreiben.

Btw: A fabric.Group hat viele Vorteile, aber die deaktivierte Eventing macht es unmöglich, für UI-Elemente zu verwenden (d. H. Diesen Anwendungsfall oder Gruppen von Schaltflächen als Gruppen von Texten und Rezepten).

Answer 1

Momentan gibt es keine Möglichkeit für IText, die Ereignisse zu behandeln, da sie nicht weitergegeben werden, wenn sie in einer Gruppe enthalten sind. Ich denke, das ist auch der bevorzugte Weg, um damit umzugehen, da es den Benutzer verwirren würde - was ist, wenn er beginnt, mehrere Texte zu bearbeiten. Dies könnte zu einem Durcheinander führen. Vielleicht kannst du dein Skript ein wenig umarbeiten, um diese Probleme zu umgehen.

Answer 2

Ich könnte zu spät sein, um dies zu beantworten, aber sicherlich viele von Ihnen mögen mich auf der Suche nach dieser Antwort soll die Lösung zu erfüllen. Sie können eine perfekt funktionierende Lösung von iText finden, wo Benutzer den Text iText bearbeiten kann, die ein Teil eines fabric.group ist Working solution

Ansatz hier gefolgt ist:

1. Wenn Benutzer doppelt klickt die gewünschte Gruppe, wir
2. alle Elemente
3. Set Fokus auf iText Element Gruppierung aufheben Eingabe der Bearbeitungsmodus von iText & den gesamten Text auswählen, so dass Benutzer die direkte Bearbeitung beginnen ..

4. Sobald der Benutzer den Bearbeitungsmodus verlässt, werden die Elemente erneut gruppiert.

   // ungroup objects in group 
   var items 
   var ungroup = function (group) { 
       items = group._objects; 
       group._restoreObjectsState(); 
       canvas.remove(group); 
       for (var i = 0; i < items.length; i++) { 
        canvas.add(items[i]); 
       } 
       // if you have disabled render on addition 
       canvas.renderAll(); 
   }; 
   
   // Re-group when text editing finishes 
   var dimensionText = new fabric.IText("Dimension Text", { 
       fontFamily: 'Comic Sans', 
       fontSize: 14, 
       stroke: '#000', 
       strokeWidth: 1, 
       fill: "#000", 
       left: 170, 
       top: 60 
   }); 
   dimensionText.on('editing:exited', function() { 
       var items = []; 
       canvas.forEachObject(function (obj) { 
        items.push(obj); 
        canvas.remove(obj); 
       }); 
       var grp = new fabric.Group(items.reverse(), {}); 
       canvas.add(grp); 
       grp.on('mousedown', fabricDblClick(grp, function (obj) { 
        ungroup(grp); 
        canvas.setActiveObject(dimensionText); 
        dimensionText.enterEditing(); 
        dimensionText.selectAll(); 
       })); 
   }); 
   

Answer 3

Danke für die Antwort, es ist jedoch nicht sicherstellen, dass nur die Elemente in der Gruppe neu gruppiert werden, müssen wir, wie es wird ‚canvas.forEachObject‘ auf ‚Groupitem‘ ändern Versuchen Sie, alle Elemente in der Zeichenfläche zurückzusetzen, die nur zu der Gruppe gehören. Siehe den folgenden Code

// ungroup objects in group 
var groupItems = [] 
var ungroup = function (group) { 
    groupItems = group._objects; 
    group._restoreObjectsState(); 
    canvas.remove(group); 
    for (var i = 0; i < groupItems.length; i++) { 
     canvas.add(groupItems[i]); 
    } 
    // if you have disabled render on addition 
    canvas.renderAll(); 
}; 

// Re-group when text editing finishes 
var dimensionText = new fabric.IText("Dimension Text", { 
    fontFamily: 'Comic Sans', 
    fontSize: 14, 
    stroke: '#000', 
    strokeWidth: 1, 
    fill: "#000", 
    left: 170, 
    top: 60 
}); 
dimensionText.on('editing:exited', function() { 
    var items = []; 
    groupItems.forEach(function (obj) { 
     items.push(obj); 
     canvas.remove(obj); 
    }); 
    var grp = new fabric.Group(items.reverse(), {}); 
    canvas.add(grp); 
    grp.on('mousedown', fabricDblClick(grp, function (obj) { 
     ungroup(grp); 
     canvas.setActiveObject(dimensionText); 
     dimensionText.enterEditing(); 
     dimensionText.selectAll(); 
    })); 
});