FabricJS - 禁用平移视口 -x -y 轴
FabricJS - disable panning viewport -x -y axis
如果鼠标移出 canvas 并且鼠标在 -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);
}
});
谢谢,抱歉我英语说得不好。 :(
编辑
我的 canvas 尺寸:800x800
我只想使用红色条纹区域。我不想使用带有 X 的部分。我不想通过在这些字段中滚动来显示它们。我按照我对对象所说的去做了。但是我无法进行平移。总之,我只想按箭头方向平移。
确保您使用的是最新版本的 FabricJS,他们会不断改进它。我过去注意到 canvas.on('mouse:out')
是针对对象而不是 canvas。
这是一个有效的 JSFiddle,https://jsfiddle.net/rekrah/bvgLvd3u/。
我假设这是问题所在,因为您已经在 canvas.
的鼠标移出时禁用平移
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/。
如果鼠标移出 canvas 并且鼠标在 -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);
}
});
谢谢,抱歉我英语说得不好。 :(
编辑
我的 canvas 尺寸:800x800 我只想使用红色条纹区域。我不想使用带有 X 的部分。我不想通过在这些字段中滚动来显示它们。我按照我对对象所说的去做了。但是我无法进行平移。总之,我只想按箭头方向平移。
确保您使用的是最新版本的 FabricJS,他们会不断改进它。我过去注意到 canvas.on('mouse:out')
是针对对象而不是 canvas。
这是一个有效的 JSFiddle,https://jsfiddle.net/rekrah/bvgLvd3u/。
我假设这是问题所在,因为您已经在 canvas.
的鼠标移出时禁用平移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/。