特定の種類のオブジェクトを追加するときに「モード」を変更するにはどうすればよいですか？

Question

私はfabricjs 1.7.20を使用しており、 "選択"と "描画"モードを持っています。どのようにしてテキストを追加すると（ボタンを使って、描画モードのままで）テキストを選択モードに設定して、テキストオブジェクトを直ちに編集できるようにするにはどうすればいいですか？あなたがする必要がある場合は、テキストの方法、およびまたのSelectAll（）からenterEditing()を使用することができます

var canvas = new fabric.Canvas("c", { 
 
    backgroundColor: "#fff" 
 
}); 
 
canvas.setHeight(300); 
 
canvas.setWidth(300); 
 

 
// Add text 
 
function Addtext() { 
 
    var text = new fabric.IText("Tap & type", { 
 
    fontSize: 30, 
 
    top: 10, 
 
    left: 10, 
 
    width: 200, 
 
    height: 200, 
 
    textAlign: "center" 
 
    }); 
 
    canvas.add(text); 
 
    canvas.setActiveObject(text); 
 
} 
 

 
// Modes 
 
$("#select").click(function() { 
 
    canvas.isDrawingMode = false; 
 
}); 
 
$("#draw").click(function() { 
 
    canvas.isDrawingMode = true; 
 
});

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

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.min.js"></script> 
 
<button onclick="Addtext()">Add Text</button> 
 
<button id="draw">Draw Mode</button> 
 

 

 
<canvas id="c"></canvas>

Answer 1

。それをしなかった

var canvas = new fabric.Canvas("c", { 
 
    backgroundColor: "#fff" 
 
}); 
 
canvas.setHeight(300); 
 
canvas.setWidth(300); 
 

 
// Add text 
 
function Addtext() { 
 
    var text = new fabric.IText("Tap & 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; 
 
} 
 

 
// Modes 
 
$("#select").click(function() { 
 
    canvas.isDrawingMode = false; 
 
}); 
 
$("#draw").click(function() { 
 
    canvas.isDrawingMode = true; 
 
});

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

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.min.js"></script> 
 
<button onclick="Addtext()">Add Text</button> 
 
<button id="draw">Draw Mode</button> 
 

 

 
<canvas id="c"></canvas>