Sign in Join
Wiki copytemporary

BGRABitmap tutorial 14/de: what changed

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

OldNewLine
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.
1+[[BGRABitmap tutorial/de|**Home**]] | [[BGRABitmap tutorial 1/de|**Tutorial 1**]] | [[BGRABitmap tutorial 2/de|**Tutorial 2**]] | [[BGRABitmap tutorial 3/de|**Tutorial 3**]] | [[BGRABitmap tutorial 4/de|**Tutorial 4**]] | [[BGRABitmap tutorial 5/de|**Tutorial 5**]] | [[BGRABitmap tutorial 6/de|**Tutorial 6**]] | [[BGRABitmap tutorial 7/de|**Tutorial 7**]] | [[BGRABitmap tutorial 8/de|**Tutorial 8**]] | [[BGRABitmap tutorial 9/de|**Tutorial 9**]] | [[BGRABitmap tutorial 10/de|**Tutorial 10**]] | [[BGRABitmap tutorial 11/de|**Tutorial 11**]] | [[BGRABitmap tutorial 12/de|**Tutorial 12**]] | [[BGRABitmap tutorial 13/de|**Tutorial 13**]] | **Tutorial 14** | [[BGRABitmap tutorial 15/de|**Tutorial 15**]] | [[BGRABitmap tutorial 16/de|**Tutorial 16**]] | [Edit](<http://wiki.lazarus.freepascal.org/index.php?title=Template:BGRABitmap_tutorial_index/de&action=edit>)
22
3-## Erstes Programm
3+Dieses Tutorial zeigt Ihnen, wie Sie die Eigenschaft Canvas2D von BGRABitmap einsetzen können. Canvas2D arbeitet als Javascript-2D-Kontext des HTML-Canvas-Objektes.
44
5-Hier ist ein sehr einfaches Beispiel:
5+## Contents
66
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));
7+ * 1 Erstes Programm
8+ * 2 Komplexe Figuren
9+ * 3 Verwendung von Transformationen
10+ * 4 Gradienten und Speicherfreigabe
11+ * 5 Weitere Beispiele
1312
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);
13+## Erstes Programm
1814
19- bmp.Draw(Canvas,0,0);
20- bmp.Free;
21-end;
15+Hier ist ein sehr einfaches Beispiel:
2216```
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'.
17+procedure TForm1.FormPaint(Sender: TObject);
18+ var bmp: TBGRABitmap;
19+ ctx: TBGRACanvas2D;
20+ begin
21+ bmp := TBGRABitmap.Create(ClientWidth,ClientHeight,BGRA(210,210,210));
22+
23+ ctx := bmp.Canvas2D;
24+ ctx.fillStyle('rgb(240,128,0)');
25+ ctx.fillRect(30,30,80,60);
26+ ctx.strokeRect(50,50,80,60);
27+
28+ bmp.Draw(Canvas,0,0);
29+ bmp.Free;
30+ end;
31+```
2532
26-Der obige Code ist äquivalent zu diesem Javascript-Code :
33+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'.
2734
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- }
35+Der obige Code ist äquivalent zu diesem Javascript-Code :
3836```
37+var canvas = document.getElementsByTagName("canvas")[0];
38+ canvas.width = 200
39+ canvas.height = 200
40+ if (canvas.getContext){
41+ var ctx = canvas.getContext("2d");
42+ ctx.fillStyle = "rgb(240,128,0)";
43+ ctx.fillRect(30,30,80,60);
44+ ctx.strokeRect(50,50,80,60);
45+ }
46+```
3947
40-<figure>
41-<img src="BGRATutorial14a.png" title="BGRATutorial14a.png" />
42-<figcaption>BGRATutorial14a.png</figcaption>
43-</figure>
48+[![BGRATutorial14a.png](/wiki-images/5/5d/BGRATutorial14a.png)](</File:BGRATutorial14a.png>)
4449
4550## Komplexe Figuren
4651
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;
52+Um komplexe Figuren zu zeichnen, ist es notwendig, einen Pfad zu definieren:
6953```
54+procedure pave();
55+ begin
56+ ctx.fillStyle ('rgb(130,100,255)');
57+ ctx.strokeStyle ('rgb(0,0,255)');
58+ ctx.beginPath();
59+ ctx.lineWidth:=2;
60+ ctx.moveTo(5,5);ctx.lineTo(20,10);ctx.lineTo(55,5);ctx.lineTo(45,18);ctx.lineTo(30,50);
61+ ctx.closePath();
62+ ctx.stroke();
63+ ctx.fill();
64+ end;
65+
66+ begin
67+ bmp := TBGRABitmap.Create(ClientWidth,ClientHeight,BGRA(210,210,210));
68+ ctx := bmp.Canvas2D;
69+ pave();
70+ bmp.Draw(Canvas,0,0);
71+ bmp.Free;
72+ end;
73+```
7074
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).
75+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>).
7276
73-<figure>
74-<img src="Tutorial14b.png" title="Tutorial14b.png" />
75-<figcaption>Tutorial14b.png</figcaption>
76-</figure>
77+[![Tutorial14b.png](/wiki-images/a/a4/Tutorial14b.png)](</File:Tutorial14b.png>)
7778
7879## Verwendung von Transformationen
7980
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;
81+Jetzt können wir das Dreieck sechs Mal mit einer Drehung zeichnen durch Aufruf der Transformationsfunktionen.
10382```
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+```
104104
105-<figure>
106-<img src="BGRATutorial14c.png" title="BGRATutorial14c.png" />
107-<figcaption>BGRATutorial14c.png</figcaption>
108-</figure>
105+[![BGRATutorial14c.png](/wiki-images/9/91/BGRATutorial14c.png)](</File:BGRATutorial14c.png>)
109106
110107## Gradienten und Speicherfreigabe
111108
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
109+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:
110+```
115111var
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;
112+ grad: IBGRACanvasGradient2D;
113+ begin
114+ grad := ctx.createLinearGradient(0,0,320,240);
115+ grad.addColorStop(0.3, '#ff0000');
116+ grad.addColorStop(0.6, '#0000ff');
117+ ctx.fillStyle(grad);
118+
119+ grad := ctx.createLinearGradient(0,0,320,240);
120+ grad.addColorStop(0.3, '#ffffff');
121+ grad.addColorStop(0.6, '#000000');
122+ ctx.strokeStyle(grad);
123+ ctx.lineWidth := 5;
124+
125+ ctx.moveto(160,120);
126+ ctx.arc(160,120,100,Pi/6,-Pi/6,false);
127+ ctx.fill();
128+ ctx.stroke();
129+ end;
134130```
135131
136-Der Variablen 'grad' sind die Gradientenobjekte zugeordnet, aber es erfolgt kein Aufruf von Free.
132+Der Variablen 'grad' sind die Gradientenobjekte zugeordnet, aber es erfolgt kein Aufruf von Free.
137133
138-<figure>
139-<img src="BGRATutorial14d.png" title="BGRATutorial14d.png" />
140-<figcaption>BGRATutorial14d.png</figcaption>
141-</figure>
134+[![BGRATutorial14d.png](/wiki-images/9/96/BGRATutorial14d.png)](</File:BGRATutorial14d.png>)
142135
143136## Weitere Beispiele
144137
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.
138+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.
146139
147-[[BGRABitmap tutorial 13/de|Voriges Tutorial (Pixelkoordinaten)]] \| [[BGRABitmap tutorial 15/de|Nächstes Tutorial (3D)]]
140+[[BGRABitmap tutorial 13/de|Voriges Tutorial (Pixelkoordinaten)]] | [[BGRABitmap tutorial 15/de|Nächstes Tutorial (3D)]]
148141
149142---
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).*
143+*From the Free Pascal wiki, page "BGRABitmap tutorial 14/de", as the Internet Archive kept it on 2024-08-07. 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