fabric.js以编程方式停止对象拖动 [英] fabric.js Stop object dragging programmatically

问题描述

在某些情况下，在我的mouse:down事件侦听器中，我想停用用户刚刚使用mouse:down激活的对象.换句话说，在某些情况下，当用户尝试拖动对象时，我想执行一些代码并防止拖动.

In my mouse:down event listener under certain conditions I want to deactivate the object that user just activated with mouse:down. In other words when user tries to drag an object in some cases I want to execute some code and prevent the dragging.

简单地打电话

fabric.deactivateAll();

将取消选择对象(对象控件消失)，但拖动功能不会中断.

will deselect the object (object control disappears) but the dragging functionality will be uninterrupted.

我试图:

fabric.fire('mouse:up');

模拟用户放开对象并触发，但对拖动没有影响.

to simulate user letting go of object and it fires but it has no effect on dragging.

如何以编程方式禁用拖动?如果这两种方法不相同，我又如何在另一个对象上激活它?

How can I programmatically disable dragging? Also how would I active it on another object if the two methods are not the same?

 

上下文:我有一组用户可以正常操作的对象.但是，该组中有一个特殊对象，即当用户尝试通过单击该特殊对象进行拖动时，应将其从组中删除，然后添加到画布中，并且拖动应应用于特殊对象而不是整个组.取消选择特殊对象后，它将再次添加到组中.除了将拖动功能从整个组转移到特殊对象的那一部分之外，我都能正常工作.

Context: I have a group of objects that user can manipulate normally. However there is one special object in that group in that when user tries to drag by clicking on that special object it should be removed from group, added to canvas and the dragging should be applied to special object instead of entire group. After the special object is deselected it gets added to group again. I have everything working except the part where dragging functionality is transferred from entire group to special object.

推荐答案

我在其中制作了 JSFiddle 在500毫秒后停止了被拖动的对象.您可以将 rect.lockMovementX = true; 和 rect.lockMovementY = true; 设置为停止拖动，并将它们设置为false以允许再次拖动.

I made a JSFiddle in which an object that is dragged is stopped after 500 milliseconds. You can set rect.lockMovementX = true; and rect.lockMovementY = true; to stop dragging and set them false to allow dragging again.

关于只需要将其应用于某些对象的需求:只需添加一个 stopDragging 变量，该变量对于要停止拖动的对象具有真值，对于不想要的对象具有false想要停止拖动.然后在 onMoving 函数中检查 e.target.stopDragging 是对还是错.

Regarding your need to only apply it to certain objects: just add a stopDragging variable, which has true as value for the objects that you want to stop dragging, false for the ones you don't want to stop dragging. Then check in the onMoving function whether or not e.target.stopDragging is true or false.

(function() {
  var canvas = new fabric.Canvas("canvas");
  fabric.Object.prototype.transparentCorners = false;

  var rect = new fabric.Rect({
    width: 100,
    height: 100,
    top: 100,
    left: 100,
    fill: 'rgba(255,0,0,0.5)'
  });

  canvas.add(rect);

  var timeoutTriggered = false;

  function stopDragging(element) {
    element.lockMovementX = true;
    element.lockMovementY = true;
  }

  function onMoving(e) {
    if (!timeoutTriggered) {
      setTimeout(function() {
        stopDragging(e.target);
      }, 500);
      timeoutTriggered = true;
    }
  }
  canvas.on({
    'object:moving': onMoving
  });
})();

这篇关于fabric.js以编程方式停止对象拖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！