2008-10-04 14 views
9

Estoy pensando en hacer un sitio web con bastante uso intensivo de JavaScript/canvas y he estado buscando en Processing.js y me parece que haría la manipulación del lienzo significativamente más fácil. ¿Alguien sabe alguna razón por la que I no debería usar Processing.js? Entiendo que los navegadores más antiguos no podrán usarlo, pero por ahora está bien.¿Es razonable usar Processing.js de John Resig?

+1

¿Has mirado librerías de canvas de Javascript puro como [Fabric.js] (http://fabricjs.com)? – kangax

Respuesta

3

Como se mencionó, IE no es compatible con Processing.js (incluido IE8 beta). También encontré que processing.js es un poco lento en términos de rendimiento, en comparación con el uso del lienzo (especialmente si estás analizando una cadena con el lenguaje de procesamiento, en lugar de usar la API de JavaScript).

Personalmente prefiero el lienzo API sobre el envoltorio de procesamiento, porque me da más control. Por ejemplo:

La función de línea de procesamiento() se implementa como esto (más o menos):

function line (x1, y1, x2, y2) { 
    context.beginPath(); 
    context.moveTo(x1, y1); 
    context.lineTo(x2, y2); 
    context.closePath(); 
    context.stroke(); 
}; 

Y será utilizar de esta manera (asumiendo que usted está utilizando el API de JavaScript que aparecen):

var p = Processing("canvas") 
p.stroke(255) 

////Draw lines.../// 
p.line(0,0,10,10) 
p.line(10,10,20,10) 
//...and so on 
p.line(100,100,200,200) 
////End lines//// 

en cuenta que cada línea() llamada tiene que abrir y cerrar un nuevo camino, mientras que con la API de canvas se puede dibujar todas las líneas dentro de un solo bloque beginPath/endPath, mejorando el rendimiento significativamente:

context.strokeStyle = "#fff"; 
context.beginPath(); 

////Draw lines.../// 
context.moveTo(0, 0); 
context.lineTo(10, 10); 
context.lineTo(20, 10); 
//...so on 
context.lineTo(200, 200); 
////End lines.../// 

context.closePath(); 
context.stroke(); 
+0

Cuando probé esto, muchos ejemplos tampoco funcionaron en Chrome, Safari. Esto debería arreglarse ... – Nils

+3

Ese es un ejemplo bastante artificial, ¿no? En Processing, harías lo mismo con beginShape(), vertex() y endShape(). – endolith

3

Si está de acuerdo con que no funcione en IE7, entonces hágalo. Lo he tenido funcionando en Firefox 3. Es una forma elegante de traer efectos Silverlight/Flash a tu página.

Mi corazonada es que las bibliotecas como Processing.js cambiarán o se actualizarán en una ruta rápida, así que prepárese para funcionar cuando lo hagan y mantenerse al día con las nuevas funciones.

1

Yo diría usar Flash en su lugar. Hay más navegadores instalados en Flash que la cantidad de navegadores que funcionan con processing.js. Además, obtendrás mucho mejor rendimiento de Flash en comparación con el uso de JavaScript (al menos por ahora, aunque hay proyectos en proceso para acelerar mucho JS, pero todavía está un poco lejos)

+4

Ideally Flash, Silverlight, y otros deben ser eliminados por (al menos de facto) contenido y funcionalidad estandarizados en DOM. –

2

No funciona t simplifica el dibujo en tu lienzo. Lo que hace es simplificar la tarea de animación si está utilizando lienzo. Si está haciendo animación y no le interesa el soporte completo del navegador, entonces use Processing.js. Si no está haciendo animación (si está haciendo gráficos o esquinas redondeadas, por ejemplo), no agregue la sobrecarga de Processing.js.

De cualquier manera, le recomiendo que aprenda a usar directamente la API de Canvas. Comprender el api canvas, especialmente las transformaciones, será de gran ayuda incluso si está utilizando Processing.js.

1

Prueba la nueva implementación de JavaScript p5js p5js.org

Ah, y en respuesta a la respuesta de Leo, que en realidad no tiene que utilizar el línea función en el procesamiento o p5js, no están separados beingShape y beingPath funciones similares al canvas api.

Cuestiones relacionadas