javascript - FabricJS - Better solution to centering object on cursor when selected? -

i selectable objects snap center mouse cursor on click. modification allowed user in case moving object, no scaling, rotating, etc. updating position of object on mousedown or selected update position until moving event fired, object snap original position , begin following mouse.

rect.on('moving', movehandler); function movehandler(evt) {  var mousepnt = $canvas.getpointer(evt.e);  rect.set({   left:mousepnt.x - rect.width*0.5 , top:mousepnt.y - rect.height*0.5});  this.setcoords(); } 

this i've come center selectable rectangle on cursor, i'm it's firing 2 movement events. there way override original positioning. or should instead write own mousedown, mouseup, , moving listeners mimic default dragging behavior?

you solution fine if no rotating or scaling involved.

you not executing more necessary if not .setcoords during movement optional since called on mouseup when translation finished.

if want take mousedown approach, changing position once all, can use logic:

var canvas = new fabric.canvas('c');  canvas.add(new fabric.rect({width: 50, height: 50}));  canvas.on('mouse:down', function(opt) {    if (this._currenttransform && opt.target) {      var target = opt.target;      target.top = this._currenttransform.ey - target.height/2;      target.left = this._currenttransform.ex - target.width/2;      this._currenttransform.left = target.left;      this._currenttransform.offsetx = this._currenttransform.ex - target.left;      this._currenttransform.offsety = this._currenttransform.ey - target.top;      this._currenttransform.top = target.top;      this._currenttransform.original.left = target.left;      this._currenttransform.original.top = target.top;      this.renderall();    }  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.18/fabric.min.js"></script>  <canvas id="c" ></canvas>

you have modify transform information fabric noted down on mousedown event before mousedown handler executed.