HTML-Tutorium: SVG: MiniPong 01: Unterschied zwischen den Versionen
Kowa (Diskussion | Beiträge) |
Kowa (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
| Zeile 101: | Zeile 101: | ||
===<code>CONSTANT.js</code>=== | ===<code>CONSTANT.js</code>=== | ||
Die Datei<code>CONSTANT.js</code> unterscheidet sich nicht von der Datei | Die Datei <code>CONSTANT.js</code> unterscheidet sich nicht von der Datei | ||
[[HTML5-Tutorium:_Canvas:_MiniPong_01#CONSTANT.js|Datei <code>CONSTANT.js</code> des MiniPong-Canvas-Tutoriums]]. | [[HTML5-Tutorium:_Canvas:_MiniPong_01#CONSTANT.js|Datei <code>CONSTANT.js</code> des MiniPong-Canvas-Tutoriums]]. | ||
===<code>main.js</code>=== | ===<code>main.js</code>=== | ||
Die Datei<code>main.js</code> unterscheidet sich von der Datei | Die Datei <code>main.js</code> unterscheidet sich von der Datei | ||
[[HTML5-Tutorium:_Canvas:_MiniPong_01#main.js|Datei <code>main.js</code> des MiniPong-Canvas-Tutoriums]] | [[HTML5-Tutorium:_Canvas:_MiniPong_01#main.js|Datei <code>main.js</code> des MiniPong-Canvas-Tutoriums]] | ||
nur in denjenigen Anweisung, die für die Darstellung des Balls auf der Bühne zuständig sind. | nur in denjenigen Anweisung, die für die Darstellung des Balls auf der Bühne zuständig sind. | ||
| Zeile 129: | Zeile 129: | ||
</source> | </source> | ||
Die <code>init</code>-Methode | Die <code>init</code>-Methode erzeugt auf der Raphaël-Bühne ein SVG-Kreis-Objekt und übernimmt von aktuellen Ball-Objekt (<code>this</code>) | ||
die Position und den Radius. Anschließend initialisiert sie die Randfarbe, die Randbreite sowie die Füllfarbe des SVG-Kreises. | die Position und den Radius. Anschließend initialisiert sie die Randfarbe, die Randbreite sowie die Füllfarbe des SVG-Kreises. | ||
Version vom 11. November 2013, 12:01 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 1
(SVN-Repository)
Voraussetzung
Sie sollten die Inhalte der Tutorien HTML-Tutorium: SVG: Hello World und HTML5-Tutorium: Canvas: MiniPong 01 kennen.
Ziel: Animation des Balls
Im ersten Teil des Tutoriums wird die Ball-Amination des Spiels impementiert. Dazu wird die Canvas-Version dieser Animation in eine SVG-Version umgeschrieben.
Wie in Teil 1 der Canvas-Version des Tutoriums werden zwei Objekte implementiert: Das ROOT-Objekt der Anwendung und das zu animierende Ball-Objekt.
miniatur|links|374px|Das Objektmodell der Raphaël-Version von MiniPong 01
Wenn man die Objektmodelle der Raphaël- und der Canvas-Version vergleicht, fallen einem nur zwei wesentliche Unterschiede auf.
In der Raphaël-Version fällt das g_context-Objekt weg, da es in Raphaël kein „Kontext“-Objekt gibt.
Anstatt dessen wird im Ball eine SVG-Version des Balls im Attribut svg gespeichert. Dieses Attribut wird mit Hilfe der Methode
init initialisiert, sobald die Raphaël-Bühne erzeugt wurde und per p_canvas übergeben werden kann.
Alle künftigen Änderungen an diesem SVG-Objekt werden direkt auf der Bühne sichtbar.
Anwendung „MiniPongSVG01“
Neues Projekt anlegen
Legen Sie ein neues „Statisches Web-Projekt“ mit dem Namen MiniPongSVG01 an.
Speichern Sie dieses Projekt wie üblich in Ihrem Repository.
Dateien erstellen
raphael.js
Erstellen Sie den Ordner WebContent/lib und legen Sie in diesen Ordner
die Datei raphael-min.js.
Gehen Sie dabei genauso vor, wie beim Einbinden von jQuery im 4. Teil des Hello-World-Canvas-Tutoriums.
index.html
Die Datei index.html ist im Prinzip genauso aufgebaut, wie
die Datei index.html des MiniPong-Canvas-Tutoriums.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>HTML: MiniPong 01 (Raphaël)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<!--<link rel="stylesheet" href="css/all.min.css">-->
<link rel="stylesheet" href="css/main.css">
<script type="text/javascript" src="lib/raphael-min.js"></script>
<!--<script type="text/javascript" src="js/all.min.js" ></script>-->
<script type="text/javascript" src="js/CONSTANT.js" ></script>
<script type="text/javascript" src="js/main.js" ></script>
</head>
<body>
<div id="d_page">
<div id="d_canvas"> </div>
</div>
</body>
</html>
Es gibt nur zwei wesentliche Unterschiede. Zum einen wird eine HTML-4-Datei an Stelle einer HTML5-Datei benötigt
und zum anderen werden an Stelle des canvas-Elements zwei ineinander verschachtelte
div-Elemente verwendet. Das div-Element d_page dient dazu, den Canvas im
Web-Browser-Fenster zu zentrieren, während das div-Element d_canvas die eigentliche
Raphaël-Bühne aufnimmt.
main.css
Erstellen Sie im Ordner WebContent/css des Projektes die Datei main.css.
In dieser Datei werden die Farben und die Postion der Raphaël-Bühne und des Hintergrunds festgelegt.
body
{ text-align: center;
padding: 10px;
background-color: #AAA;
}
#d_page
{ width: 400px;
margin: 20px auto;
}
#d_canvas
{ border-color: #777;
border-width: 2px;
border-style: solid;
background-color: #CCC;
}
CONSTANT.js
Die Datei CONSTANT.js unterscheidet sich nicht von der Datei
Datei CONSTANT.js des MiniPong-Canvas-Tutoriums.
main.js
Die Datei main.js unterscheidet sich von der Datei
Datei main.js des MiniPong-Canvas-Tutoriums
nur in denjenigen Anweisung, die für die Darstellung des Balls auf der Bühne zuständig sind.
Für das Ball-Objekt g_ball müssen laut Objektmodell das Attribut v_svg und
die Methode init zusätzlich definiert werden:
v_svg: null,
// Initializes the ball.
// It has to be called when the canvas has been created.
init:
function(p_canvas)
{ this.v_svg
= p_canvas
.circle(this.x, this.y, this.r)
.attr({"stroke" : BALL_BORDER_COLOR,
"stroke-width" : BALL_BORDER_WIDTH,
"fill" : BALL_COLOR,
});
},
Die init-Methode erzeugt auf der Raphaël-Bühne ein SVG-Kreis-Objekt und übernimmt von aktuellen Ball-Objekt (this)
die Position und den Radius. Anschließend initialisiert sie die Randfarbe, die Randbreite sowie die Füllfarbe des SVG-Kreises.
Die Draw-Funktion des Ball-Objekts vereinfacht sich gegenüber der Canvas-Version deutlich. Der Kreis muss nicht mehr umständlich als Pixelgrafik gezeichnet werden, sondern es werden einfach die x- und y-Koordinaten des SVG-Kreis-Objekts verändert. Das Rendering des SVG-Objekts übermimmt die in den jeweiligen Browser integrierte SVG-Render-Engine:
// Draws the ball at its current position onto the canvas.
draw:
function()
{ this.v_svg.attr({cx: this.x, cy: this.y});
}
Darüber hinaus ändert sich nur die Initialisierungsmehtode f_init.
Währen diese Methode in der MiniPong-Canvas-Version den 2D-Kontext
des HTML5-canvas-Elements ermitteln und in der Variablen
g_context ablegen musste, muss die Initialisierungsmehtode hier
die Bühne als so genanntes “Raphaël paper” erstellen und auf diese Bühnen einen
SVG-„Ball“ legen.
Die Variable g_context wird hier nicht mehr benötigt.
Hinsichtlich des Animationstimers unterscheiden sich die Canvas- und die
SVG-Version von dagegen f_init nicht.
// Has to be called after the HTML page has been loaded.
function f_init()
{ // Resize the canvas.
document.getElementById("d_page").style.width = CANVAS_WIDTH + "px";
document.getElementById("d_canvas").style.width = CANVAS_WIDTH + "px";
document.getElementById("d_canvas").style.height = CANVAS_HEIGHT + "px";
// Create a new Raphaël paper (canvas).
var l_canvas = new Raphael("d_canvas", CANVAS_WIDTH, CANVAS_HEIGHT);
// Create the svg view of the ball.
g_ball.init(l_canvas);
// Start the timer for redrawing the canvas every 1000/FPS seconds.
g_timer = window.setInterval(o_redraw, 1000/FPS);
}
Eine letzte Änderung ergibt sich in der Observer-Methode o_redraw.
Anstelle der beiden Befehle
// Clear and redraw the canvas.
g_context.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
g_ball.draw(g_context);
braucht man in der SVG-Version lediglich einen Befehl:
// Redraw the canvas.
g_ball.draw();
Das Löschen der SVG-Bühne übernimmt die Render-Engine des Browsers für uns.
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 2 des Tutoriums bearbeiten.
