Animer le redimensionnement du canevas HTML5 créé par le framework KineticJS

Question

J'essaie de changer le taille d'un HTML5 toile élément créé par le CinétiqueJS cadre--c'est-à-dire pas les objets à l'intérieur du canevas, mais la taille de l'élément.

Depuis le jQuery .animate la fonction ne peut pas être utilisée dans ce domaine (elle change le CSS, je veux qu'elle change les attributs réels de l'élément), j'ai dû développer ma propre fonction qui utilise l'interne stage.setSize(width, height) fonction fournie par l'API KineticJS.Je n'ai aucune expérience dans l'écriture de fonctions d'animation, donc j'aborde peut-être la situation complètement mal.

Le problème:C'est dépendant des performances, donc souvent pas assez rapide (merci à setInterval).Sans oublier que cela ne fonctionne que partiellement sur les appareils mobiles (iPhone 4S iOS 5.0.1 testé).Toute solution doit fonctionner plus ou moins parfaitement, même sur les appareils mobiles.

Je recherche différentes façons d'améliorer cette fonction.Tirer.

(Pour ceux qui n'ont pas pu voir le lien vers mon code ; http://jsfiddle.net/G4nuH/animateResize est la fonction pertinente.)

Answer 1

Après quelques recherches, j'ai trouvé ma propre solution hacky.Un exemple utilisant jQuery.animate.J'ai dû tous les animer, car KineticJS a plusieurs couches d'arrière-plan.

    //Gather all canvases
    var canvases = document.getElementsByTagName("canvas");

    //Animate their size
    for(var c in canvases) {
       $(canvases[c]).animate({
          'width': "100px",
          'height': "100px"
       }, 500);
    }

Answer 2

Sans connaître les spécificités de votre application finale, je vous recommande d'éviter si vous le pouvez l'animation de la taille du canevas.Comme vous le savez probablement, si vous modifiez la taille d'un élément de canevas, tout ce qui y est stocké est effacé.Cela signifie que l'animation des dimensions nécessite que vous ajustiez la largeur et/ou la hauteur progressivement tout en redessinant l'intégralité du canevas à chaque itération.Pour un ordinateur de bureau, ce n’est probablement pas un gros problème.Les appareils mobiles auront cependant du mal.

Au lieu de cela, je vous suggère de simuler l'animation en augmentant la taille d'un élément conteneur (avec une bordure, une couleur d'arrière-plan, etc.donc l'animation est apparente).Ensuite, une fois l'animation terminée, enregistrez les données actuelles de votre canevas dans un objet temporaire, augmentez la taille de votre canevas et tamponnez-y l'ancien contenu.

Si vous cherchez à animer les dimensions du canevas pour révéler un contenu déjà présent sur un canevas théorique plus grand (c.-à-d.l'utilisateur a une petite fenêtre qui recadre tout le canevas), vous feriez mieux de jouer avec votre CSS width et height avec le overflow: hidden; propriété.Avec cette approche, vous modifieriez l'intégralité de votre canevas pendant toutes les opérations de dessin, mais l'animation de la taille de votre fenêtre serait simple et fluide.

Answer 3

Le canevas est un port d'affichage pour les graphiques, il peut représenter toute la taille de votre document.Vous pouvez utiliser le context.clip() fonction pour définir la zone que vous souhaitez afficher au lieu de redimensionner le canevas ce qui nécessite la mise à jour du modèle de boîte html.(votre problème de performances !)

ctx.moveTo(162, 20);
ctx.lineTo(162, 320);
ctx.lineTo(300, 320);
ctx.lineTo(300, 20);
ctx.clip();