Fabric.js - समूहित iText संपादन योग्य नहीं

Question

शीर्षक सभी कहते हैं। जब fabric.ITextfabric.Group का हिस्सा है, तो यह अब संपादन योग्य टेक्स्ट की तरह प्रतिक्रिया नहीं करता है। http://jsfiddle.net/vAjYd/

वहाँ इस समस्या को हल करने के लिए एक रास्ता है:

यहाँ एक यूज़-केस है? अन्यथा मुझे अपना समूह लिखना है।

बीटीडब्ल्यू: ए fabric.Group के कई फायदे हैं, लेकिन अक्षम घटनाक्रम यूआई-एलिमेंट्स (यानी इस उपयोग-मामले या ग्रंथों और समूहों के समूह के रूप में बटन के समूह) के लिए उपयोग करना असंभव बनाता है।

Answer 1

वर्तमान में इवेंट के ईवेंट को संभालने का कोई तरीका नहीं है क्योंकि यह समूह में निहित होने पर इसे सौंप दिया नहीं गया है। मुझे लगता है कि यह इसे संभालने का भी पसंदीदा तरीका है क्योंकि यह उपयोगकर्ता को भ्रमित करेगा - क्या होगा यदि वह एकाधिक ग्रंथों को संपादित करना शुरू कर देता है। यह एक गड़बड़ में खत्म हो सकता है। हो सकता है कि आप इस समस्या को हल करने के लिए अपनी स्क्रिप्ट को थोड़ा सा पुन: कार्य कर सकें।

Answer 2

मुझे इसका उत्तर देने में बहुत देर हो सकती है, लेकिन निश्चित रूप से आप में से कई मुझे इस जवाब की खोज करने के लिए समाधान को पूरा करेंगे। आप पंछी की एक पूरी तरह से काम कर समाधान जहां उपयोगकर्ता iText का पाठ संपादित कर सकते हैं जो एक fabric.group Working solution

दृष्टिकोण यहाँ पीछा का एक हिस्सा है मिल सकती है:

1. जब उपयोगकर्ता पर दो बार क्लिक वांछित समूह, हम सभी तत्वों को असमूहीकृत iText तत्व
2. पर
3. सेट फोकस में प्रवेश .. iText का संपादन मोड & सभी पाठ का चयन करें, ताकि उपयोगकर्ता सीधे संपादन शुरू कर सकते हैं

4. एक बार उपयोगकर्ता संपादन मोड से बाहर निकलता है, तत्वों को फिर से एक साथ समूहीकृत किया जाता है।

   // 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

धन्यवाद उत्तर के लिए, लेकिन यह यकीन है कि केवल समूह में मौजूद आइटम फिर से एकजुट कर रहे हैं हम 'canvas.forEachObject' 'groupItems' में परिवर्तित करना होगा के रूप में यह होगा नहीं है, सभी वस्तुओं को केवल कैनवास में वापस रखने का प्रयास करें जो समूह से संबंधित हैं। निम्नलिखित कोड देखें

// 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(); 
    })); 
});