2

キャンバス領域をクリックせずに、キャンバスに追加されたテキストを変更したい。私のコードでは、最初にキャンバスのテキストを選択し、次にテキストエリアに入力するときに変更する必要があります。ここに私のコードがあります: //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です。

4

2 に答える 2

2

これでうまくいくはずです：

canvas.getObjects()[0].text = "Boo Boo";
canvas.renderAll();

ここにフィドルがあります：http://jsfiddle.net/xadqg/

もちろん、これは最初のオブジェクトを取得しますが、オブジェクトが 1 つしかないため、これで問題ありません。

$(this).val() のように Boo Boo を自由に変更してください。

于 2013-09-25T15:59:23.303 に答える