HTML-Tutorium: SVG: MiniPong 02: Unterschied zwischen den Versionen
Kowa (Diskussion | Beiträge) Die Seite wurde neu angelegt: „{{HTML-Tutorium:SVG:MiniPong:Menü}} '''Musterlösung''': <code>[http://glossar.hs-augsburg.de/beispiel/tutorium/html_svg/minipong/html_svg_minipong_02/WebCont…“ |
Kowa (Diskussion | Beiträge) |
||
| Zeile 10: | Zeile 10: | ||
Im zweiten Teil des Tutoriums wird die Interaktion mit dem Schläger implementiert. | Im zweiten Teil des Tutoriums wird die Interaktion mit dem Schläger implementiert. | ||
Wie im [[HTML-Tutorium: SVG: MiniPong 01|Teil 1 des Tutoriums]] wird die [[HTML5-Tutorium: Canvas: MiniPong 02|Canvas-Version]] in eine SVG-Version umgeschrieben. | Wie im [[HTML-Tutorium: SVG: MiniPong 01|Teil 1 des Tutoriums]] wird die [[HTML5-Tutorium: Canvas: MiniPong 02|Canvas-Version]] in eine SVG-Version umgeschrieben. | ||
[[Medium: | [[Medium:MiniPong02SVG.png|miniatur|links|476px|Das Objektmodell der '''Raphaël-Version''' von MiniPong 02]]<div class="tleft" style="clear:none">[[Medium:MiniPong02Canvas.png|miniatur|ohne|474px|Das Objektmodell der '''Canvas-Version''' von MiniPong 02]]</div><div style="clear:both"></div> | ||
=Anwendung „<code>MiniPongSVG02</code>“= | =Anwendung „<code>MiniPongSVG02</code>“= | ||
Version vom 25. Oktober 2012, 08:17 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: Hello World 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.view.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.
