Zeichnung in Javascript mit divs

stimmen
2

In meiner Suche Javascript zu lernen (die SO in diesen Tagen meine letzte Quelle für Fragen zu sein scheint) Ich habe diese API zum Zeichnen gefunden http://www.c-point.com/javascript_vector_draw.htm

Inzwischen habe ich einige Experimente mit Grafiken wurde zu machen, die auf die Menge an Material, schwer zu sein neigen zu ziehen. Dieser Typ zeichnet mit divs, ist jeder Quadrat Teil des Bildes ein div. Sie können es leicht überprüfen, indem sein Beispiel auf der Seite inspizieren.

Er geht zu machen divs 1px / 1px ein Pixel zeichnen

Nun, was ich fragen müssen, ist die folgende:

Ist dies die beste Methode? Es scheint ziemlich schwer, wenn eine Zeichnung aufwendigere ist. Welche anderen Methoden würden Sie sugest?

Diese Javascript Zeichnungsbibliothek? hat bereits ein paar Links , so dass keine Notwendigkeit, LIBS jeden hier zu setzen.

Ich habe in SO anderen Fragen zur Zeichnung hier gesehen. Ich frage mich nur, auf die mit divs Punkt Zeichnung nicht schrecklich!

Veröffentlicht am 09/12/2008 um 20:57
quelle vom benutzer
In anderen Sprachen...                            


3 antworten

stimmen
2

für Vektor - Zeichenprogramm , Bibliotheken wie Raphael eine konsistente API über SVG und VML bieten.

für Rasterzeichnung, können Sie <canvas> für Browser verwenden, die Leinwand zu unterstützen.

für IE, würden Sie die Zeichnungs-API verwenden Silverlight DIVS oder haben standardmäßig, wenn es verfügbar ist. Beachten Sie, dass für Effizienz, divs sollte nicht von 1px sondern so lange wie nötig für die Form 1px werden Sie zeichnen. 20 1-Pixel divs der gleichen Farbe sollte 1 div sein, die 20 Pixel breit ist. Im Allgemeinen werden Sie nicht sehr interaktiv mit dem div Ansatz bekommen, weil der Browser Sie Targeting (IE) langsam DOM Zugriff hat

EDIT: Die verknüpfte Bibliothek die div-Optimierungen macht.

für HTML-only solutions (kein SVG / VML / Leinwand) Sie verwenden CSS und benutzerdefinierte Rahmen Breite:

Beantwortet am 09/12/2008 um 21:09
quelle vom benutzer

stimmen
0

Vor dem Start mit 1px divs vermasseln Besuche dojox.gfx: docs , Tests , Demos ( die letzten zwei Links zu dem nächtlichen Snapshot auf dem Test - Server für das Debuggen optimiert, nicht für die Produktion).

Es verwendet native Grafik: SVG, VML, Silverlight oder Leinwand - was auch immer auf dem Client zur Verfügung, die alle gängigen Browser (IE, Firefox, Safari / Webkit, Opera).

Beantwortet am 10/12/2008 um 02:12
quelle vom benutzer

stimmen
0

Nicht, es ist die schlechteste Methode, ausgearbeitet, bevor es SVG oder Canvas-Element war ... Es wäre auf Gedächtnis und sehr langsam sehr schwer sein. Ein amüsanter, interessanter Hack, aber nicht wirklich brauchbar in der realen Welt.

Neben den Bibliotheken in dem anderen Thread erwähnt, unter Berufung auf Leinwand / SVG / VML, sah ich Spiele mit Sprites gemacht, das heißt. einige Bilder absolut positioniert. Es gab auch ein tolles Hack ein Codierung First-Person - 3D-Spiel in 5k von JavaScript , mit Erzeugung von XBM Bilder on the fly. Doch die Unterstützung für dieses Bildformat hat aus dem jüngsten Versionen von Windows entfernt worden ist ... :-(

Kommen Sie, daran zu denken, können Sie auch Bilder machen mit „Daten: image / jpeg; base64“ Protokoll, aber die Codierung wäre ziemlich langsam, und IE-Browser heraus wäre.

Beantwortet am 09/12/2008 um 23:04
quelle vom benutzer

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