Fabric js Objekt Boudaries wird nicht aktualisiert, nachdem Objekt programmgesteuert verschoben

Question

Es gibt ein Objekt (Rechteck als Beispiel) und wenn ich es Position mit js ändern, konnte ich es nicht von neuem Ort, nur aus dem alten ziehen. Es gibt ein Beispiel unten. Drücken Sie "MOVE", um das Objekt zu verschieben und versuchen Sie, es zu ziehen. Es wird nicht ziehen, wenn Sie versuchen, aber es wird, wenn Sie seine alte Position ziehen.

var c = new fabric.Canvas('c'); 
 
c.add(new fabric.Rect({ 
 
\t left: 0, 
 
    top: 0, 
 
    width: 40, 
 
    height: 40, 
 
    fill: 'red' 
 
})); 
 

 
$('#init').click(function() { 
 
\t c.item(0).setLeft(0); 
 
    c.item(0).setTop(0); 
 
    c.renderAll(); 
 
}); 
 

 
$('#move').click(function() { 
 
\t c.item(0).setLeft(100); 
 
    c.item(0).setTop(100); 
 
    c.renderAll(); 
 
});

#c { 
 
    outline: 2px solid black; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.12/fabric.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<canvas id="c" width="200" height="200"></canvas> 
 
<button id="init"> 
 
INIT 
 
</button> 
 
<button id="move"> 
 
MOVE 
 
</button>

Answer 1

Das Problem auftritt, weil Sie das Objekt nicht aktualisieren 's Kontrollen koordiniert, nachdem es Ändern' s Position.

Sie benötigen .setCoords() Methode für das Objekt aufrufen, sie zu aktualisieren ‚s Kontrollen entsprechend koordiniert.

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ

var c = new fabric.Canvas('c'); 
 
c.add(new fabric.Rect({ 
 
    left: 0, 
 
    top: 0, 
 
    width: 40, 
 
    height: 40, 
 
    fill: 'red' 
 
})); 
 

 
$('#init').click(function() { 
 
    c.item(0).setLeft(0); 
 
    c.item(0).setTop(0); 
 
    c.item(0).setCoords(); //<-- call this 
 
    c.renderAll(); 
 
}); 
 

 
$('#move').click(function() { 
 
    c.item(0).setLeft(100); 
 
    c.item(0).setTop(100); 
 
    c.item(0).setCoords(); //<-- call this 
 
    c.renderAll(); 
 
});

#c{outline: 1px solid #ccc}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.12/fabric.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<canvas id="c" width="180" height="180"></canvas> 
 
<button id="init"> 
 
    INIT 
 
</button> 
 
<button id="move"> 
 
    MOVE 
 
</button>