Fabricjs i-textクローンの問題

Question

fabricjs i-textのクローニングに問題があります。選択したクローンテキストの色を変更すると、元のテキストカラーも変更されます。

var canvas = new fabric.Canvas('mycanvas'); 
 
var itext = new fabric.IText("New text", { left : 50, top : 50}); 
 
itext.setSelectionStyles({fill: 'red'}); 
 
canvas.add(itext).renderAll(); 
 

 
$('#clone').on('click', function(){ 
 
    var obj = canvas.getActiveObject(); 
 
    if(obj == null) return; 
 
    var obj1 = obj.clone(); 
 
    obj1.set({ 
 
     letf : 150, 
 
     top : 150 
 
    }); 
 
    canvas.add(obj1).renderAll(); 
 
}); 
 

 
$("#colorchange").on('click',function(){ 
 
    var obj = canvas.getActiveObject(); 
 
    if(obj == null) return; 
 
    if(obj.setSelectionStyles && obj.isEditing) 
 
     obj.setSelectionStyles({fill: 'red'}); 
 
    else 
 
    obj.set({fill: 'red'}); 
 
    canvas.renderAll(); 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script> 
 

 
<canvas id="c"></canvas> 
 
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
 
<canvas id="mycanvas" width="400" height="300" style="border:solid 1px #ccc;"></canvas><br> 
 
<button id="clone">clone</button> 
 
<button id="colorchange">change color</button>

Answer 1

私はいくつかの変更を加えたし、私はあなたが必要な結果を生成することができています。あなたが必要とするものがあれば教えてください。

var canvas = new fabric.Canvas('mycanvas'); 
 
var itext = new fabric.IText("New text", { left : 50, top : 50}); 
 
itext.setSelectionStyles({fill: 'red'}); 
 
canvas.add(itext).renderAll(); 
 

 
$('#clone').on('click', function(){ 
 
    var gobj = canvas.getActiveObject(); 
 
    if(gobj == null) return; 
 
    var obj1 = gobj.clone(); 
 
    var vobj = obj1; 
 
    vobj.set({ 
 
     left: 100, 
 
     top: 100, 
 
     fill: 'blue' 
 
    }); 
 
    canvas.add(vobj).renderAll(); 
 
}); 
 

 
$("#colorchange").on('click',function(){ 
 
    var obj = canvas.getActiveObject(); 
 
    if(obj == null) return; 
 
    if(obj.setSelectionStyles && obj.isEditing) 
 
     obj.setSelectionStyles({fill: 'red'}); 
 
    else 
 
    obj.set({fill: 'red'}); 
 
    canvas.renderAll(); 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script> 
 

 

 
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
 
<canvas id="mycanvas" width="400" height="300" style="border:solid 1px #ccc;"></canvas><br> 
 
<button id="clone">clone</button> 
 
<button id="colorchange">change color</button>

Answer 2

私は解決策、男を見つけて下さい！ 問題の鍵はです。クローン関数はコールバックを使用しません。 このように使用できます：

obj.clone(function(newobj){ 
newobj.set({ 
    letf : 150, 
    top : 150 
}); 
    canvas.add(newobj).renderAll(); 
});