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

我做了一些改动，我能够产生你需要的结果。如果那就是你需要的，请告诉我。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我找到解决方案，伙计！问题的关键是您的克隆功能不使用回调。 你可以这样使用它：

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

Fabricjs i-text克隆问题

2 个答案: