2

无需单击画布区域，我想在将文本添加到画布后更改文本。在我的代码中，我必须先选择画布文本，然后在输入 textarea 时更改它。这是我的代码：//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;   }

任何人都知道如何做到这一点？这是我的小提琴演示。

4

2 回答 2

2

这应该可以解决问题：

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

这是一个小提琴：http: //jsfiddle.net/xadqg/

这当然会得到第一个对象，但既然你只有一个，这应该没问题。

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

于 2013-09-25T15:59:23.303 回答
2

怎么样

var text = new fabric.Text('Honey', {
  ...
});
canvas.add(text);

$("#textinput").keyup(function(event) {
    text.setText(event.target.value);
    canvas.renderAll();
});

只要您有参考，text就不需要其他任何东西。

于 2013-09-25T17:20:12.027 回答