Σχέδιο σε javascript με divs

ψήφοι
2

Στην προσπάθειά μου να μάθω javascript (που φαίνεται να είναι πιο πρόσφατη πηγή μου ερωτήσεις για το SO αυτές τις ημέρες) έχω βρει αυτό το API για την κατάρτιση http://www.c-point.com/javascript_vector_draw.htm

Εν τω μεταξύ έχω κάνει κάποια πειράματα με τα γραφικά, τα οποία τείνουν να είναι βαρύ για το ποσό των πράγματα να επιστήσει. Αυτός ο τύπος πλησιάζει με divs, κάθε τετραγωνικό μέρος της εικόνας είναι ένα div. Μπορείτε εύκολα να το ελέγξετε από την επιθεώρηση το παράδειγμά του στη σελίδα.

Πηγαίνει για να κάνει divs 1px / 1px να σχεδιάσετε ένα pixel

Τώρα τι έχω να ρωτήσω είναι το εξής:

Είναι αυτή η καλύτερη μέθοδος; Φαίνεται αρκετά βαριά όταν ένα σχέδιο είναι πιο περίτεχνα. Ποια άλλες μεθόδους θα sugest;

Αυτή η Javascript κατάρτιση βιβλιοθήκη; έχει ήδη ένα ζευγάρι των συνδέσμων για να libs έτσι δεν χρειάζεται να θέσει οποιοδήποτε εδώ.

Έχω δει εδώ στο SO άλλες ερωτήσεις σχετικά με το σχέδιο. Είμαι απλώς αναρωτιέται σε ποιο σημείο σχέδιο με divs δεν είναι φοβερό!

Δημοσιεύθηκε 09/12/2008 στις 20:57
πηγή χρήστη
Σε άλλες γλώσσες...                            


3 απαντήσεις

ψήφοι
2

για τον φορέα σχεδίασης, βιβλιοθήκες όπως Raphael παρέχει μια σταθερή API πάνω από SVG και VML.

για raster σχέδιο, μπορείτε να χρησιμοποιήσετε το <canvas> για browsers που υποστηρίζουν καμβά.

για IE, θα προκαθορίσει divs ή να έχουν το σχέδιό σας χρήση του API Silverlight αν είναι διαθέσιμο. Να σημειωθεί ότι για την απόδοση, divs δεν θα πρέπει να 1εικ από 1px, αλλά μάλλον να είναι όσο διάστημα απαιτείται για το σχήμα που σχεδιάζετε. 20 1-pixel divs του ίδιου χρώματος θα πρέπει να είναι 1 div που είναι 20 pixels πλάτος. Σε γενικές γραμμές δεν θα πάρει πολύ διαδραστικό με την προσέγγιση div, επειδή το πρόγραμμα περιήγησης που στοχοθέτηση (IE) έχει αργή πρόσβαση DOM

EDIT: Η συνδεδεμένη βιβλιοθήκη κάνει η div-βελτιστοποιήσεις.

για HTML-μόνο λύσεις (δεν SVG / VML / καμβά) που χρησιμοποιούν CSS και custom σύνορα πλάτη:

Απαντήθηκε 09/12/2008 στις 21:09
πηγή χρήστη

ψήφοι
0

Πριν από την έναρξη μπέρδεμα με 1px divs, ελέγξτε dojox.gfx: docs , δοκιμές , επιδείξεις (τελευταία δύο συνδέσεις με την νυχτερινή στιγμιότυπο στο διακομιστή δοκιμής βελτιστοποιηθεί για τον εντοπισμό σφαλμάτων, όχι για την παραγωγή).

Χρησιμοποιεί εγγενή γραφικά: SVG, VML, Silverlight ή καμβά - ό, τι είναι διαθέσιμο στον πελάτη να καλύπτει όλες τις μεγάλες μηχανές αναζήτησης (IE, Firefox, Safari / Webkit, Opera).

Απαντήθηκε 10/12/2008 στις 02:12
πηγή χρήστη

ψήφοι
0

Όχι, είναι η χειρότερη μέθοδος, που εκπονήθηκε πριν υπήρχε SVG ή στοιχεία καμβά ... Θα ήταν πολύ βαρύ για τη μνήμη και πολύ αργή. Ένα διασκεδαστικό, ενδιαφέρον hack, αλλά δεν είναι πραγματικά μπορούν να χρησιμοποιηθούν στον πραγματικό κόσμο.

Εκτός από τις βιβλιοθήκες που αναφέρονται στο άλλο νήμα, στηριζόμενη σε καμβά / SVG / VML, είδα τα παιχνίδια γίνονται με ξωτικά, δηλ. μερικές εικόνες τοποθετηθεί απολύτως. Υπήρχε επίσης ένα φοβερό hack που κωδικοποιεί ένα πρώτο πρόσωπο 3D παιχνίδι σκοποβολής σε 5k της JavaScript , χρησιμοποιώντας γενιά των εικόνων XBM on the fly. Αλλά υποστήριξης για αυτήν την μορφή εικόνας έχουν αφαιρεθεί από τις πρόσφατες εκδόσεις των Windows ... :-(

Ελάτε να σκεφτείτε από το, μπορείτε επίσης να κάνετε τις εικόνες χρησιμοποιώντας «στοιχεία: image / png? Base64» πρωτόκολλο, αλλά η κωδικοποίηση θα είναι αρκετά αργή, και IE browsers θα είναι έξω.

Απαντήθηκε 09/12/2008 στις 23:04
πηγή χρήστη

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more