javascript - 不使用 canvas.getActiveObject() 方法更改 Canvas 文本

Question

在不单击 Canvas 区域的情况下，我想在将文本添加到 Canvas 后对其进行更改。在我的代码中，我必须先选择 Canvas 文本，然后在输入文本区域时更改它。这是我的代码://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 .

Answer 1

这应该可以解决问题:

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

这是一个 fiddle :http://jsfiddle.net/xadqg/

这当然会得到第一个对象，但是因为你只有一个，所以应该没问题。

随意将 Boo Boo 更改为您想要的任何内容，例如 $(this).val()