[英]fabric.js Stop object dragging programmatically
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.换句话说,当用户在某些情况下尝试拖动对象时,我想执行一些代码并阻止拖动。
Simply calling只需调用
fabric.deactivateAll();
I made a JSFiddle in which an object that is dragged is stopped after 500 milliseconds. 我做了一个JSFiddle ,其中拖动的对象在500毫秒后停止。 You can set rect.lockMovementX = true;
您可以设置rect.lockMovementX = true;
and rect.lockMovementY = true;
和rect.lockMovementY = true;
to stop dragging and set them false to allow dragging again. 停止拖动并将其设置为false以允许再次拖动。
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. 关于只需要将其应用于某些对象的需求:只需添加一个stopDragging
变量,该变量对于要停止拖动的对象的值为true,对于不想停止拖动的对象的值为false。 Then check in the onMoving
function whether or not e.target.stopDragging
is true or false. 然后,检查onMoving
函数中e.target.stopDragging
是true还是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
});
})();
I was looking for the same solution.我一直在寻找相同的解决方案。 I had a discussion with a fabricjs dev that this will lead to bad ux-experience on smartphones.我与一个 fabricjs 开发人员讨论过,这将导致智能手机上的用户体验不佳。
Instead I do animate now that the block moves itself back to a valid position.相反,我现在做动画,块移动自己回到一个有效的位置。
"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.