Question

我正致力于在线印刷媒体应用，例如＆＃39; vistaprint.in＆＃39;用户可以在fabric js canvas上修改预制设计。在fabric.js对象中没有对象的唯一标识符...所有文本对象都为每个文本对象创建一个输入，以便用户可以通过更改输入直接更改所需的文本...您可以在右侧的屏幕截图中看到canvas每个文本对象都有输入...我现在正在做的是当输入更改时我循环遍历所有文本对象并匹配输入文本和文本对象文本如果匹配然后我将新文本更新到该对象..这工作正常第一次，但不是在那之后...我尝试但无法找到解决这个问题的方法。

这就是画布和输入现在的样子 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，并将其与您的输入进行比较。

＆＃13;

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();
    }
  });
});

＆＃13;

<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" />

＆＃13;

Fabric.js通过输入编辑文本

1 个答案: