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