2009-06-04 19 views
11

¿Hay alguna alternativa al lienzo html5-element para pintar formas como hexágonos usando javascript, que funciona en varios navegadores (incluido el horrible IE6)?Pintando formas en Javascript

He estado usando jQuery y jQuery maphighlight para esto, pero no me da suficientes posibilidades para manipular las formas y colores después de que se haya procesado por primera vez.

¿Faltan algunas características en jQuery maphighlight, o hay algún otro complemento para jQuery o mootools, que pueda proporcionarme esta capacidad de pintura?

Respuesta

25

Debería echar un vistazo a RaphaelJS. Es una biblioteca de envoltura de navegador entre JavaScript, alrededor de Canvas, SVG y VML (un lenguaje de marcado vectorial de IE anterior a SVG, utilizado en IE6). Usando RaphaelJS, puede generar una amplia gama de gráficos vectoriales utilizando JS que es compatible con una amplia gama de navegadores.

http://raphaeljs.com/

RaphaelJS también es muy compatible con jQuery, y sigue una gran cantidad de la misma llamada en cadena que se ve en jQuery. Los dos hacen un gran par.

+0

Esto se ve muy prometedor – elzapp

+0

Es una gran biblioteca. Lo he usado en varias ocasiones para crear gráficos, tablas y diagramas simples basados ​​en JavaScript.Es simple, y no le da el conjunto completo de capacidades de Canvas, SVG y/o VML ... pero hace lo suficiente como para que sea útil en la mayoría de los casos. – jrista

+0

Esto es asombroso, y realmente resolvió mi problema: D – elzapp

1

Siempre me gusta el puerto prossessing para javascript. Puedes encontrar que here es muy bueno para dibujar cosas. Quizás puedas verificarlo. No es un complemento para jquery, pero es muy poderoso.

sí utiliza el elemento Canvas de HTML5, aunque :(

Algunas versiones hace que sólo funcionaba en los nuevos navegadores. No sé si ya se ha portado a las anteriores.


Otra API que he encontrado que usa divs para hacer dibujos es this one Si quieres dibujar cosas limitadas, está bien usarlas. Pero ten cuidado ya que cuando la cantidad de dibujos aumenta, la presentación del HTML obtiene una poco pesado

2

Trate Raphael.

Raphaël actualmente es compatible con Firefox 3.0+, Safari 3.0+, Opera 9.5+, Chrome 2.0+ e Internet Explorer 6.0+.

+0

Esto se ve muy prometedor – elzapp

1

Puede usar la implementación SVG que se encuentra en Ample SDK que también funciona en Internet Explorer. Obtendrá una API basada en estándares (DOM Nivel 2/3) y una notación de marcado (SVG1.2 Tiny).

Aquí hay un par de ejemplos:

  1. SVG Tiger
  2. SVG+SMIL/DOM