如何使用fabricjs在一段时间后触发鼠标：over事件？

Question

我只想在用户将鼠标悬停在某个元素上超过特定设置间隔（例如200毫秒）时才触发鼠标：over事件。

目前我已经使用了添加事件“瞬间”这个例子： http://fabricjs.com/hovering

是什么触发该事件之前增加一个延迟的最佳方式？

问候， 亚历

Answer 1

在你的情况，我认为你可以使用mouse:over处理器中setTimeout功能。这样你可以在执行代码之前放一些延迟。

所以我做了什么：

1）使用setTimeout内mouse:over处理

2）保存参考启动超时在var timeout;

3）timeout变量使用clearTimeout在mouse:out处理程序防止mouse:over中的代码在延迟完全完成之前如果鼠标没有被执行

(function() { 
 
    var canvas = this.__canvas = new fabric.Canvas('c'); 
 
    fabric.Object.prototype.transparentCorners = false; 
 
    
 
    var timeout; 
 
    canvas.on('mouse:over', function(e) { 
 
    if(!e.target) return false; 
 
    
 
    timeout = setTimeout(function(){ 
 
     e.target.setFill('red'); 
 
     canvas.renderAll(); 
 
    }, 1000) 
 
    }); 
 

 
    canvas.on('mouse:out', function(e) { 
 
    if(!e.target) return false; 
 
    
 
    /* clear the timeout so we make sure that mouse:over code will not execute if delay is not completed */ 
 
    clearTimeout(timeout); 
 
    
 
    e.target.setFill('green'); 
 
    canvas.renderAll(); 
 
    }); 
 

 
    // add random objects 
 
    for (var i = 15; i--;) { 
 
    var dim = fabric.util.getRandomInt(30, 60); 
 
    var klass = ['Rect', 'Triangle', 'Circle'][fabric.util.getRandomInt(0,2)]; 
 
    var options = { 
 
     top: fabric.util.getRandomInt(0, 300), 
 
     left: fabric.util.getRandomInt(0, 300), 
 
     fill: 'green' 
 
    }; 
 
    if (klass === 'Circle') { 
 
     options.radius = dim; 
 
    } 
 
    else { 
 
     options.width = dim; 
 
     options.height = dim; 
 
    } 
 
    canvas.add(new fabric[klass](options)); 
 
    } 
 
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.16/fabric.js"></script> 
 

 
<canvas id="c" width="300" height="300"></canvas>

我使用在此代码段当前超时是1000毫秒= 1秒。您可以在setTimeout函数中调整它。我希望这对你有所帮助，如果有些事情不清楚，请告诉我。