HTML-Tutorium: SVG: MiniPong 02: Unterschied zwischen den Versionen
Kowa (Diskussion | Beiträge) |
Kowa (Diskussion | Beiträge) |
||
| Zeile 45: | Zeile 45: | ||
draw: | draw: | ||
function() | function() | ||
{ this. | { this.svg.attr({x: this.x, y: this.y}); | ||
} | } | ||
</source> | </source> | ||
Version vom 5. November 2012, 16:35 Uhr
Dieser Artikel erfüllt die GlossarWiki-Qualitätsanforderungen nur teilweise:
| Korrektheit: 3 (zu größeren Teilen überprüft) |
Umfang: 4 (unwichtige Fakten fehlen) |
Quellenangaben: 5 (vollständig vorhanden) |
Quellenarten: 5 (ausgezeichnet) |
Konformität: 5 (ausgezeichnet) |
HTML-Tutorium: Canvas | SVG
SVG: | Teil 1 | Teil 2 | Teil 3
Musterlösung: Minipong 2
(SVN-Repository)
Voraussetzung
Sie sollten die Inhalte der Tutorien HTML-Tutorium: SVG: MiniPong 01 und HTML5-Tutorium: Canvas: MiniPong 02 kennen.
Ziel: Interaktion mit dem Schläger
Im zweiten Teil des Tutoriums wird die Interaktion mit dem Schläger implementiert. Wie im Teil 1 des Tutoriums wird die Canvas-Version in eine SVG-Version umgeschrieben.
miniatur|links|476px|Das Objektmodell der Raphaël-Version von MiniPong 02
Anwendung „MiniPongSVG02“
Neues Projekt anlegen
Legen Sie ein neues „Statisches Web-Projekt“ mit dem Namen MiniPongSVG02 an.
Speichern Sie dieses Projekt wie üblich in Ihrem Repository.
Dateien erstellen
Der Umbau der Canvas-Version in eine Raphaël-Version läuft genauso ab wie in Teil 1 des Tutoriums.
Anstelle eines Kreises wird nun allerdings ein Rechteck auf der Raphaël-Bühne erzeugt und bewegt:
// Initializes the paddle; it is called, when the canvas has been created.
init:
function(p_canvas)
{ this.svg
= p_canvas
.rect(this.x, this.y, this.width, this.height)
.attr({"stroke" : PADDLE_COLOR,
"stroke-width" : 0,
"fill" : PADDLE_COLOR,
});
},
...
// Draws the paddle at its current position onto a 2d context.
draw:
function()
{ this.svg.attr({x: this.x, y: this.y});
}
Anwendung testen und sichern
Testen Sie Ihre Anwendung in gewohnter Weise.
Vergessen Sie nicht, sie im SVN-Repository zu sichern.
Quellen
- Braun (2011): Herbert Braun; Webanimationen mit Canvas; in: c't Webdesign; Band: 2011; Seite(n): 44–48; Verlag: Heise Zeitschriften Verlag; Adresse: Hannover; 2011; Quellengüte: 5 (Artikel)
- Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)
Fortsetzung des Tutoriums
Sie sollten nun Teil 3 des Tutoriums bearbeiten.
