Comment déclencher la souris: over event après un certain intervalle en utilisant fabricjs?

Question

Je veux déclencher l'événement mouse over: lorsque l'utilisateur survole un élément pendant plus d'un intervalle défini (par exemple 200 ms).

Actuellement, j'ai utilisé cet exemple pour ajouter l'événement « instantanément »: http://fabricjs.com/hovering

Quelle est la meilleure façon d'ajouter un délai avant que cet événement est déclenché?

Cordialement, Alex

Answer 1

Dans votre cas, je pense que vous pouvez utiliser setTimeout fonction dans le gestionnaire mouse:over. De cette façon, vous pouvez mettre un peu de temps avant d'exécuter le code.

Alors ce que je faisais:

1) Utilisez setTimeout à l'intérieur mouse:over gestionnaire

2) sauf référence au délai d'attente a commencé à var timeout;

3) utiliser clearTimeout sur timeout variable dans mouse:out gestionnaire pour empêcher l'exécution du code mouse:over si la souris est éteinte avant la fin du délai

(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>

Le délai d'attente actuel que j'utilise dans cet extrait de code est 1000 millisecondes = 1 seconde. Vous pouvez ajuster ceci dans la fonction setTimeout. J'espère que cela a été utile pour vous, faites le moi savoir si quelque chose n'est pas clair.