BGRABitmap tutorial 14/de: what changed

Revision 0 to 1. Removed lines have a minus sign; added lines have a plus sign.

Title: BGRABitmap tutorial 14/de

New		Line
1	+	Dieses Tutorial zeigt Ihnen, wie Sie die Eigenschaft Canvas2D von BGRABitmap einsetzen können. Canvas2D arbeitet als Javascript-2D-Kontext des HTML-Canvas-Objektes.
2	+
3	+	## Erstes Programm
4	+
5	+	Hier ist ein sehr einfaches Beispiel:
6	+
7	+	``` pascal
8	+	procedure TForm1.FormPaint(Sender: TObject);
9	+	var bmp: TBGRABitmap;
10	+	ctx: TBGRACanvas2D;
11	+	begin
12	+	bmp := TBGRABitmap.Create(ClientWidth,ClientHeight,BGRA(210,210,210));
13	+
14	+	ctx := bmp.Canvas2D;
15	+	ctx.fillStyle('rgb(240,128,0)');
16	+	ctx.fillRect(30,30,80,60);
17	+	ctx.strokeRect(50,50,80,60);
18	+
19	+	bmp.Draw(Canvas,0,0);
20	+	bmp.Free;
21	+	end;
22	+	```
23	+
24	+	Die Bitmap hat eine Eigenschaft 'Canvas2D', die die Funktionen 'fillRect' und 'strokeRect' zur Verfügung stellt. Der Füllstil (fillStyle) ist festgelegt auf Orange durch die Angabe eines CSS-Farbstrings. Zum Füllen der Figur wird 'fillstyle' verwendet und zum Zeichnen des Randes 'strokestyle'.
25	+
26	+	Der obige Code ist äquivalent zu diesem Javascript-Code :
27	+
28	+	``` javascript
29	+	var canvas = document.getElementsByTagName("canvas")[0];
30	+	canvas.width = 200
31	+	canvas.height = 200
32	+	if (canvas.getContext){
33	+	var ctx = canvas.getContext("2d");
34	+	ctx.fillStyle = "rgb(240,128,0)";
35	+	ctx.fillRect(30,30,80,60);
36	+	ctx.strokeRect(50,50,80,60);
37	+	}
38	+	```
39	+
40	+	<figure>
41	+	<img src="BGRATutorial14a.png" title="BGRATutorial14a.png" />
42	+	<figcaption>BGRATutorial14a.png</figcaption>
43	+	</figure>
44	+
45	+	## Komplexe Figuren
46	+
47	+	Um komplexe Figuren zu zeichnen, ist es notwendig, einen Pfad zu definieren:
48	+
49	+	``` pascal
50	+	procedure pave();
51	+	begin
52	+	ctx.fillStyle ('rgb(130,100,255)');
53	+	ctx.strokeStyle ('rgb(0,0,255)');
54	+	ctx.beginPath();
55	+	ctx.lineWidth:=2;
56	+	ctx.moveTo(5,5);ctx.lineTo(20,10);ctx.lineTo(55,5);ctx.lineTo(45,18);ctx.lineTo(30,50);
57	+	ctx.closePath();
58	+	ctx.stroke();
59	+	ctx.fill();
60	+	end;
61	+
62	+	begin
63	+	bmp := TBGRABitmap.Create(ClientWidth,ClientHeight,BGRA(210,210,210));
64	+	ctx := bmp.Canvas2D;
65	+	pave();
66	+	bmp.Draw(Canvas,0,0);
67	+	bmp.Free;
68	+	end;
69	+	```
70	+
71	+	Beachten Sie, dass die Linienbreite durch die Eigenschaft 'LineWidth' festgelegt ist und dass der Pfad mit dem Aufruf von 'BeginPath' anfängt. Falls Sie mehr Information über die Funktionsweise von 'Path' benötigen, siehe: [javascript documentation](https://developer.mozilla.org/en/Canvas_tutorial/Drawing_shapes).
72	+
73	+	<figure>
74	+	<img src="Tutorial14b.png" title="Tutorial14b.png" />
75	+	<figcaption>Tutorial14b.png</figcaption>
76	+	</figure>
77	+
78	+	## Verwendung von Transformationen
79	+
80	+	Jetzt können wir das Dreieck sechs Mal mit einer Drehung zeichnen durch Aufruf der Transformationsfunktionen.
81	+
82	+	``` pascal
83	+	procedure six();
84	+	var
85	+	i: Integer;
86	+	begin
87	+	ctx.save();
88	+	for i := 0 to 5 do
89	+	begin
90	+	ctx.rotate(2*PI/6);
91	+	pave();
92	+	end;
93	+	ctx.restore();
94	+	end;
95	+	begin
96	+	bmp := TBGRABitmap.Create(ClientWidth,ClientHeight,BGRA(210,210,210));
97	+	ctx := bmp.Canvas2D;
98	+	ctx.translate(80,80);
99	+	six;
100	+	bmp.Draw(Canvas,0,0);
101	+	bmp.Free;
102	+	end;
103	+	```
104	+
105	+	<figure>
106	+	<img src="BGRATutorial14c.png" title="BGRATutorial14c.png" />
107	+	<figcaption>BGRATutorial14c.png</figcaption>
108	+	</figure>
109	+
110	+	## Gradienten und Speicherfreigabe
111	+
112	+	Um Farbverläufe zu ermöglichen, besitzt Canvas2D die Funktionen createLinearGradient und createPattern. Diese Funktionen geben ein Objekt mit Referenzzählung zurück. Sie müssen dieses nicht explizit freigeben. Es wird freigegeben, wenn keine weitere Referenz auf dieses Objekt mehr vorhanden ist. Zum Beispiel:
113	+
114	+	``` pascal
115	+	var
116	+	grad: IBGRACanvasGradient2D;
117	+	begin
118	+	grad := ctx.createLinearGradient(0,0,320,240);
119	+	grad.addColorStop(0.3, '#ff0000');
120	+	grad.addColorStop(0.6, '#0000ff');
121	+	ctx.fillStyle(grad);
122	+
123	+	grad := ctx.createLinearGradient(0,0,320,240);
124	+	grad.addColorStop(0.3, '#ffffff');
125	+	grad.addColorStop(0.6, '#000000');
126	+	ctx.strokeStyle(grad);
127	+	ctx.lineWidth := 5;
128	+
129	+	ctx.moveto(160,120);
130	+	ctx.arc(160,120,100,Pi/6,-Pi/6,false);
131	+	ctx.fill();
132	+	ctx.stroke();
133	+	end;
134	+	```
135	+
136	+	Der Variablen 'grad' sind die Gradientenobjekte zugeordnet, aber es erfolgt kein Aufruf von Free.
137	+
138	+	<figure>
139	+	<img src="BGRATutorial14d.png" title="BGRATutorial14d.png" />
140	+	<figcaption>BGRATutorial14d.png</figcaption>
141	+	</figure>
142	+
143	+	## Weitere Beispiele
144	+
145	+	Andere Beispiele finden Sie im Verzeichnis 'testcanvas2d' des BGRABitmap-Archivs. Die Skripte wurden entnommen von [Jean-Paul Davalan Webseite](https://web.archive.org/web/20190207062328/http://jean-paul.davalan.pagesperso-orange.fr/lang/jsc/js09.html) (Internet Archive link), die auch Beispiele zur HTML-Canvas enthält.
146	+
147	+	[[BGRABitmap tutorial 13/de\|Voriges Tutorial (Pixelkoordinaten)]] \\| [[BGRABitmap tutorial 15/de\|Nächstes Tutorial (3D)]]
148	+
149	+	---
150	+	From the Free Pascal wiki, page "BGRABitmap tutorial 14/de", as it stood on 2021-05-08 after a change by Trev, out of the wiki's dump of 2024-05-26. Copyright stays with the author who wrote it, according to the old wiki's [[Licensing]] page. If you have concerns about this material, [message the admin](/wiki-contact).

Back to history