Wie Maus auslösen: über Ereignis nach einem bestimmten Intervall mit Fabricjs?

Question

Ich möchte die Maus auslösen: Über-Ereignis nur, wenn der Benutzer für mehr als ein bestimmtes Intervall (z. B. 200ms) über Elemente schwebt.

Zur Zeit habe ich dieses Beispiel für das Hinzufügen der Veranstaltung „sofort“ verwendet: http://fabricjs.com/hovering

Was ist der beste Weg, um eine Verzögerung hinzufügen, bevor das Ereignis ausgelöst wird?

Grüße, Alex

Answer 1

In Ihrem Fall denke ich, Sie setTimeout Funktion innerhalb des mouse:over Handler verwenden können. Auf diese Weise können Sie etwas Verzögerung vor der Ausführung des Codes setzen.

Also, was ich tat: Verwenden Sie clearTimeout auf timeout variable

1) Verwenden Sie setTimeout innerhalb mouse:over Handler

2) den Verweis auf den gestarteten Timeout in var timeout;

3) speichern in mouse:out Handler um zu verhindern, dass der Code in mouse:over ausgeführt wurde, wenn die Maus aus ist, bevor die Verzögerung vollständig abgelaufen ist

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

Die aktuelle Timeout, das ich in diesem Codefragment verwenden ist 1000 Millisekunden = 1 Sekunde. Sie können dies in der setTimeout Funktion einstellen. Ich hoffe, das war hilfreich für Sie, lassen Sie mich wissen, wenn etwas unklar ist.