CAKEjs

Ok εδώ μέσα όλοι είμαστε, λίγο πολύ, περισσότερο backend developers, αλλά τι γίνεται όταν θέλεις να κάνεις κάτι με γραφικά on the client side?

Φαντάζομαι όλοι θα χρησιμοποιείτε javascript, αλλά το jquery και λοιπά frameworks δεν κάνουν τόσο εντυπωσιακά πράγματα…

Μια λύση είναι το adobe flash, και να σχεδιάσεις όλο το site ή ένα μέρος με action-script. Πέρα από το γεγονός πως καθηλώνεσαι με την adobe, έχεις και το μειονέκτημα πως το block αυτό που περιέχει το flash δεν "συνεργάζεται" με τα υπόλοιπα στοιχεία του site. δηλαδή με javascript δεν συνεργάζεται.

Άλλη σχετικά καλή ιδέα είναι να χρησιμοποιήσεις SVG, που και αυτό όμως έχει το δικό του block που λειτουργεί και τον δικό του κώδικα.

Μετά σκέφτεσαι οτί ήρθε το html5 και όλα τα προβλήματα λύθηκαν. Αλλά το canvas του μπορεί μόνο να σχεδιάσει σχηματάκια χωρίς να υπάρχει η έννοια των elements, να μπορείς να βάλεις events click on a circle για παράδειγμα.

Η δική μου πρόσφατη ανακάλυψη είναι το CAKEjs

Θα το βρείτε σε μια παλιότερη και μια νεότερη έκδοση (συντηρούμενη από άλλον developer) σε αυτά τα links:

http://code.google.com/p/cakejs/

https://github.com/MichaelCereda/CakeJs

Στην ουσία προσθέτει δυνατότητες elements, events, animation (και πολλά άλλα) στο canvas του html5 μέσω καθαρής javascript. Το framerate που πετυχαίνει φαίνεται πάρα πολυ καλό (σίγουρα εξαρτάται και από την javascript engine του κάθε browser)

Υπάρχει ένα site με πολλά παραδείγματα και έτοιμο κώδικα ως ένα quick start

Ορίστε ένα από τα πιο εντυπωσιακά: EditableCurve

Αν έχετε ανακαλύψει καμιά καλύτερη βιβλιοθήκη, please share

Συγνώμη που ρωτώ αλλά ποιά είναι η σχέση του CAKEjs με το Yii γιατί μπερδεύτηκα?

P.S: Το εφέ στο οποίο οδηγεί το λινκ που έχεις βάλει προς το τέλος δεν φαίνεται να παίζει σε IE8!

Ε? Σόρρυ αλλά δεν καταλάβα ακριβώς την πρώτη ερώτηση. Ποια είναι η σχέση του cakejs με ένα οποιοδήποτε framework? Μάλλον συμπληρωματική είναι η απάντηση. Πχ. μπορούν να γραφτούν widgets με βάση αυτό, άρα έχει τόσο σχέση όσο οποιοδήποτε extension

Ε τώρα και συ όταν σου λέω html5 λες ο παλιότερος ΙΕ8 να τα υποστηρίζει? Το λέει και το site ότι η βιβλιοθήκη παίζει καλύτερα σε chrome αλλά και στον firefox λειτουργεί μια χαρά. Μην με ρωτήσετε για safari δεν ξέρω…

εχω πειραματιστεί λίγο με raphaeljs. η αλήθεια είναι ότι canvas frameworks παίζουνε πάρα πολλά αυτήν την στιγμή. Τα περισσότερα έχουνε ελλείψεις και λάθη, κάποια άλλα είναι πολύ εξειδικευμένα (WebGL frameworks). Εάν πρόκειται να κάνεις κάτι συγκεκριμένο καλό είναι να κάνεις λίγες αναζητήσεις. Κατά πάσα πιθανότητα κάποιος θα έχει ήδη ξεκινήσει κάτι που να βολεύει να επεκτείνεις.

Το Demo λειτουργεί και σε Opera καθώς και σε Safari (λογικό αφού Safari & Chrome => WebKit renderer και η Apple προωθεί HTML5 οποτε η JS μεριά είναι καλυμμένη)

Έφτιαξες κάτι;

Κυριάκο τελικά η βιβλιοθήκη που μου πρότεινες είναι επίσης πολύ καλή! Thanks. Είχα πέσει πάνω της και χρειάστηκε να την ξαναπιάσω μιας και η CAKEjs είναι πολύ καλή, καθαρό html5 canvas και καθαρό javascript αλλά δεν έχει documentation! Και χωρίς καλό documentation δεν πας πουθενά! για να μην πω και την ανάγκη για forum. Φαντάσου έχει μια συνάρτηση που λέγεται addEventListener και λειτουργούσε με περίεργο τρόπο. Άντε ψάξε εσύ τώρα τι φταίει… δύσκολο!

Βασικά ήθελα να φτιάξω αυτό που λέγεται στους αλγορίθμους πρόβλημα N-body. Εξομοίωση κανόνων φυσικής δηλαδή σε πολλά σωματίδια. Πολύ επίπονο υπολογιστικά!

Η raphael βιβλιοθήκη φτιάχνει τα γραφικά με svg. Αλλά επειδή τα χειρίζεσαι και με jquery μπορείς να κάνεις πολλά. Κάτσε να το τελειώσω κάποια στιγμή να δούμε πως τα πάει από απόδοση!