Élément de toile lente

Question

En utilisant l'élément Canvas, je dessine une ligne d'un élément à un autre élément. Un autre élément est déplaçable, et lorsque vous faites glisser l'élément, la ligne suit l'élément déplaçable.

Mon problème est que le rendu apears lent (Fx 3.5 sur un Mac PowerBook) je pense que je l'ai vu de bien meilleures performances en toile avant

Toute personne ayant une expérience de toile qui peut donner quelques conseils de performance?

Merci à l'avance

La méthode suivante est appelée sur l'événement on glisser,

// Runs when the element is dragged. 
function onDrag(key) 
{ 
    var ctx = canvas.context; 
    var fromRect = $('#box-' + key).offset(); 
    var fromHeight = $('#box-' + key).height(); 
    var fromWidth = $('#box-' + key).height(); 

    var toRect = $('#draggable').offset(); 
    var toWidth = $('#draggable').width(); 

    var startX = toRect.left + toWidth/2; 
    var startY = toRect.top + 4; 
    var endX = fromRect.left + fromWidth/2; 
    var endY = fromRect.top + fromHeight/2; 

    ctx.clearRect(0, 0, 5000, 5000); 
    ctx.beginPath(); 
    ctx.moveTo(startX, startY); 
    ctx.lineTo(endX, endY); 
    ctx.strokeStyle = "rgba(0, 0, 0,1)"; 
    ctx.stroke(); 

}

Merci pour les conseils,

meilleures salutations Eric

Answer 1

I serait prêt à parier que les appels de fonction jQuery prennent plus longtemps han le dessin. Si votre application vous permet de calculer facilement le décalage et les dimensions sans utiliser jQuery, vous pourrez peut-être extraire une vitesse supplémentaire.

Answer 2

Si possible, cache des sélections jQuery:

var onDrag = (function(){ 

    var draggable = $('#draggable'), 
     ctx = canvas.context; // btw, don't you mean canvas.getContext('2d')? 

    return function(key) { 

     var box = $('#box-' + key), 
      fromRect = box.offset(), 
      fromHeight = box.height(), 
      fromWidth = box.height(), 
      toRect = draggable.offset(), 
      toWidth = draggable.width(), 
      startX = toRect.left + toWidth/2, 
      startY = toRect.top + 4, 
      endX = fromRect.left + fromWidth/2, 
      endY = fromRect.top + fromHeight/2; 

     ctx.clearRect(0, 0, 5000, 5000); 
     ctx.beginPath(); 
     ctx.moveTo(startX, startY); 
     ctx.lineTo(endX, endY); 
     ctx.strokeStyle = "rgba(0, 0, 0,1)"; 
     ctx.stroke(); 

    }; 

})(); 

---

Règle générale: Si vous avez une fonction qui sera exécuté plusieurs fois en succession rapide puis assurez-vous que vous faites seulement ce que ABSOLUMENT HAS À FAIRE à chaque appel de la fonction.

Answer 3

En cas de localiser les éléments de leurs cartes d'identité et la lecture de leurs dimensions est le goulot d'étranglement, vous pouvez essayer memoizing votre fonction:

function onDrag(key) { 
    var cached = onDrag.cache[key]; 

    if (!cached) { 
     cached = { 
      fromRect = $('#box-' + key).offset(); 
      // etc. 
     }; 

     onDrag.cache[key] = cached; 
    } 

    var toRect = $('#draggable').offset(); 
    // etc. 
} 

onDrag.cache = {}; 

Ce pourrait vous donner un gain de performance.

Aussi, pouvez-vous essayer de sortir le clearRect() pour voir si cela fait une grande différence? Vous voudrez peut-être stocker l'emplacement du précédent glisser et simplement revenir sur la ligne précédente pour l'effacer au lieu de peindre 5000 x 5000 = 25 millions de pixels. Juste une intuition, car le remplissage de 25M pixels peut ou ne peut pas être un problème basé sur l'implémentation de la toile.

Answer 4

Je pense vraiment que vous devriez closePath() à la fin

Answer 5

Cela pourrait être très lent, surtout pour une si grande surface. Essayez de ne supprimer que ce dont vous avez besoin à la place:

ctx.clearRect (0, 0, 5000, 5000);