Fabric.js入力を介してテキストを編集する

Question

私はファブリックjsキャンバス上のプレデアデザインを変更できる 'vistaprint.in'のようなオンライン印刷メディアアプリケーションに取り組んでいます。 fabric.jsオブジェクトには、オブジェクトの一意の識別子はありません。すべてのテキストオブジェクトは、それぞれの入力を作成するので、ユーザーは入力を変更するだけで目的のテキストを直接変更できます。右のスクリーンショットで見ることができますキャンバス各テキストオブジェクトの入力があります...私が今やっていることは、入力が変更されるときです。すべてのテキストオブジェクトをループし、入力テキストとテキストオブジェクトテキストが一致すれば、そのオブジェクトに新しいテキストを更新します。私は試しましたが、これを解決するために何をすべきかを見つけることができませんでした。

これは、キャンバスと入力が今 Screenshot of app

のように見え、これは私がキャンバスのテキストを変更するために、今作成した関数である方法です

あなたは idプロパティを指定する必要が

$(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

fabricオブジェクトに変更し、そのプロパティをinputで以下のサンプルとして確認してください

いいえif (e.text == v)すべてfabricオブジェクトを固有のidに設定して入力と比較してください。私はそれがIDで動作することを知っているが、問題は、我々はすでにデザインの千を作成し、任意の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" />