Question

我希望可选择的对象在点击时将其中心捕捉到我的鼠标光标。在这种情况下，允许用户进行的唯一修改是移动对象，不进行缩放，旋转等。只需更新mousedown或selected上对象的位置，只会更新其位置，直到{{触发事件，其中对象将捕捉到其原始位置，然后开始跟随鼠标。

moving

这就是我用来将可选矩形置于光标中心的方法，但我确定它会触发两个移动事件。有没有办法覆盖原始定位。或者我应该编写自己的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(); }，mousedown和mouseup侦听器来模仿默认的拖动行为？

Answer 1

如果不涉及旋转或缩放，您的解决方案就可以了。

如果不是移动期间的.setCoords是可选的，那么你不会执行任何超出必要的操作，因为它将在翻译完成后在mouseUp上调用。

如果你想采用mouseDown方法，一次更改位置，你可以使用这个逻辑：

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>

在执行mousedown处理程序之前，您必须修改结构在mouseDown事件中记下的所有转换信息。

FabricJS - 选择时在光标上居中对象的更好解决方案？

1 个答案: