CODEWITHSUNDEEP
javascriptfabricjs
Thirumalai murugan
Thirumalai murugan

Reputation: 5914

Fabricjs after object move programmatically its not selectable on its new position

I have tried to move the object programmatically and get success, but after the object is moved by programmatic way, its not able to select the object by selecting the object current position, still the object is selectable from by its old position I have tried with canvas.calcOffset(); still its not working.

How can I make the object selectable in its current position the code I have used as follows

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

Steps to reproduce the error

  1. Click the Change Position button
  2. Try selecting the rectangle on its current position, and move to the cursor to the plave where the object was previously there you will be able to select the object

Upvotes: 28

Views: 18833

Answers (1)

Innodel
Innodel

Reputation: 1426

you need to fire setCoords() method once if you are changing object's position programmatically. This will set Coords of your object to new position.

Upvotes: 40

Related Questions