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