HTML5 Large canvas

J'ai remarqué que lors de la création dynamique d'un grand canevas (6400x6400), il ne se passera que très peu de temps, et lorsque le canevas est petit, il fonctionne 100% du temps, Cependant, comme je ne connais pas mieux, je n'ai pas d'autre choix que d'essayer de faire fonctionner correctement la grande toile.HTML5 Large canvas

thisObj.oMapCanvas = jQuery(document.createElement('canvas')).attr('width', 6400).attr('height', 6400).css('border','1px solid green').prependTo(thisObj.oMapLayer).get(0);

 // getContext and then drawing stuff here...

Le but de la toile est de tirer simplement une ligne entre deux noeuds (images), qui sont dans un conteneur div qui peut être déplacé autour (je pense que les gens viewport les appellent). Ce que je "pense" peut être que sur une toile redimensionner vide le canevas, et cela interfère avec le dessin du contexte, comme je l'ai dit précédemment, il fonctionne tout le temps quand la toile est beaucoup plus petite.

Est-ce que quelqu'un a déjà vécu cela et/ou connaît des solutions possibles?

Source

2009-12-26 Steve

C'est une toile de taille énorme. 6400 x 6400 x 4 octets par pixel est de 156 Mo, et votre implémentation peut avoir besoin d'allouer deux ou plusieurs tampons de cette taille, pour la double mise en mémoire tampon, ou besoin d'allouer de la mémoire vidéo de cette taille. Il faudra un certain temps pour allouer et effacer toute cette mémoire, et vous ne serez peut-être pas assuré de réussir à une telle allocation. Y a-t-il une raison pour laquelle vous avez besoin d'une toile aussi énorme? Vous pouvez à la place essayer de dimensionner votre toile pour être aussi grand que nécessaire pour dessiner la ligne entre ces deux divs, ou vous pouvez essayer d'utiliser SVG au lieu d'une toile.

Une autre possibilité serait d'essayer de diviser votre toile en gros carreaux, et de ne restituer que les carreaux qui sont réellement visibles à l'écran. Google Maps le fait avec des images, pour charger uniquement des images pour la partie de la carte qui est actuellement visible (plus un supplémentaire de chaque côté de l'écran pour s'assurer que lorsque vous faites défiler vous n'aurez pas besoin d'attendre pour le rendre) , en gardant l'illusion qu'il y a une énorme toile tout en ne rendant que quelque chose de plus gros que la fenêtre.

Source

2009-12-26 18:14:01

C'est pour rendre une carte de 100x100 générée aléatoirement, chaque cellule étant 64x64 (pensez à une starmap où les étoiles sont connectées via des starlanes), une autre approche que j'ai été tentée est de créer une toile par lien (ligne) nécessaire, je pensais juste que ce serait beaucoup plus lent en raison de beaucoup plus d'insertions dans la dom. À l'origine je suis allé avec la bibliothèque de dessin javascript wz_jsgraphics, mais cela a rendu le défilement très lent en raison de la nature de la façon dont cela rend les lignes. – Steve

Je n'ai également jamais réalisé les besoins en mémoire pour ce faire, ce qui le rend en effet irréalisable. Je vais devoir faire ceci dynamiquement avec SVG, merci! – Steve

La plupart des navigateurs qui implémentent HTML5 sont encore en version bêta - il est donc probable qu'ils continuent à corriger les bogues.

Cependant, la résolution du canevas que vous essayez de créer est très élevée .. beaucoup plus élevée que ce que la plupart des moniteurs peuvent même afficher. Y a-t-il une raison pour laquelle vous en avez vraiment besoin? Pourquoi ne pas limiter la zone déplaçable à quelque chose de plus conforme aux résolutions d'affichage habituelles?

Source

2009-12-26 16:49:59 LBushkin

C'est à l'intérieur d'une div qui a un débordement: caché, et dans javascript vous pouvez maintenir et faire glisser le contenu de cette div (en définissant les attributs haut et gauche) afin que vous puissiez en voir certaines parties. – Steve

J'ai eu le même problème! Je voulais utiliser une grande toile pour connecter quelques divs. Finalement, j'ai abandonné et dessiné une ligne en utilisant javascript (j'ai dessiné ma ligne en utilisant de petites images comme des pixels - je l'ai fait avec divs en premier, mais dans IE les divs sont sortis trop gros).

Source

2012-08-27 17:16:20 Marina

HTML5 Large canvas

Répondre

Questions connexes