對象以編程方式移動後，織物js對象badaries不會更新

有一些對象（矩形作爲示例），當我使用js更改位置時，我無法將它從新位置拖動，只能從舊位置拖動。下面有一個例子。按「MOVE」移動對象並嘗試拖動它。如果你嘗試，它不會拖動，但如果你拖動他的舊位置，它將會拖動。對象以編程方式移動後，織物js對象badaries不會更新

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>

來源

2017-06-12 Iworb

問題發生，因爲，你是不是S位置 '更改它後小號控制' 的座標更新的對象。

你需要調用.setCoords()對象上的方法來更新它的控制相應的座標。

ᴡᴏʀᴋɪɴɢᴇ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>

來源

2017-06-12 15:38:25

對象以編程方式移動後，織物js對象badaries不會更新

回答

相關問題