2013-11-23 11 views
20

オブジェクトをプログラムで移動して成功させようとしましたが、オブジェクトがプログラム的に移動された後、オブジェクトの現在の位置を選択してオブジェクトを選択できませんでした、まだオブジェクトは古い位置から選択可能です私はcanvas.calcOffset();で試してもまだ動作していません。オブジェクト移動後のFabricjs新しい位置で選択できない

どのように私は、現在の位置にあるオブジェクトの選択

Javascriptを

var canvas=new fabric.Canvas('canvas'); 
canvas.add(new fabric.Rect({      
        left:100, 
        top: 100, 
        width: 75, 
        height: 50, 
        fill: 'white', 
        stroke: 'black', 
        strokeWidth: 3, 
        padding: 10, 
        selectable: true 
      })); 


function changePosition() 
{ 
    canvas.item(0).set({left:300}); 
    canvas.renderAll(); 
    canvas.calcOffset(); 
} 

HTML

<div> 
<canvas id="canvas" width="400" height="400" style="border:1px solid red"/> 
</div> 
<input type="button" onclick="changePosition()" value="Change Possition"/> 

Jsfiddle

を次のように私が使用しているコードを作ることができますエラーに

  1. を再現する

    階段現在の位置に四角形を選択してみてください、そしてオブジェクトが必要になります以前にあったplaveにカーソルを移動し変更位置ボタン

  2. をクリックしますオブジェクトを選択できるようにする
+15

'canvas.item(0).setCoords()' – kangax

+1

@kangaxありがとうございました。それが動かされれば、その座標が更新されるべきであるから、そのバグと思われる。 –

+0

@kangax私はホワイトボードを作成しようとしていますが、私は線を描きたいと思います。先生が線を描くときにすべての学生がホワイトボードに図面を更新する必要があります。 –

答えて

29

オブジェクトの位置をプログラムで変更する場合は、setCoords()メソッドを1回起動する必要があります。これにより、オブジェクトの座標を新しい位置に設定します。

+0

に感謝します。@innodelこれはkangaxによって非常に長い回答がありました。 –

関連する問題