2008-10-04 6 views
9

Zastanawiam się nad stworzeniem strony z dość intensywnym użyciem JavaScript/canvas i patrzę na Processing.js i wydaje mi się, że znacznie ułatwiłoby to manipulowanie płótnem. Czy ktoś wie, dlaczego I nie powinien używać używać Processing.js? Rozumiem, że starsze przeglądarki nie będą mogły z niego korzystać, ale na razie wszystko jest w porządku.Czy użycie oprogramowania John Resig's Processing.js jest uzasadnione?

+1

Czy obejrzałeś czyste biblioteki obrazów w formacie Javascript, takie jak [Fabric.js] (http://fabricjs.com)? – kangax

Odpowiedz

3

Jak wspomniano, IE nie jest obsługiwane przez Processing.js (w tym IE8 beta). Odkryłem też, że process.js jest nieco powolny pod względem wydajności, w porównaniu do samego używania canvas (szczególnie, jeśli analizujesz ciąg znaków w języku Processing, zamiast korzystać z javascript API).

Ja osobiście wolę API obszaru roboczego niż wrapper przetwarzania, ponieważ daje mi więcej kontroli. Na przykład:

Funkcja linia przetwarzania() jest realizowany w ten sposób (w przybliżeniu):

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

I chcesz go używać tak (zakładając że używasz javascript narażonych API):

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

Zauważ, że każda linia() wezwanie musi otworzyć i zamknąć nową ścieżkę, natomiast z API płótnie można wyciągnąć wszystkie linie w obrębie jednego bloku beginPath/endPath, znacząco zwiększając wydajność:

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

Po wypróbowaniu tego wiele przykładów nie działało również w Chrome, Safari. To powinno być naprawione .. – Nils

+3

To raczej wymyślny przykład, prawda? W przetwarzaniu, zrobiłbyś to samo z beginShape(), vertex() i endShape(). – endolith

3

Jeśli wszystko jest w porządku, to nie działa w IE7, a następnie przejdź do niego. Pracowałem już w Firefoksie 3. To sprytny sposób na dodanie efektów Silverlight/Flash na twoją stronę.

Moje przeczucie polega na tym, że biblioteki takie jak Processing.js ulegną zmianie lub zostaną uaktualnione na ścieżce szybkiej ścieżki, więc przygotuj się do uruchomienia, gdy będą działać i bądź na bieżąco z nowymi funkcjami.

1

Powiedziałbym użyć Flash zamiast tego. Więcej przeglądarek ma zainstalowaną Flash, niż liczba przeglądarek, które współpracują z processing.js. Ponadto uzyskasz znacznie lepszą wydajność od Flasha w porównaniu z JavaScriptem (przynajmniej na razie, chociaż są projekty, które przyspieszają JS, ale wciąż jest trochę za daleko)

+4

Idealnie Flash, Silverlight i inni powinni zostać zabici przez (przynajmniej de facto) znormalizowaną zawartość i funkcjonalność DOM. –

2

Nie robi tego t uprość rysowanie na płótnie. To, co robi, to uprościć animację, jeśli używasz płótna. Jeśli robisz animację i nie zależy Ci na pełnej obsłudze przeglądarek, użyj Processing.js. Jeśli nie robisz animacji (jeśli np. Robisz wykresy lub zaokrąglasz rogi), nie dodawaj narzutu Processing.js.

Tak czy inaczej, polecam, aby nauczyć się bezpośredniego korzystania z interfejsu API obszaru roboczego. Zrozumienie api canvas, szczególnie transformacji, bardzo ci pomoże, nawet jeśli używasz Processing.js.

1

Spróbuj nowa realizacja javascript p5js p5js.org

Oh oraz w odpowiedzi na odpowiedź Leo, to faktycznie nie trzeba używać linii funkcję przetwarzania lub p5js istnieją oddzielne beingShape i beingPath działa podobnie do api canvas.