Élément Canvas lent

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 lors du déplacement de l'élément, la ligne suit l'élément déplaçable.

Mon problème est que le rendu semble lent (Fx 3.5 sur un Mac PowerBook). Je pense avoir vu une bien meilleure performance en Canvas auparavant.

Quelqu'un ayant de l'expérience avec Canvas peut donner quelques conseils de performance?

Merci d'avance.

La méthode suivante est appelée lors de l'événement de glissement :

// S'exécute lorsque l'élément est glissé.
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,

Cordialement, Eric

Answer 1

Je parierais que les appels de fonctions jQuery prennent plus de temps que le dessin. Si votre application vous permet de calculer facilement le décalage et les dimensions sans utiliser jQuery, vous pourriez peut-être extraire une vitesse supplémentaire à cet endroit.

Answer 2

Lorsque c'est possible, mettez en cache les sélections jQuery :

var onDrag = (function(){

    var draggable = $('#draggable'),
        ctx = canvas.context; // au fait, ne voulez-vous pas dire 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ée plusieurs fois de suite rapidement, assurez-vous de ne faire que ce qui DOIT ABSOLUMENT ÊTRE FAIT à chaque appel de la fonction.

Answer 3

En cas de repérer les éléments par leurs ids et de lire leurs dimensions est le goulet d'étranglement, vous pouvez essayer de mémoriser 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 = {};

Ceci pourrait vous donner un gain de performance.

Aussi, pouvez-vous essayer de retirer le clearRect() pour voir si cela fait une grosse différence ? Vous voudrez peut-être stocker l'emplacement du glisser précédent et simplement retracer la ligne précédente pour l'effacer au lieu de peindre 5000 x 5000 = 25 millions de pixels. Juste une intuition, car remplir 25M de pixels peut ou non être un problème en fonction de l'implémentation du canvas.

Answer 4

Je pense vraiment que vous devriez fermer le chemin à la fin

Answer 5

Cela pourrait être très lent, surtout pour une surface aussi grande. Essayez de ne nettoyer que ce dont vous avez vraiment besoin :

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