避免触发"canvas.on('mouse:up'， function() {..}),对象结

FabricJS - Avoid triggering "canvas.on('mouse:up', function() { ... })" after object end moving

本文关键字：function 对象 up on canvas mouse quot      更新时间：2023-09-26

使用FabricJS，我正在制作一个画布，可以添加矩形。一旦矩形被添加到画布上，它就可以被拖动到任何位置。

我的问题是当我停止拖动矩形时，事件:

canvas.on('mouse:up', function(element) { ... });

被触发，但这是一个不需要的行为。

如何触发事件:

canvas.on('mouse:up', function(element) { ... });

仅当有效地单击鼠标左键时，而不是当我结束拖动对象时?

你可以这样做:

var _isDragging = false;
var _isMouseDown = false;
canvas.on('mouse:down', function () {
    _isMouseDown = true;
    // other stuff
});
canvas.on('mouse:move', function () {
    _isDragging = _isMouseDown;
    // other stuff
})
canvas.on('mouse:up', function(element) {
    _isMouseDown = false;
    var isDragEnd = _isDragging;
    _isDragging = false;
    if (isDragEnd) {
        // code for drag complete
    } else {
        // code for no drag mouse up
    }
    // code for both
});

应避免添加mouse:move侦听器
因为move事件会在每个像素上触发
参见fabric.js事件检查器示例

在大多数情况下，您只需要比较
mousedown和mouseup的两个点击位置 
fabricjs_obj
.on('mousedown', function (event) {
    event.target.dragStart = event.pointer
})
fabricjs_obj
.on('mouseup', function (event) {
    const a = event.target.dragStart
    const b = event.pointer
    const obj = event.target
    if (a.x != b.x || a.y != b.y) {
        console.log('obj dragged: '+obj)
        return // stop event handler
    }
    console.log('obj clicked: '+obj)
    // process click event
})
相关文章：