28

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
Charles
  • 50,943
  • 13
  • 104
  • 142
Thirumalai murugan
  • 5,698
  • 8
  • 32
  • 54

1 Answers1

40

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.

Innodel
  • 1,416
  • 12
  • 16
  • thanks @innodel this has been answered by kangax very long back please check the comment below my question. – Thirumalai murugan Oct 16 '14 at 05:46
  • I just realized that even when you change selection padding programmatically, you need to call `setCoords()` to adjust corners click area. Thank you ! – vmeyer Apr 06 '20 at 09:29