キャンバス領域をクリックせずに、キャンバスに追加されたテキストを変更したい。私のコードでは、最初にキャンバスのテキストを選択し、次にテキストエリアに入力するときに変更する必要があります。ここに私のコードがあります: //html
<canvas id="c" width="400" height="200"></canvas>
<br>
Change Text :
<textarea style="margin:0px;" id="textinput" rows="5" ></textarea>
//脚本
var canvas = new fabric.Canvas('c');
var text = new fabric.Text('Honey', {
fontSize: 100,
left: 50,
top: 50,
lineHeight: 1,
originX: 'left',
fontFamily: 'Helvetica',
fontWeight: 'bold'
});
canvas.add(text);
$("#textinput").keyup(function(event) {
//document.getElementById('textinput').addEventListener('keyup', function (e) {
// alert("hi");
var obj = canvas.getActiveObject();
if (!obj) return;
obj.setText(event.target.value);
canvas.renderAll();
});
//CSS
canvas { border:1px solid #000; }
.controles { margin:50px 0; }
誰でもこれを行う方法を知っていますか? これが私の Fiddle Demoです。