HTML-Tutorium: SVG: MiniPong 01 - Versionsgeschichte

Kowa am 1. März 2023 um 13:11 Uhr

2023-03-01T13:11:50Z

← Nächstältere Version		Version vom 1. März 2023, 13:11 Uhr
Zeile 3:		Zeile 3:
	([http://glossar.hs-augsburg.de/beispiel/tutorium/html_svg/minipong/html_svg_minipong_01 SVN-Repository])		([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 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>raphael.js</code>===		====<code>raphael.js</code>====
	Erstellen Sie den Ordner <code>WebContent/lib</code> und legen Sie in diesen Ordner		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>].		die Datei [http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js <code>raphael-min.js</code>].
Zeile 37:		Zeile 37:
	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]].		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>===		====<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 75:		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 Projekts die Datei <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.		In dieser Datei werden die Farben und die Postion der Raphaël-Bühne und des Hintergrunds festgelegt.
Zeile 100:		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]]
Zeile 192:		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">

Kowa am 1. März 2023 um 13:08 Uhr

2023-03-01T13:08:56Z

← Nächstältere Version		Version vom 1. März 2023, 13:08 Uhr
Zeile 76:		Zeile 76:

	===<code>main.css</code>===		===<code>main.css</code>===
	Erstellen Sie im Ordner <code>WebContent/css</code> des ~~Projektes~~ die Datei <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.		In dieser Datei werden die Farben und die Postion der Raphaël-Bühne und des Hintergrunds festgelegt.

Kowa am 5. März 2014 um 16:53 Uhr

2014-03-05T16:53:42Z

← Nächstältere Version		Version vom 5. März 2014, 16:53 Uhr
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">[[~~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.

Kowa am 5. März 2014 um 16:53 Uhr

2014-03-05T16:53:16Z

← Nächstältere Version		Version vom 5. März 2014, 16:53 Uhr
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.

	[[~~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">[[Medium: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.

Kowa am 11. November 2013 um 12:01 Uhr

2013-11-11T12:01:12Z

← Nächstältere Version		Version vom 11. November 2013, 12:01 Uhr
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 ~~erzeug~~ auf der Raphaël-Bühne ein SVG-Kreis-Objekt und übernimmt von aktuellen Ball-Objekt (<code>this</code>)		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.

Kowa: /* index.html */

2012-11-13T11:45:11Z

index.html

← Nächstältere Version		Version vom 13. November 2012, 11:45 Uhr
Zeile 55:		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-min.js"></script>

	<!--<script type="text/javascript" src="js/all.min.js" ></script>-->		<!--<script type="text/javascript" src="js/all.min.js" ></script>-->

Kowa am 7. November 2012 um 15:54 Uhr

2012-11-07T15:54:25Z

← Nächstältere Version		Version vom 7. November 2012, 15:54 Uhr
Zeile 109:		Zeile 109:
	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>~~svg~~</code> und		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">
	~~svg~~: null,		v_svg: null,

	// Initializes the ball.		// Initializes the ball.
Zeile 119:		Zeile 119:
	init:		init:
	function(p_canvas)		function(p_canvas)
	{ this.~~svg~~		{ this.v_svg
	= p_canvas		= p_canvas
	.circle(this.x, this.y, this.r)		.circle(this.x, this.y, this.r)
Zeile 141:		Zeile 141:
	draw:		draw:
	function()		function()
	{ this.~~svg~~.attr({cx: this.x, cy: this.y});		{ this.v_svg.attr({cx: this.x, cy: this.y});
	}		}
	</source>		</source>

Kowa am 7. November 2012 um 09:59 Uhr

2012-11-07T09:59:29Z

← Nächstältere Version		Version vom 7. November 2012, 09:59 Uhr
Zeile 30:		Zeile 30:

	==Dateien erstellen==		==Dateien erstellen==

			===<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>===		===<code>index.html</code>===

Kowa am 7. November 2012 um 09:56 Uhr

2012-11-07T09:56:53Z

← Nächstältere Version		Version vom 7. November 2012, 09:56 Uhr
Zeile 49:		Zeile 49:
	<link rel="stylesheet" href="css/main.css">		<link rel="stylesheet" href="css/main.css">

	~~<script type="text/javascript" src="lib/jquery.min.js"></script>~~
	<script type="text/javascript" src="lib/raphael.min.js"></script>		<script type="text/javascript" src="lib/raphael.min.js"></script>

Zeile 154:		Zeile 153:
	// 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);
	~~$("#d_canvas")~~
	~~.css ({"width": CANVAS_WIDTH,~~
	~~"height": CANVAS_HEIGHT,~~
	~~});~~

	// Create the svg view of the ball.		// Create the svg view of the ball.

Kowa: /* main.js */

2012-11-05T16:41:32Z

main.js

← Nächstältere Version		Version vom 5. November 2012, 16:41 Uhr
Zeile 110:		Zeile 110:
	svg: null,		svg: null,

	// Initializes the ball~~; it is~~ called, when the canvas has been created.		// Initializes the ball.
			// It has to be called when the canvas has been created.
	init:		init:
	function(p_canvas)		function(p_canvas)