Desenho em javascript com divs

votos
2

Na minha busca para aprender javascript (que parece ser o meu mais recente fonte de perguntas por tanto estes dias) eu encontrei essa API para desenhar http://www.c-point.com/javascript_vector_draw.htm

Enquanto isso, eu tenho vindo a fazer algumas experiências com gráficos, que tendem a ser pesado sobre a quantidade de coisas para desenhar. Esse cara está desenhando com divs, cada parte quadrada da imagem é um div. Você pode facilmente verificar isso inspecionando o seu exemplo na página.

Ele vai para fazer divs 1px / 1px para desenhar um pixel

Agora, o que eu tenho a fazer é o seguinte:

É este o melhor método? Parece bastante pesado quando um desenho é mais elaborado. Que outros métodos que você sugest?

Esta biblioteca de desenho JavaScript? já tem um par de links para libs assim não há necessidade de colocar qualquer aqui.

Eu vi aqui no SO outras questões relativas desenho. Eu só estou querendo saber até que ponto desenho com divs não é horrível!

Publicado 09/12/2008 em 20:57
fonte usuário
Em outras línguas...                            


3 respostas

votos
2

para o desenho vetorial, bibliotecas como Raphael fornecer uma API consistente ao longo do SVG e VML.

para o desenho raster, você pode usar <canvas> para navegadores que suportam a lona.

para o IE, você seria padrão para divs ou ter o seu desenho utilização API Silverlight se ele está disponível. Note-se que para a eficiência, divs não deve ser 1 x 1 pixel, mas sim ser o tempo necessário para a forma que você está desenhando. 20 divs de 1 pixel da mesma cor deve ser de 1 div que é 20 pixels de largura. Geralmente você não terá muito interativo com a abordagem div, porque o navegador que você está targetting (IE) tem acesso DOM lento

EDIT: A biblioteca ligada faz fazer o DIV-otimizações.

por soluções apenas HTML (sem SVG / VML / lona) você usar CSS e personalizados fronteiriças-larguras:

Respondeu 09/12/2008 em 21:09
fonte usuário

votos
0

Antes de iniciar bagunçar com 1px divs, veja dojox.gfx: docs , testes , demos (últimos dois links para o nightly snapshot no servidor de teste otimizados para depuração, não para produção).

Ele usa gráficos nativas: SVG, VML, Silverlight ou lona - o que está disponível no cliente cobrindo todos os principais navegadores (IE, Firefox, Safari / WebKit, Opera).

Respondeu 10/12/2008 em 02:12
fonte usuário

votos
0

Não, é o pior método, elaborado antes que houvesse SVG ou elementos de lona ... Seria muito pesado sobre a memória e muito lento. Um, corte interessante divertido, mas não é realmente útil no mundo real.

Ao lado das bibliotecas mencionadas no outro segmento, contando sobre tela / SVG / VML, vi jogos feitos com sprites, ou seja. algumas imagens posicionado absolutamente. Houve também um corte incrível codificação de uma primeira pessoa jogo de tiro 3D em 5k de JavaScript , usando geração de imagens XBM na mosca. Mas o suporte para este formato de imagem foram removidas das versões recentes do Windows ... :-(

Venha para pensar sobre isso, você também pode fazer imagens usando "dados: image / png; base64" protocolo, mas a codificação seria muito lento, e navegadores IE estaria fora.

Respondeu 09/12/2008 em 23:04
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more