javascript - Fabric.js 通过输入编辑文本

标签 javascript jquery fabricjs

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

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

这是我现在创建的用于更改 Canvas 文本的函数

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

最佳答案

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

不需要执行if (e.text == v)只需使用一些唯一的id设置所有fabric对象并将其与您的输入。

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

关于javascript - Fabric.js 通过输入编辑文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45647084/

相关文章:

javascript - Fabric.js 混合模式 - 混合图像为黑色

javascript - 编写此正则表达式的替代方法,因为它无法在除 Chrome 之外的其他浏览器中运行

javascript - 使用 fabric.js 在加载图像样式时添加框阴影

javascript - 在javascript中进行类型检查

php - 如何设置下拉列表项的样式

javascript - 在移动设备中聚焦于文本区域时无法聚焦于按钮

javascript - Select2 off ('change' ).on ('change' .....) 无法更改所选选项

javascript - 无法维护 fabricjs 组元素的 strokeWidth

AJAX 重新加载后,javascript 包含的文件消失了

javascript - 以这些方式包装时,代码执行有何不同