2008-10-04 4 views
9

Je pense à faire un site web avec une utilisation JavaScript/toile assez intense et j'ai regardé Processing.js et il me semble que cela rendrait la manipulation de la toile considérablement plus facile. Est-ce que quelqu'un sait des raisons pour lesquelles je ne devrait pas utiliser Processing.js? Je comprends que les anciens navigateurs ne seront pas en mesure de l'utiliser, mais pour l'instant c'est ok.Est-il raisonnable d'utiliser Processing.js de John Resig?

+1

Avez-vous regardé des bibliothèques de canvas Javascript pur comme [Fabric.js] (http://fabricjs.com)? – kangax

Répondre

3

Comme mentionné, IE n'est pas supporté par Processing.js (y compris IE8 beta). J'ai également trouvé que processing.js était un peu lent en termes de performances, comparé à l'utilisation de canvas (surtout si vous êtes en train d'analyser une chaîne avec le langage Processing, au lieu d'utiliser l'API javascript).

Personnellement, je préfère l'API toile sur l'enveloppe de traitement, car elle me donne plus de contrôle. Par exemple:

La fonction ligne de traitement() est mis en œuvre comme celui-ci (à peu près):

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

Et vous l'utiliser comme ceci (en supposant que vous utilisez l'API javascript exposée):

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//// 

Notez que l'appel chaque ligne() doit ouvrir et fermer un nouveau chemin, alors qu'avec l'API de toile, vous pouvez tirer toutes les lignes dans un seul bloc beginPath/endPath, l'amélioration des performances de manière significative:

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

Lorsque j'ai essayé, beaucoup d'exemples ne fonctionnaient pas dans Chrome, Safari. Cela devrait être corrigé .. – Nils

+3

C'est un exemple plutôt artificiel, n'est-ce pas? En traitement, vous feriez la même chose avec beginShape(), vertex() et endShape(). – endolith

3

Si ça ne marche pas avec IE7, alors allez-y. Je l'ai eu fonctionnant dans Firefox 3. C'est une manière lisse d'apporter des effets de Silverlight/Flash à votre page. Mon intuition est que les bibliothèques comme Processing.js vont changer ou être mises à jour sur un chemin accéléré, alors préparez-vous à courir quand elles le font et suivez les nouvelles fonctionnalités.

1

Je dirais plutôt utiliser Flash. Plus de navigateurs ont Flash installé, que le nombre de navigateurs qui fonctionnent avec processing.js. De plus, vous obtiendrez de meilleures performances de Flash par rapport à JavaScript (du moins pour l'instant, bien qu'il y ait des projets en cours pour accélérer JS, mais c'est encore un peu loin)

+4

Idéalement, Flash, Silverlight, et al devraient tous être détruits par (au moins de facto) le contenu et la fonctionnalité normalisés DOM. –

2

Il doesn ' t simplifier le dessin sur votre toile. Ce qu'il fait est de simplifier la tâche d'animation si vous utilisez du canevas. Si vous faites de l'animation et que vous ne vous souciez pas de la prise en charge complète du navigateur, utilisez Processing.js. Si vous ne faites pas d'animation (si vous faites des graphiques ou des coins arrondis par exemple), n'ajoutez pas le surcoût de Processing.js.

De toute façon, je vous recommande d'apprendre à utiliser directement l'API canvas. Comprendre l'API de la toile, en particulier les transformations, vous aidera grandement, même si vous utilisez Processing.js.

1

Essayez la nouvelle implémentation javascript p5js p5js.org

Oh, et en réponse à la réponse de Leo, vous n'avez pas fait d'utiliser la fonction de ligne dans le traitement ou p5js, il y a séparés beingShape et beingPath fonctions similaires à l'API toile.

Questions connexes