在不使用 canvas.getActiveObject() 方法的情况下更改画布的文本答案

【问题标题】：Change text of canvas without using canvas.getActiveObject() method在不使用 canvas.getActiveObject() 方法的情况下更改画布的文本
【发布时间】：2013-09-26 01:20:12
【问题描述】：

不点击画布区域，我想在添加到画布后更改文本。在我的代码中，我必须先选择画布文本，然后在输入 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;   }

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

【问题讨论】：

标签： javascript jquery html canvas fabricjs

【解决方案1】：

这应该可以解决问题：

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

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

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

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

【讨论】：

【解决方案2】：

怎么样

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

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

只要您有对text 的引用，您就不需要其他任何东西。

【讨论】：