Dev Faq
6
votes

Enregistrer Contenu pour être redessiné dans les cadres d'animation ultérieurs?

Je dessine un graphique sur un qui nécessite des calculs coûteux. Je voudrais créer une animation (lors du déplacement de la souris sur la toile) où le graphique est immuable, mais d'autres objets sont dessinés dessus.

Parce que la toile devra être redessinée beaucoup, je ne veux pas effectuer les calculs pour rendre le graphique pour chaque cadre. Comment puis-je dessiner le graphique une fois, l'enregistrer, puis utiliser le rendu sauvegardé pour redessiner des cadres suivants de l'animation, de sorte que les calculs coûteux ne soient pas à se produire une fois et que tout ce que je dois redessiner est la couche d'animation beaucoup plus simple?

J'ai essayé de dessiner le graphique sur une seconde toile, puis en utilisant ctx.drawimage () pour le rendre sur la toile principale, mais le dessin sur la toile ne semble pas fonctionner à moins que ce soit dans le DOM & NON Affichage: Aucun; . Dois-je faire quelque chose de hacky comme position de la toile Temp hors de vue ou est-il une façon plus propre de faire cela?

0 commentaires

3 Réponses :

1
votes

Je devais faire quelques modifications au FLOTT.JS bibliothèque de graphique. Je suis sûr de 99% qu'il utilise des toiles de chevauchement. Il y a une couche de graphique et une couche de recouvrement. Vous pouvez regarder le code source.

0 commentaires
3
votes

Que diriez-vous de dessiner votre graphique la première fois sur votre toile, puis xxx

, puis xxx

pour le reste du rendu .

3 commentaires

Cela fonctionnerait-il dans IE? Les excanvas appuient-ils la fonctionnalité des imagétata de la toile?

Non et non. Mais c'était une question sur que c'est-à-dire pas en charge.

Bon point. C'est vrai si votre cible est Adobe Air, Safari mobile, Titanium ou toute autre plate-forme Sane où vous pouvez perdre vos inquiétudes.

6
votes

Vous devez utiliser au moins 2 toiles: une avec le dessin complexe et la seconde, sur la première (avec la même taille, positionnée en absolu), avec les formes animées. Cette méthode fonctionnera sur c'est-à-dire et getimageData ne fonctionne pas avec des excanvas.

Chaque bibliothèque qui fait des dessins complexes sur les toiles utilisent cette méthode (flot et autres). P> 

<div style="width: 600px; height: 300px; position: relative;" id="container">
  <canvas class="canvas" style="position: absolute; left: 0px; top: 0px;" width="600" height="300"/>
  <canvas class="overlay" style="position: absolute; left: 0px; top: 0px;" width="600" height="300"/>
</div>

1 commentaires

Je ne le savais pas - et je n'ai jamais rien vu à ce sujet dans toutes les documents de toile que j'ai lus. Bonne note.

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO