Fabric.js 通过输入编辑文本

Question

我正在开发在线印刷媒体应用程序，例如“vistaprint.in”，用户可以在其中修改织物 js 画布上的预制设计。在 fabric.js 对象中，对象没有唯一标识符...所有文本对象为每个对象创建一个输入，以便用户只需更改输入即可直接更改所需文本...您可以在右侧的屏幕截图中看到画布上每个文本对象都有输入...我现在正在做的是当输入更改时我循环遍历所有文本对象并匹配输入文本和文本对象文本如果匹配然后我将新文本更新到该对象..这很好第一次但不是之后...我尝试但无法找到解决此问题的方法。

这就是画布和输入现在的样子 Screenshot of app

这是我现在创建的用于更改画布文本的功能

$(document).on('input', '#cardalltexthex input', function(){    
 v = $(this).attr('text');
 newtext = $(this).val();
 objs = canvas.getObjects();
 objs.forEach(function(e) {
   if (e && e.type === 'i-text') { 
   console.log(e.text);
   console.log(newtext);
     if (e.text == v) {
     e.setText(newtext);
     canvas.renderAll(); 
     }
   }
 });
});

Answer 1

您需要将id 属性指定为fabric 对象并使用您的input 检查该属性，如下例所示

无需if (e.text == v)，只需将所有fabric 对象设置为一些独特的id 并将其与您的输入进行比较。

var text;
var canvas;
canvas = new fabric.Canvas('c');
text1 = new fabric.Text("Text", {
  id: "cardalltexthex1",
  fontSize: 70,
  selectable: false,
  left: 100,
  top: 0,
  text: "text1",
  fill: '#f00'
});
canvas.add(text1);
text2 = new fabric.Text("Text", {
  id: "cardalltexthex2",
  fontSize: 70,
  selectable: false,
  left: 100,
  top: 100,
  text: "text2",
  fill: '#f00'
});
canvas.add(text2);



$('.input').on('keyup', function() {
  id = $(this).attr('id');
  val = $(this).attr('data-text');
  newtext = $(this).val();
  input = $(this);

  objs = canvas.getObjects();
  objs.forEach(function(obj) {
    if (obj && obj.text == val) {
      obj.setText(newtext);
      input.attr("data-text", newtext);
      canvas.renderAll();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.17/fabric.min.js"></script>

<canvas id="c" width=500 height=250></canvas>

<input class="input" data-text="text1" value="text1" id="cardalltexthex1" />

<input class="input" data-text="text2" value="text2" id="cardalltexthex2" />