FabricJS - 禁用平移视口-x -y轴

时间:2017-02-27 10:58:37

标签: javascript canvas fabricjs panning

如果鼠标离开画布并且鼠标移动到-x -y轴,我想要禁用平移。 如何禁用视点-x -y轴。

这是我的代码。

var panning = false;
canvas.on('mouse:up', function (e) {
    if (isPaningMode) {
        panning = false;
    }
});
canvas.on('mouse:out', function (e) {
    if (isPaningMode) {
        panning = false;
    }
});
canvas.on('mouse:down', function (e) {
    if (isPaningMode) {
        panning = true;
    }
});

canvas.on('mouse:move', function (e) {
    canvas.selection = !isPaningMode;
    if (isPaningMode && e && e.e && panning) {
        var units = 10;
        var delta = new fabric.Point(e.e.movementX, e.e.movementY);
        canvas.relativePan(delta);
    }
});

谢谢,对不起,我不能说英语。 :(

修改

enter image description here

我的画布大小:800x800 我只是想使用红色条纹区域。我不想使用X的部分。我不希望通过在这些字段中滚动来显示它们。我做了我说的对象。但我无法进行淘汰。简而言之,我只想按箭头的方向进行平移。

1 个答案:

答案 0 :(得分:0)

确保您使用的是最新版本的FabricJS,他们正在不断改进它。我在过去注意到canvas.on('mouse:out')定位的是对象,而不是画布。

这是一个有效的JSFiddle,https://jsfiddle.net/rekrah/bvgLvd3u/

enter image description here

我认为这是问题所在,因为你已经在鼠标移出画布时禁用平移。

canvas.on('mouse:out', function(e) {
  if (isPaningMode) {
    panning = false;
  }
});

让我知道,如果我错过了解你的英语 - 这是非常好的,顺便说一句!

编辑后

批量更改是在鼠标移动事件中。 总结:跟踪移动的距离,以便我们知道从哪里开始,回到(通过调整,如果需要) - 希望有意义???

var deltaX = 0;
var deltaY = 0;
canvas.on('mouse:move', function(e) {
  if (isPaningMode && e && e.e && panning) {
    moveX = e.e.movementX;
    if (deltaX >= 0) {
      deltaX -= moveX;
      if (deltaX < 0) {
        moveX = deltaX + moveX;
        deltaX = 0;
      }
    }
    moveY = e.e.movementY;
    if (deltaY >= 0) {
      deltaY -= moveY;
      if (deltaY < 0) {
        moveY = deltaY + moveY;
        deltaY = 0;
      }
    }
    if (deltaX >= 0 && deltaY >= 0) {
      canvas.relativePan(new fabric.Point(moveX, moveY));
    }
  }
});

这是一个新的,更新的,有效的JSFiddle,https://jsfiddle.net/rekrah/r3gm3uh9/