HTML-Tutorium: SVG: MiniPong 01: Unterschied zwischen den Versionen

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg
← zur vorherigen Versionen-Differenz
Kowa (Diskussion | Beiträge)
Administrator, Bots, Bürokraten, emailconfirmed, Oberflächenadministratoren, interwiki, oversight, SMW-Administratoren, SMW-Kuratoren, SMW-Editoren, Oversighter, Administratoren
42.989 Bearbeitungen
Kowa (Diskussion | Beiträge)
Administrator, Bots, Bürokraten, emailconfirmed, Oberflächenadministratoren, interwiki, oversight, SMW-Administratoren, SMW-Kuratoren, SMW-Editoren, Oversighter, Administratoren
42.989 Bearbeitungen
Keine Bearbeitungszusammenfassung
 
(23 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
{{HTML-Tutorium:SVG:MiniPong:Menü}}
{{HTML-Tutorium:SVG:MiniPong:Menü}}
{{In Bearbeitung}}
'''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/htmlsvg_minipong_01 SVN-Repository])
([http://glossar.hs-augsburg.de/beispiel/tutorium/html_svg/minipong/html_svg_minipong_01 SVN-Repository])


=Ziel=
==Voraussetzung==
Das in [[HTML5-Tutorium: Canvas: MiniPong]] erstellte MiniPong-Spiel wird so umgeschrieben,
dass die Ausgabe der Begrüßung nicht als [[Pixelgrafik]] sondern als [[Vektorgrafik]] (SVG) ausgegeben wird.


In diesem Tutorium wird wieder die JavaScript-Bibliothek Raphaël<ref>{{Quelle|Baranovskiy, D.: Raphaël (2008+) – JavaScript Library}}</ref>
Sie sollten die Inhalte der Tutorien [[HTML-Tutorium: SVG: Hello World]] und [[HTML5-Tutorium: Canvas: MiniPong 01]] kennen.
verwendet.
 
==Ziel: Animation des Balls==
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.  


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.


[[Medium:MiniPong01SVG.png|miniatur|links|374px|Das Objektmodell der '''Raphaël-Version''' von MiniPong 01]]<div class="tleft" style="clear:none">[[Medium:MiniPong01Canvas.png|miniatur|ohne|381px|Das Objektmodell der '''Canvas-Version''' von MiniPong 01]]</div><div style="clear:both"></div>
[[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.


=Voraussetzung=
==Anwendung „<code>MiniPongSVG01</code>“==
 
===Neues Projekt anlegen===
 
Legen Sie ein neues „Statisches Web-Projekt“ mit dem Namen <code>MiniPongSVG01</code> an.
 
Speichern Sie dieses Projekt wie üblich in Ihrem Repository.
 
===Dateien erstellen===


Sie sollten die Inhalte der Tutorien [[HTML-Tutorium: SVG: Hello World]] und [[HTML5-Tutorium: Canvas: MiniPong 01]] kennen.
====<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 [[HTML5-Tutorium:_Canvas:_MiniPong_01#index.html|Datei <code>index.html</code> des MiniPong-Canvas-Tutoriums]].
 
<source lang="html4strict">
<!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">&nbsp;</div>
    </div>
  </body>
</html>
</source>
 
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 <code>canvas</code>-Elements zwei ineinander verschachtelte
<code>div</code>-Elemente verwendet. Das <code>div</code>-Element <code>d_page</code> dient dazu, den Canvas im
Web-Browser-Fenster zu zentrieren, während das <code>div</code>-Element <code>d_canvas</code> die eigentliche
Raphaël-Bühne aufnimmt.
 
====<code>main.css</code>====
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.
 
<source lang="css">
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;
}
</source>
 
====<code>CONSTANT.js</code>====
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]].
 
====<code>main.js</code>====
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]]
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>v_svg</code> und
die Methode <code>init</code> zusätzlich definiert werden:
 
<source lang="javascript">
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,
              });
  },
</source>
 
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 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:
 
<source lang="javascript">
// Draws the ball at its current position onto the canvas.
draw:
  function()
  { this.v_svg.attr({cx: this.x, cy: this.y});
  }
</source>
 
Darüber hinaus ändert sich nur die Initialisierungsmehtode <code>f_init</code>.
Währen diese Methode in der MiniPong-Canvas-Version den 2D-Kontext
des HTML5-<code>canvas</code>-Elements ermitteln und in der Variablen
<code>g_context</code> 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 <code>g_context</code> wird hier nicht mehr benötigt.
 
Hinsichtlich des Animationstimers unterscheiden sich die Canvas- und die
SVG-Version von dagegen <code>f_init</code> nicht.
 
<source lang="javascript">
// 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);
}
</source>
 
Eine letzte Änderung ergibt sich in der [[Observer]]-Methode <code>o_redraw</code>.
Anstelle der beiden Befehle
 
<source lang="javascript">
// Clear and redraw the canvas.
g_context.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
g_ball.draw(g_context);
</source>
 
braucht man in der SVG-Version lediglich einen Befehl:
<source lang="javascript">
// Redraw the canvas.
g_ball.draw();
</source>
 
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=
==Quellen==
<references/>
<references/>
<ol start="2">
<ol start="2">
Zeile 36: Zeile 208:
=Fortsetzung des Tutoriums=
=Fortsetzung des Tutoriums=


Sie können nun [[HTML5-Tutorium: Canvas: MiniPong 02|Teil 2 des Tutoriums]] bearbeiten.
Sie sollten nun [[HTML-Tutorium: SVG: MiniPong 02|Teil 2 des Tutoriums]] bearbeiten.

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.

Das Objektmodell der Raphaël-Version von MiniPong 01
Das Objektmodell der Canvas-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">&nbsp;</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

  1. 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)
  2. 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.

Abgerufen von „https://glossar.hs-augsburg.de/w/index.php?title=HTML-Tutorium:_SVG:_MiniPong_01&oldid=51296“