HTML-Tutorium: SVG: MiniPong 01: Unterschied zwischen den Versionen
Kowa (Diskussion | Beiträge) |
Kowa (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
| (10 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
{{HTML-Tutorium:SVG:MiniPong:Menü}} | {{HTML-Tutorium:SVG:MiniPong:Menü}} | ||
'''Musterlösung''': <code>[http://glossar.hs-augsburg.de/beispiel/tutorium/html_svg/minipong/html_svg_minipong_01/WebContent/index.html Minipong 1]</code> | '''Musterlösung''': <code>[http://glossar.hs-augsburg.de/beispiel/tutorium/html_svg/minipong/html_svg_minipong_01/WebContent/index.html Minipong 1]</code> | ||
([http://glossar.hs-augsburg.de/beispiel/tutorium/html_svg/minipong/ | ([http://glossar.hs-augsburg.de/beispiel/tutorium/html_svg/minipong/html_svg_minipong_01 SVN-Repository]) | ||
=Voraussetzung= | ==Voraussetzung== | ||
Sie sollten die Inhalte der Tutorien [[HTML-Tutorium: SVG: Hello World]] und [[HTML5-Tutorium: Canvas: MiniPong 01]] kennen. | Sie sollten die Inhalte der Tutorien [[HTML-Tutorium: SVG: Hello World]] und [[HTML5-Tutorium: Canvas: MiniPong 01]] kennen. | ||
=Ziel: Animation des Balls= | ==Ziel: Animation des Balls== | ||
Im ersten Teil des Tutoriums wird die Ball-Amination des Spiels impementiert. | Im ersten Teil des Tutoriums wird die Ball-Amination des Spiels impementiert. | ||
Dazu wird die [[HTML5-Tutorium: Canvas: MiniPong 01|Canvas-Version]] dieser Animation in eine SVG-Version umgeschrieben. | Dazu wird die [[HTML5-Tutorium: Canvas: MiniPong 01|Canvas-Version]] dieser Animation in eine SVG-Version umgeschrieben. | ||
| Zeile 13: | Zeile 13: | ||
Wie in [[HTML5-Tutorium: Canvas: MiniPong 01|Teil 1 der Canvas-Version des Tutoriums]] werden zwei Objekte implementiert: Das ROOT-Objekt der Anwendung und das zu animierende Ball-Objekt. | Wie in [[HTML5-Tutorium: Canvas: MiniPong 01|Teil 1 der Canvas-Version des Tutoriums]] werden zwei Objekte implementiert: Das ROOT-Objekt der Anwendung und das zu animierende Ball-Objekt. | ||
[[ | [[Datei:MiniPong01SVG.png|miniatur|links|374px|Das Objektmodell der '''Raphaël-Version''' von MiniPong 01]]<div class="tleft" style="clear:none">[[Datei:MiniPong01Canvas.png|miniatur|ohne|381px|Das Objektmodell der '''Canvas-Version''' von MiniPong 01]]</div><div style="clear:both"></div> | ||
Wenn man die Objektmodelle der Raphaël- und der Canvas-Version vergleicht, fallen einem nur zwei wesentliche Unterschiede auf. | Wenn man die Objektmodelle der Raphaël- und der Canvas-Version vergleicht, fallen einem nur zwei wesentliche Unterschiede auf. | ||
| Zeile 21: | Zeile 21: | ||
Alle künftigen Änderungen an diesem SVG-Objekt werden direkt auf der Bühne sichtbar. | Alle künftigen Änderungen an diesem SVG-Objekt werden direkt auf der Bühne sichtbar. | ||
=Anwendung „<code>MiniPongSVG01</code>“= | ==Anwendung „<code>MiniPongSVG01</code>“== | ||
==Neues Projekt anlegen== | ===Neues Projekt anlegen=== | ||
Legen Sie ein neues „Statisches Web-Projekt“ mit dem Namen <code>MiniPongSVG01</code> an. | Legen Sie ein neues „Statisches Web-Projekt“ mit dem Namen <code>MiniPongSVG01</code> an. | ||
| Zeile 29: | Zeile 29: | ||
Speichern Sie dieses Projekt wie üblich in Ihrem Repository. | Speichern Sie dieses Projekt wie üblich in Ihrem Repository. | ||
==Dateien erstellen== | ===Dateien erstellen=== | ||
===<code>index.html</code>=== | ====<code>raphael.js</code>==== | ||
Erstellen Sie den Ordner <code>WebContent/lib</code> und legen Sie in diesen Ordner | |||
die Datei [http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js <code>raphael-min.js</code>]. | |||
Gehen Sie dabei genauso vor, wie beim Einbinden von <code>jQuery</code> im [[HTML5-Tutorium:_Canvas:_Hello_World_04#Einbinden_von_jQuery|4. Teil des Hello-World-Canvas-Tutoriums]]. | |||
====<code>index.html</code>==== | |||
Die Datei <code>index.html</code> ist im Prinzip genauso aufgebaut, wie | Die Datei <code>index.html</code> ist im Prinzip genauso aufgebaut, wie | ||
| Zeile 49: | Zeile 55: | ||
<link rel="stylesheet" href="css/main.css"> | <link rel="stylesheet" href="css/main.css"> | ||
<script type="text/javascript" src="lib/raphael-min.js"></script> | |||
<script type="text/javascript" src="lib/raphael | |||
<!--<script type="text/javascript" src="js/all.min.js" ></script>--> | <!--<script type="text/javascript" src="js/all.min.js" ></script>--> | ||
| Zeile 70: | Zeile 75: | ||
Raphaël-Bühne aufnimmt. | Raphaël-Bühne aufnimmt. | ||
===<code>main.css</code>=== | ====<code>main.css</code>==== | ||
Erstellen Sie im Ordner <code>WebContent/css</code> des | Erstellen Sie im Ordner <code>WebContent/css</code> des Projekts die Datei <code>main.css</code>. | ||
In dieser Datei werden die Farben und die Postion der Raphaël-Bühne und des Hintergrunds festgelegt. | In dieser Datei werden die Farben und die Postion der Raphaël-Bühne und des Hintergrunds festgelegt. | ||
| Zeile 95: | Zeile 100: | ||
</source> | </source> | ||
===<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. | ||
Für das Ball-Objekt <code>g_ball</code> müssen laut Objektmodell das Attribut <code> | Für das Ball-Objekt <code>g_ball</code> müssen laut Objektmodell das Attribut <code>v_svg</code> und | ||
die Methode <code>init</code> zusätzlich definiert werden: | die Methode <code>init</code> zusätzlich definiert werden: | ||
<source lang="javascript"> | <source lang="javascript"> | ||
v_svg: null, | |||
// Initializes the ball | // Initializes the ball. | ||
// It has to be called when the canvas has been created. | |||
init: | init: | ||
function(p_canvas) | function(p_canvas) | ||
{ this. | { this.v_svg | ||
= p_canvas | = p_canvas | ||
.circle(this.x, this.y, this.r) | .circle(this.x, this.y, this.r) | ||
| Zeile 123: | 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. | ||
| Zeile 135: | Zeile 141: | ||
draw: | draw: | ||
function() | function() | ||
{ this. | { this.v_svg.attr({cx: this.x, cy: this.y}); | ||
} | } | ||
</source> | </source> | ||
| Zeile 153: | Zeile 159: | ||
// Has to be called after the HTML page has been loaded. | // Has to be called after the HTML page has been loaded. | ||
function f_init() | function f_init() | ||
{ // Create a new Raphaël paper (canvas). | { // 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); | var l_canvas = new Raphael("d_canvas", CANVAS_WIDTH, CANVAS_HEIGHT); | ||
// Create the svg view of the ball. | // Create the svg view of the ball. | ||
| Zeile 185: | Zeile 192: | ||
Das Löschen der SVG-Bühne übernimmt die Render-Engine des Browsers für uns. | Das Löschen der SVG-Bühne übernimmt die Render-Engine des Browsers für uns. | ||
==Anwendung testen und sichern== | ===Anwendung testen und sichern=== | ||
Testen Sie Ihre Anwendung in gewohnter Weise. | Testen Sie Ihre Anwendung in gewohnter Weise. | ||
Vergessen Sie nicht, sie im SVN-Repository zu sichern. | Vergessen Sie nicht, sie im SVN-Repository zu sichern. | ||
=Quellen= | ==Quellen== | ||
<references/> | <references/> | ||
<ol start="2"> | <ol start="2"> | ||
Aktuelle Version vom 1. März 2023, 13:11 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.
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 Projekts 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.
