グループ化されたままの別個のオブジェクトのグループを追加するにはどうすればよいですか？

Question

私はfabricjs 1.7.21を使用していて、テキストを追加するボタンがあります。単一のITextオブジェクトで可能なように、複数の編集可能なITextフィールド（右側を参照）などのオブジェクトのグループをキャンバスに追加するにはどうすればよいですか？

つまり、右側のようなものをクリックして追加し、グループとして移動できるようにしたいと考えています。

var canvas = new fabric.Canvas("c"); 
 
canvas.setHeight(500); 
 
canvas.setWidth(500); 
 

 
// Add Text 
 
function Addtext() { 
 
    var text = new fabric.IText("Type...", { 
 
    fontSize: 30, 
 
    top: 10, 
 
    left: 10, 
 
    width: 200, 
 
    height: 200, 
 
    textAlign: "center" 
 
    }); 
 
    canvas.add(text); 
 
    canvas.setActiveObject(text); 
 
    text.enterEditing(); 
 
    text.selectAll(); 
 
    text.renderCursorOrSelection(); // or canvas.renderAll(); 
 
    canvas.isDrawingMode = false; 
 
} 
 

 
// Right Side Objects 
 

 
// Header Constants 
 
const toppers = { 
 
    fontSize: 27, 
 
    hasBorders: true, 
 
    hasControls: false, 
 
    left: 380, 
 
    lockMovementX: true, 
 
    lockMovementY: true, 
 
    lockRotation: true, 
 
    originX: "center", 
 
    originY: "center", 
 
    selectable: true, 
 
    align: "mid", 
 
    centeredScaling: true, 
 
}; 
 
const headingOne = { 
 
    lockMovementX: true, 
 
    lockMovementY: true, 
 
    originX: "center", 
 
    originY: "center", 
 
    selectable: true, 
 
    align: "mid", 
 
    fontSize: 14, 
 
    fontStyle: "italic", 
 
    hasBorders: true, 
 
    hasControls: false, 
 
    hasRotatingPoint: false, 
 
    left: 380, 
 
}; 
 
const headingTwo = { 
 
    align: "mid", 
 
    centeredScaling: true, 
 
    fontSize: 20, 
 
    hasBorders: true, 
 
    hasControls: false, 
 
    hasRotatingPoint: false, 
 
    lockMovementX: true, 
 
    lockMovementY: true, 
 
    lockRotation: true, 
 
    originX: "center", 
 
    originY: "center", 
 
    selectable: true, 
 
    left: 380, 
 
}; 
 

 
canvas.add(new fabric.IText("Some Text", { 
 
    ...toppers, 
 
    top: 25, 
 
})); 
 
canvas.add(new fabric.IText("Some Text", { 
 
    ...toppers, 
 
    fontWeight: "bold", 
 
    top: 60, 
 
})); 
 
canvas.add(new fabric.IText("Some Text", { 
 
    ...headingOne, 
 
    top: 90, 
 
})); 
 
canvas.add(new fabric.IText("Some Text", { 
 
    ...headingTwo, 
 
    top: 110, 
 
}));

canvas { 
 
    border: 1px solid #dddddd; 
 
    margin-top: 10px; 
 
    border-radius: 3px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.21/fabric.min.js"></script> 
 
<button onclick="Addtext()">Add Text</button> 
 
<canvas id="c"></canvas>

Answer 1

私は本当にあなたの必要性を理解することはわかりませんが、あなたが必要とするすべてのキャンバスに1つのTextFieldを追加し、グループにバインドボタンであれば、私はこれは動作するはずだと思います：

var canvas = new fabric.Canvas("c"); 
canvas.setHeight(500); 
canvas.setWidth(500); 
canvas.isDrawingMode = false; 
var myGroupOfText = new fabric.Group(); 

function Addtext() { 
    var text = new fabric.IText("Type...", { 
    fontSize: 30, 
    top: 10, 
    left: 10, 
    width: 200, 
    height: 200, 
    textAlign: "center" 
    }); 
    canvas.add(text); 
    myGroupOfText.add(text);  
} 

私はあなたが

canvas.setActiveObject(text); 
text.enterEditing(); 
text.selectAll(); 

を必要とする理由はわかりません10

しかし、あなたがしたい場合、私はあなたのAddTextメソッドにこれを追加するには問題はないと思う。 「追加」メソッドにはすでにcanvas.renderAll()への呼び出しが含まれています。

最終的には、という仮説と間違えて入力してください。 drawingModeは、キャンバスに固有の設定で、フリー描画（クリック+移動による描画シェイプ）を有効にするかどうかを決定します。非常に特殊な制約がない限り、ITextを追加するたびに再設定する必要はありません。

EDIT：

var canvas = new fabric.Canvas("c"); 
canvas.setHeight(500); 
canvas.setWidth(500); 
canvas.isDrawingMode = false; 

[...] 

function addGroupOfText() { 
    var myGroupOfText = new fabric.Group(); 
    myGroupOfText.setOptions({selectable: true}); 
    var options = { 
     fontSize: 30, 
     top: 10, 
     left: 10, 
     width: 200, 
     height: 200, 
     textAlign: "center", 
     selectable: false, 
     fontWeight: normal, // or 'bold', or a number. see docs 
     underline: false, // or true 
     fontStyle: normal // or 'italic'. see docs 
     } 
    this.addText(myGroupOfText, options); // repeat this call as many time as needed 
} 

function addText(group, options) { 
    var text = new fabric.IText("Type...", options); 
    canvas.add(text); 
    group.add(text);  
} 

これは、あなたが（X回にaddTextコールを繰り返すことで）Xのテキストフィールドを追加するとに異なるオプションを指定することができます： あなたのコメントによると、あなたはこの使用をお勧めしますそれぞれの私はあなたが文書http://fabricjs.com/docs/fabric.IText.htmlとhttp://fabricjs.com/docs/fabric.Group.htmlを見ることをお勧めします。ここでは、selectable: falseをそれぞれITextに設定して、どれも選択されていないものがないことを確認し、グループにselectable: trueを選択できるようにします。

明確でない場合は、コメントの精度を尋ねてください、私は喜んでお答えします。