1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
|
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en_US" lang="en_US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- context2d.qdoc -->
<title>Qt 4.8: Context2D Example</title>
<link rel="stylesheet" type="text/css" href="style/offline.css" />
</head>
<body>
<div class="header" id="qtdocheader">
<div class="content">
<a href="index.html" class="qtref"><span>Qt Reference Documentation</span></a>
</div>
<div class="breadcrumb toolblock">
<ul>
<li class="first"><a href="index.html">Home</a></li>
<!-- Breadcrumbs go here -->
<li><a href="all-examples.html">Examples</a></li>
<li>Context2D Example</li>
</ul>
</div>
</div>
<div class="content mainContent">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#using-the-html-canvas-element-in-a-web-browser">Using The HTML Canvas Element in a Web Browser</a></li>
<li class="level1"><a href="#using-qt-script-to-script-a-canvas">Using Qt Script to script a Canvas</a></li>
<li class="level1"><a href="#the-context2d-class">The Context2D Class</a></li>
<li class="level2"><a href="#implementation">Implementation</a></li>
<li class="level1"><a href="#the-canvas-widget">The Canvas Widget</a></li>
<li class="level1"><a href="#the-environment">The Environment</a></li>
<li class="level1"><a href="#the-application-window">The Application Window</a></li>
</ul>
</div>
<h1 class="title">Context2D Example</h1>
<span class="subtitle"></span>
<!-- $$$script/context2d-description -->
<div class="descr"> <a name="details"></a>
<p>Files:</p>
<ul>
<li><a href="script-context2d-context2d-cpp.html">script/context2d/context2d.cpp</a></li>
<li><a href="script-context2d-context2d-h.html">script/context2d/context2d.h</a></li>
<li><a href="script-context2d-domimage-cpp.html">script/context2d/domimage.cpp</a></li>
<li><a href="script-context2d-domimage-h.html">script/context2d/domimage.h</a></li>
<li><a href="script-context2d-environment-cpp.html">script/context2d/environment.cpp</a></li>
<li><a href="script-context2d-environment-h.html">script/context2d/environment.h</a></li>
<li><a href="script-context2d-qcontext2dcanvas-cpp.html">script/context2d/qcontext2dcanvas.cpp</a></li>
<li><a href="script-context2d-qcontext2dcanvas-h.html">script/context2d/qcontext2dcanvas.h</a></li>
<li><a href="script-context2d-window-cpp.html">script/context2d/window.cpp</a></li>
<li><a href="script-context2d-window-h.html">script/context2d/window.h</a></li>
<li><a href="script-context2d-scripts-alpha-js.html">script/context2d/scripts/alpha.js</a></li>
<li><a href="script-context2d-scripts-arc-js.html">script/context2d/scripts/arc.js</a></li>
<li><a href="script-context2d-scripts-bezier-js.html">script/context2d/scripts/bezier.js</a></li>
<li><a href="script-context2d-scripts-clock-js.html">script/context2d/scripts/clock.js</a></li>
<li><a href="script-context2d-scripts-fill1-js.html">script/context2d/scripts/fill1.js</a></li>
<li><a href="script-context2d-scripts-grad-js.html">script/context2d/scripts/grad.js</a></li>
<li><a href="script-context2d-scripts-linecap-js.html">script/context2d/scripts/linecap.js</a></li>
<li><a href="script-context2d-scripts-linestye-js.html">script/context2d/scripts/linestye.js</a></li>
<li><a href="script-context2d-scripts-moveto-js.html">script/context2d/scripts/moveto.js</a></li>
<li><a href="script-context2d-scripts-moveto2-js.html">script/context2d/scripts/moveto2.js</a></li>
<li><a href="script-context2d-scripts-pacman-js.html">script/context2d/scripts/pacman.js</a></li>
<li><a href="script-context2d-scripts-plasma-js.html">script/context2d/scripts/plasma.js</a></li>
<li><a href="script-context2d-scripts-pong-js.html">script/context2d/scripts/pong.js</a></li>
<li><a href="script-context2d-scripts-quad-js.html">script/context2d/scripts/quad.js</a></li>
<li><a href="script-context2d-scripts-rgba-js.html">script/context2d/scripts/rgba.js</a></li>
<li><a href="script-context2d-scripts-rotate-js.html">script/context2d/scripts/rotate.js</a></li>
<li><a href="script-context2d-scripts-scale-js.html">script/context2d/scripts/scale.js</a></li>
<li><a href="script-context2d-scripts-stroke1-js.html">script/context2d/scripts/stroke1.js</a></li>
<li><a href="script-context2d-scripts-translate-js.html">script/context2d/scripts/translate.js</a></li>
<li><a href="script-context2d-main-cpp.html">script/context2d/main.cpp</a></li>
<li><a href="script-context2d-context2d-pro.html">script/context2d/context2d.pro</a></li>
<li><a href="script-context2d-context2d-qrc.html">script/context2d/context2d.qrc</a></li>
</ul>
<p>This Qt Script example is an implementation of the Context2D API.<p class="centerAlign"><img src="images/context2d-example.png" alt="" /></p><p>Context2D is part of the specification for the HTML <tt><canvas></tt> element. It can be used to draw graphics via scripting. A good resource for learning more about the HTML <tt><canvas></tt> element is the <a href="http://developer.mozilla.org/en/docs/HTML:Canvas">Mozilla Developer Center</a>.</p>
<a name="using-the-html-canvas-element-in-a-web-browser"></a>
<h2>Using The HTML Canvas Element in a Web Browser</h2>
<p>First, let's look at how the <tt><canvas></tt> element is typically used in a web browser. The following HTML snippet defines a canvas of size 400x400 pixels with id <tt>mycanvas</tt>:</p>
<pre class="cpp"> <span class="operator"><</span>canvas width<span class="operator">=</span><span class="string">"400"</span> height<span class="operator">=</span><span class="string">"400"</span> id<span class="operator">=</span><span class="string">"mycanvas"</span><span class="operator">></span>Fallback content goes here<span class="operator">.</span><span class="operator"><</span><span class="operator">/</span>canvas<span class="operator">></span></pre>
<p>To draw on the canvas, we must first obtain a reference to the DOM element corresponding to the <tt><canvas></tt> tag and then call the element's getContext() function. The resulting object implements the Context2D API that we use to draw.</p>
<pre class="cpp"> <span class="operator"><</span>script<span class="operator">></span>
var canvas <span class="operator">=</span> document<span class="operator">.</span>getElementById(<span class="string">"mycanvas"</span>);
var ctx <span class="operator">=</span> canvas<span class="operator">.</span>getContext(<span class="string">"2d"</span>);
<span class="comment">// Draw a face</span>
ctx<span class="operator">.</span>beginPath();
ctx<span class="operator">.</span>arc(<span class="number">75</span><span class="operator">,</span><span class="number">75</span><span class="operator">,</span><span class="number">50</span><span class="operator">,</span><span class="number">0</span><span class="operator">,</span>Math<span class="operator">.</span>PI<span class="operator">*</span><span class="number">2</span><span class="operator">,</span><span class="keyword">true</span>); <span class="comment">// Outer circle</span>
ctx<span class="operator">.</span>moveTo(<span class="number">110</span><span class="operator">,</span><span class="number">75</span>);
ctx<span class="operator">.</span>arc(<span class="number">75</span><span class="operator">,</span><span class="number">75</span><span class="operator">,</span><span class="number">35</span><span class="operator">,</span><span class="number">0</span><span class="operator">,</span>Math<span class="operator">.</span>PI<span class="operator">,</span><span class="keyword">false</span>); <span class="comment">// Mouth</span>
ctx<span class="operator">.</span>moveTo(<span class="number">65</span><span class="operator">,</span><span class="number">65</span>);
ctx<span class="operator">.</span>arc(<span class="number">60</span><span class="operator">,</span><span class="number">65</span><span class="operator">,</span><span class="number">5</span><span class="operator">,</span><span class="number">0</span><span class="operator">,</span>Math<span class="operator">.</span>PI<span class="operator">*</span><span class="number">2</span><span class="operator">,</span><span class="keyword">true</span>); <span class="comment">// Left eye</span>
ctx<span class="operator">.</span>moveTo(<span class="number">95</span><span class="operator">,</span><span class="number">65</span>);
ctx<span class="operator">.</span>arc(<span class="number">90</span><span class="operator">,</span><span class="number">65</span><span class="operator">,</span><span class="number">5</span><span class="operator">,</span><span class="number">0</span><span class="operator">,</span>Math<span class="operator">.</span>PI<span class="operator">*</span><span class="number">2</span><span class="operator">,</span><span class="keyword">true</span>); <span class="comment">// Right eye</span>
ctx<span class="operator">.</span>stroke();
<span class="operator"><</span><span class="operator">/</span>script<span class="operator">></span></pre>
<p>When the page is rendered by a browser that supports the <tt><canvas></tt> tag, this would be the result:</p>
<p class="centerAlign"><img src="images/context2d-example-smileysmile.png" alt="" /></p><a name="using-qt-script-to-script-a-canvas"></a>
<h2>Using Qt Script to script a Canvas</h2>
<p>The goal of this example is to be able to evaluate scripts that use the Context2D API, and render the results. Basic interaction (mouse, keyboard) should also be supported. In other words, we want to present scripts with an execution environment that very much resembles that of a web browser. Of course, our environment is only a small subset of what a browser provides; i.e. we don't provide a full DOM API, only what is needed to run "self-contained" Context2D scripts (i.e. scripts that don't depend on other parts of the DOM document).</p>
<p>Our "Context2D-browser" is set up through the following steps:</p>
<ul>
<li>Create an Environment.</li>
<li>Create a Context2D, and a QContext2DCanvas widget to render it.</li>
<li>Add the canvas object to the environment; this will enable scripts to obtain a reference to it.</li>
<li>Evaluate scripts in the environment.</li>
</ul>
<p>Once a script has been evaluated, the application handles any timer events and input events that occur subsequently (i.e. forwards events to their associated script targets).</p>
<a name="the-context2d-class"></a>
<h2>The Context2D Class</h2>
<p>The "heart" of this example is the Context2D C++ class that implements the drawing API. Its interface is defined in terms of properties and slots. Note that this class isn't tied to Qt Script in any way.</p>
<pre class="cpp"> <span class="keyword">class</span> Context2D : <span class="keyword">public</span> <span class="type"><a href="qobject.html">QObject</a></span>
{
Q_OBJECT
<span class="comment">// compositing</span>
Q_PROPERTY(<span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> globalAlpha READ globalAlpha WRITE setGlobalAlpha)
Q_PROPERTY(<span class="type"><a href="qstring.html">QString</a></span> globalCompositeOperation READ globalCompositeOperation WRITE setGlobalCompositeOperation)
Q_PROPERTY(<span class="type"><a href="qvariant.html">QVariant</a></span> strokeStyle READ strokeStyle WRITE setStrokeStyle)
Q_PROPERTY(<span class="type"><a href="qvariant.html">QVariant</a></span> fillStyle READ fillStyle WRITE setFillStyle)
<span class="comment">// line caps/joins</span>
Q_PROPERTY(<span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> lineWidth READ lineWidth WRITE setLineWidth)
Q_PROPERTY(<span class="type"><a href="qstring.html">QString</a></span> lineCap READ lineCap WRITE setLineCap)
Q_PROPERTY(<span class="type"><a href="qstring.html">QString</a></span> lineJoin READ lineJoin WRITE setLineJoin)
Q_PROPERTY(<span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> miterLimit READ miterLimit WRITE setMiterLimit)
<span class="comment">// shadows</span>
Q_PROPERTY(<span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> shadowOffsetX READ shadowOffsetX WRITE setShadowOffsetX)
Q_PROPERTY(<span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> shadowOffsetY READ shadowOffsetY WRITE setShadowOffsetY)
Q_PROPERTY(<span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> shadowBlur READ shadowBlur WRITE setShadowBlur)
Q_PROPERTY(<span class="type"><a href="qstring.html">QString</a></span> shadowColor READ shadowColor WRITE setShadowColor)</pre>
<p>The properties define various aspects of the Context2D configuration.</p>
<pre class="cpp"> <span class="keyword">public</span> <span class="keyword">slots</span>:
<span class="type">void</span> save(); <span class="comment">// push state on state stack</span>
<span class="type">void</span> restore(); <span class="comment">// pop state stack and restore state</span>
<span class="type">void</span> scale(<span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> x<span class="operator">,</span> <span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> y);
<span class="type">void</span> rotate(<span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> angle);
<span class="type">void</span> translate(<span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> x<span class="operator">,</span> <span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> y);
<span class="type">void</span> transform(<span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> m11<span class="operator">,</span> <span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> m12<span class="operator">,</span> <span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> m21<span class="operator">,</span> <span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> m22<span class="operator">,</span>
<span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> dx<span class="operator">,</span> <span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> dy);
<span class="type">void</span> setTransform(<span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> m11<span class="operator">,</span> <span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> m12<span class="operator">,</span> <span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> m21<span class="operator">,</span> <span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> m22<span class="operator">,</span>
<span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> dx<span class="operator">,</span> <span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> dy);
CanvasGradient createLinearGradient(<span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> x0<span class="operator">,</span> <span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> y0<span class="operator">,</span>
<span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> x1<span class="operator">,</span> <span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> y1);
CanvasGradient createRadialGradient(<span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> x0<span class="operator">,</span> <span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> y0<span class="operator">,</span>
<span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> r0<span class="operator">,</span> <span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> x1<span class="operator">,</span>
<span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> y1<span class="operator">,</span> <span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> r1);
<span class="comment">// rects</span>
<span class="type">void</span> clearRect(<span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> x<span class="operator">,</span> <span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> y<span class="operator">,</span> <span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> w<span class="operator">,</span> <span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> h);
<span class="type">void</span> fillRect(<span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> x<span class="operator">,</span> <span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> y<span class="operator">,</span> <span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> w<span class="operator">,</span> <span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> h);
<span class="type">void</span> strokeRect(<span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> x<span class="operator">,</span> <span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> y<span class="operator">,</span> <span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> w<span class="operator">,</span> <span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> h);
<span class="comment">// path API</span>
<span class="type">void</span> beginPath();
<span class="type">void</span> closePath();
<span class="type">void</span> moveTo(<span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> x<span class="operator">,</span> <span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> y);
<span class="type">void</span> lineTo(<span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> x<span class="operator">,</span> <span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> y);
<span class="type">void</span> quadraticCurveTo(<span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> cpx<span class="operator">,</span> <span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> cpy<span class="operator">,</span> <span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> x<span class="operator">,</span> <span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> y);
<span class="type">void</span> bezierCurveTo(<span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> cp1x<span class="operator">,</span> <span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> cp1y<span class="operator">,</span>
<span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> cp2x<span class="operator">,</span> <span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> cp2y<span class="operator">,</span> <span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> x<span class="operator">,</span> <span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> y);
<span class="type">void</span> arcTo(<span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> x1<span class="operator">,</span> <span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> y1<span class="operator">,</span> <span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> x2<span class="operator">,</span> <span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> y2<span class="operator">,</span> <span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> radius);
<span class="type">void</span> rect(<span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> x<span class="operator">,</span> <span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> y<span class="operator">,</span> <span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> w<span class="operator">,</span> <span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> h);
<span class="type">void</span> arc(<span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> x<span class="operator">,</span> <span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> y<span class="operator">,</span> <span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> radius<span class="operator">,</span>
<span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> startAngle<span class="operator">,</span> <span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> endAngle<span class="operator">,</span>
<span class="type">bool</span> anticlockwise);
<span class="type">void</span> fill();
<span class="type">void</span> stroke();
<span class="type">void</span> clip();
<span class="type">bool</span> isPointInPath(<span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> x<span class="operator">,</span> <span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> y) <span class="keyword">const</span>;</pre>
<p>The slots define the operations that can be performed.</p>
<pre class="cpp"> <span class="keyword">signals</span>:
<span class="type">void</span> changed(<span class="keyword">const</span> <span class="type"><a href="qimage.html">QImage</a></span> <span class="operator">&</span>image);</pre>
<p>The changed() signal is emitted when the contents of the drawing area has changed, so that clients associated with the Context2D object (i.e. the canvas widget that renders it) are notified.</p>
<a name="implementation"></a>
<h3>Implementation</h3>
<p>Conveniently enough, the concepts, data structures and operations of the Context2D API map more or less directly to Qt's painting API. Conceptually, all we have to do is initialize a <a href="qpainter.html">QPainter</a> according to the Context2D properties, and use functions like <a href="qpainter.html#strokePath">QPainter::strokePath</a>() to do the painting. Painting is done on a <a href="qimage.html">QImage</a>.</p>
<pre class="cpp"> <span class="type"><a href="qstring.html">QString</a></span> Context2D<span class="operator">::</span>lineCap() <span class="keyword">const</span>
{
<span class="keyword">switch</span> (m_state<span class="operator">.</span>lineCap) {
<span class="keyword">case</span> <span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>FlatCap:
<span class="keyword">return</span> <span class="string">"butt"</span>;
<span class="keyword">case</span> <span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>SquareCap:
<span class="keyword">return</span> <span class="string">"square"</span>;
<span class="keyword">case</span> <span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>RoundCap:
<span class="keyword">return</span> <span class="string">"round"</span>;
<span class="keyword">default</span>: ;
}
<span class="keyword">return</span> <span class="type"><a href="qstring.html">QString</a></span>();
}
<span class="type">void</span> Context2D<span class="operator">::</span>setLineCap(<span class="keyword">const</span> <span class="type"><a href="qstring.html">QString</a></span> <span class="operator">&</span>capString)
{
<span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>PenCapStyle style;
<span class="keyword">if</span> (capString <span class="operator">=</span><span class="operator">=</span> <span class="string">"round"</span>)
style <span class="operator">=</span> <span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>RoundCap;
<span class="keyword">else</span> <span class="keyword">if</span> (capString <span class="operator">=</span><span class="operator">=</span> <span class="string">"square"</span>)
style <span class="operator">=</span> <span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>SquareCap;
<span class="keyword">else</span> <span class="comment">//if (capString == "butt")</span>
style <span class="operator">=</span> <span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>FlatCap;
m_state<span class="operator">.</span>lineCap <span class="operator">=</span> style;
m_state<span class="operator">.</span>flags <span class="operator">|</span><span class="operator">=</span> DirtyLineCap;
}</pre>
<p>The property accessors and most of the slots manipulate the internal Context2D state in some way. For the <tt>lineCap</tt> property, Context2D uses a string representation; we therefore have to map it from/to a <a href="qt.html#PenCapStyle-enum">Qt::PenCapStyle</a>. The <tt>lineJoin</tt> property is handled in the same fashion. All the property setters also set a <i>dirty flag</i> for the property; this is used to decide which aspects of the <a href="qpainter.html">QPainter</a> that need to be updated before doing the next painting operation.</p>
<pre class="cpp"> <span class="type">void</span> Context2D<span class="operator">::</span>setFillStyle(<span class="keyword">const</span> <span class="type"><a href="qvariant.html">QVariant</a></span> <span class="operator">&</span>style)
{
<span class="keyword">if</span> (style<span class="operator">.</span>canConvert<span class="operator"><</span>CanvasGradient<span class="operator">></span>()) {
CanvasGradient cg <span class="operator">=</span> qvariant_cast<span class="operator"><</span>CanvasGradient<span class="operator">></span>(style);
m_state<span class="operator">.</span>fillStyle <span class="operator">=</span> cg<span class="operator">.</span>value;
} <span class="keyword">else</span> {
<span class="type"><a href="qcolor.html">QColor</a></span> color <span class="operator">=</span> colorFromString(style<span class="operator">.</span>toString());
m_state<span class="operator">.</span>fillStyle <span class="operator">=</span> color;
}
m_state<span class="operator">.</span>flags <span class="operator">|</span><span class="operator">=</span> DirtyFillStyle;
}</pre>
<p>The implementation of the <tt>fillStyle</tt> property is interesting, since the value can be either a string or a <tt>CanvasGradient</tt>. We handle this by having the property be of type <a href="qvariant.html">QVariant</a>, and check the actual type of the value to see how to handle the write.</p>
<pre class="cpp"> <span class="type">void</span> Context2D<span class="operator">::</span>fillRect(<span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> x<span class="operator">,</span> <span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> y<span class="operator">,</span> <span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> w<span class="operator">,</span> <span class="type"><a href="qtglobal.html#qreal-typedef">qreal</a></span> h)
{
beginPainting();
m_painter<span class="operator">.</span>save();
m_painter<span class="operator">.</span>setMatrix(m_state<span class="operator">.</span>matrix<span class="operator">,</span> <span class="keyword">false</span>);
m_painter<span class="operator">.</span>fillRect(<span class="type"><a href="qrectf.html">QRectF</a></span>(x<span class="operator">,</span> y<span class="operator">,</span> w<span class="operator">,</span> h)<span class="operator">,</span> m_painter<span class="operator">.</span>brush());
m_painter<span class="operator">.</span>restore();
scheduleChange();
}</pre>
<p>Context2D does not have a concept of a paint event; painting operations can happen at any time. We would like to be efficient, and not have to call <a href="qpainter.html#begin">QPainter::begin</a>() and <a href="qpainter.html#end">QPainter::end</a>() for every painting operation, since typically many painting operations will follow in quick succession. The implementations of the painting operations use a helper function, beginPainting(), that activates the <a href="qpainter.html">QPainter</a> if it isn't active already, and updates the state of the <a href="qpainter.html">QPainter</a> (brush, pen, etc.) so that it reflects the current Context2D state.</p>
<pre class="cpp"> <span class="type">void</span> Context2D<span class="operator">::</span>scheduleChange()
{
<span class="keyword">if</span> (m_changeTimerId <span class="operator">=</span><span class="operator">=</span> <span class="operator">-</span><span class="number">1</span>)
m_changeTimerId <span class="operator">=</span> startTimer(<span class="number">0</span>);
}
<span class="type">void</span> Context2D<span class="operator">::</span>timerEvent(<span class="type"><a href="qtimerevent.html">QTimerEvent</a></span> <span class="operator">*</span>e)
{
<span class="keyword">if</span> (e<span class="operator">-</span><span class="operator">></span>timerId() <span class="operator">=</span><span class="operator">=</span> m_changeTimerId) {
killTimer(m_changeTimerId);
m_changeTimerId <span class="operator">=</span> <span class="operator">-</span><span class="number">1</span>;
<span class="keyword">emit</span> changed(endPainting());
} <span class="keyword">else</span> {
<span class="type"><a href="qobject.html">QObject</a></span><span class="operator">::</span>timerEvent(e);
}
}</pre>
<p>The implementation of each painting operation ends by calling scheduleChange(), which will post a zero-timer event if one is not already pending. When the application returns to the event loop later (presumably after all the drawing operations have finished), the timer will trigger, <a href="qpainter.html#end">QPainter::end</a>() will be called, and the changed() signal is emitted with the new image as argument. The net effect is that there will typically be only a single (<a href="qpainter.html#begin">QPainter::begin</a>(), <a href="qpainter.html#end">QPainter::end</a>()) pair executed for the full sequence of painting operations.</p>
<a name="the-canvas-widget"></a>
<h2>The Canvas Widget</h2>
<pre class="cpp"> <span class="keyword">class</span> QContext2DCanvas : <span class="keyword">public</span> <span class="type"><a href="qwidget.html">QWidget</a></span>
{
Q_OBJECT
<span class="keyword">public</span>:
QContext2DCanvas(Context2D <span class="operator">*</span>context<span class="operator">,</span> Environment <span class="operator">*</span>env<span class="operator">,</span> <span class="type"><a href="qwidget.html">QWidget</a></span> <span class="operator">*</span>parent <span class="operator">=</span> <span class="number">0</span>);
<span class="operator">~</span>QContext2DCanvas();
Context2D <span class="operator">*</span>context() <span class="keyword">const</span>;
<span class="type">void</span> reset();
<span class="keyword">public</span> <span class="keyword">slots</span>:
<span class="type"><a href="qscriptvalue.html">QScriptValue</a></span> getContext(<span class="keyword">const</span> <span class="type"><a href="qstring.html">QString</a></span> <span class="operator">&</span>str);
<span class="type">void</span> resize(<span class="type">int</span> width<span class="operator">,</span> <span class="type">int</span> height);
<span class="comment">// EventTarget</span>
<span class="type">void</span> addEventListener(<span class="keyword">const</span> <span class="type"><a href="qstring.html">QString</a></span> <span class="operator">&</span>type<span class="operator">,</span> <span class="keyword">const</span> <span class="type"><a href="qscriptvalue.html">QScriptValue</a></span> <span class="operator">&</span>listener<span class="operator">,</span>
<span class="type">bool</span> useCapture);
<span class="keyword">protected</span>:
<span class="keyword">virtual</span> <span class="type">void</span> paintEvent(<span class="type"><a href="qpaintevent.html">QPaintEvent</a></span> <span class="operator">*</span>e);
<span class="keyword">virtual</span> <span class="type">void</span> mouseMoveEvent(<span class="type"><a href="qmouseevent.html">QMouseEvent</a></span> <span class="operator">*</span>e);
<span class="keyword">virtual</span> <span class="type">void</span> mousePressEvent(<span class="type"><a href="qmouseevent.html">QMouseEvent</a></span> <span class="operator">*</span>e);
<span class="keyword">virtual</span> <span class="type">void</span> mouseReleaseEvent(<span class="type"><a href="qmouseevent.html">QMouseEvent</a></span> <span class="operator">*</span>e);
<span class="keyword">virtual</span> <span class="type">void</span> keyPressEvent(<span class="type"><a href="qkeyevent.html">QKeyEvent</a></span> <span class="operator">*</span>e);
<span class="keyword">virtual</span> <span class="type">void</span> keyReleaseEvent(<span class="type"><a href="qkeyevent.html">QKeyEvent</a></span> <span class="operator">*</span>e);
<span class="keyword">virtual</span> <span class="type">void</span> resizeEvent(<span class="type"><a href="qresizeevent.html">QResizeEvent</a></span> <span class="operator">*</span>e);
<span class="keyword">private</span> <span class="keyword">slots</span>:
<span class="type">void</span> contentsChanged(<span class="keyword">const</span> <span class="type"><a href="qimage.html">QImage</a></span> <span class="operator">&</span>image);</pre>
<p>The QContext2DCanvas class provides a widget that renders the contents of a Context2D object. It also provides a minimal scripting API, most notably the getContext() function.</p>
<pre class="cpp"> QContext2DCanvas<span class="operator">::</span>QContext2DCanvas(Context2D <span class="operator">*</span>context<span class="operator">,</span> Environment <span class="operator">*</span>env<span class="operator">,</span> <span class="type"><a href="qwidget.html">QWidget</a></span> <span class="operator">*</span>parent)
: <span class="type"><a href="qwidget.html">QWidget</a></span>(parent)<span class="operator">,</span> m_context(context)<span class="operator">,</span> m_env(env)
{
<span class="type"><a href="qobject.html">QObject</a></span><span class="operator">::</span>connect(context<span class="operator">,</span> SIGNAL(changed(<span class="type"><a href="qimage.html">QImage</a></span>))<span class="operator">,</span> <span class="keyword">this</span><span class="operator">,</span> SLOT(contentsChanged(<span class="type"><a href="qimage.html">QImage</a></span>)));
setMouseTracking(<span class="keyword">true</span>);
}</pre>
<p>The constructor connects to the changed() signal of the Context2D object, so that the widget can update itself when it needs to do so. Mouse tracking is enabled so that mouse move events will be received even when no mouse buttons are depressed.</p>
<pre class="cpp"> <span class="type"><a href="qscriptvalue.html">QScriptValue</a></span> QContext2DCanvas<span class="operator">::</span>getContext(<span class="keyword">const</span> <span class="type"><a href="qstring.html">QString</a></span> <span class="operator">&</span>str)
{
<span class="keyword">if</span> (str <span class="operator">!</span><span class="operator">=</span> <span class="string">"2d"</span>)
<span class="keyword">return</span> <span class="type"><a href="qscriptvalue.html">QScriptValue</a></span>();
<span class="keyword">return</span> m_env<span class="operator">-</span><span class="operator">></span>toWrapper(m_context);
}</pre>
<p>The getContext() function asks the environment to wrap the Context2D object; the resulting proxy object makes the Context2D API available to scripts.</p>
<pre class="cpp"> <span class="type">void</span> QContext2DCanvas<span class="operator">::</span>contentsChanged(<span class="keyword">const</span> <span class="type"><a href="qimage.html">QImage</a></span> <span class="operator">&</span>image)
{
m_image <span class="operator">=</span> image;
update();
}
<span class="type">void</span> QContext2DCanvas<span class="operator">::</span>paintEvent(<span class="type"><a href="qpaintevent.html">QPaintEvent</a></span> <span class="operator">*</span>e)
{
<span class="type"><a href="qpainter.html">QPainter</a></span> p(<span class="keyword">this</span>);
<span class="preprocessor">#ifdef Q_OS_SYMBIAN</span>
<span class="comment">// Draw white rect first since in with some themes the js-file content will produce black-on-black.</span>
<span class="type"><a href="qbrush.html">QBrush</a></span> whiteBgBrush(<span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>white);
p<span class="operator">.</span>fillRect(e<span class="operator">-</span><span class="operator">></span>rect()<span class="operator">,</span> whiteBgBrush);
<span class="preprocessor">#endif</span>
p<span class="operator">.</span>setClipRect(e<span class="operator">-</span><span class="operator">></span>rect());
p<span class="operator">.</span>drawImage(<span class="number">0</span><span class="operator">,</span> <span class="number">0</span><span class="operator">,</span> m_image);
}</pre>
<p>The paintEvent() function simply paints the contents that was last received from the Context2D object.</p>
<pre class="cpp"> <span class="type">void</span> QContext2DCanvas<span class="operator">::</span>mouseMoveEvent(<span class="type"><a href="qmouseevent.html">QMouseEvent</a></span> <span class="operator">*</span>e)
{
m_env<span class="operator">-</span><span class="operator">></span>handleEvent(<span class="keyword">this</span><span class="operator">,</span> e);
}
<span class="type">void</span> QContext2DCanvas<span class="operator">::</span>mousePressEvent(<span class="type"><a href="qmouseevent.html">QMouseEvent</a></span> <span class="operator">*</span>e)
{
m_env<span class="operator">-</span><span class="operator">></span>handleEvent(<span class="keyword">this</span><span class="operator">,</span> e);
}
<span class="type">void</span> QContext2DCanvas<span class="operator">::</span>mouseReleaseEvent(<span class="type"><a href="qmouseevent.html">QMouseEvent</a></span> <span class="operator">*</span>e)
{
m_env<span class="operator">-</span><span class="operator">></span>handleEvent(<span class="keyword">this</span><span class="operator">,</span> e);
}
<span class="type">void</span> QContext2DCanvas<span class="operator">::</span>keyPressEvent(<span class="type"><a href="qkeyevent.html">QKeyEvent</a></span> <span class="operator">*</span>e)
{
m_env<span class="operator">-</span><span class="operator">></span>handleEvent(<span class="keyword">this</span><span class="operator">,</span> e);
}
<span class="type">void</span> QContext2DCanvas<span class="operator">::</span>keyReleaseEvent(<span class="type"><a href="qkeyevent.html">QKeyEvent</a></span> <span class="operator">*</span>e)
{
m_env<span class="operator">-</span><span class="operator">></span>handleEvent(<span class="keyword">this</span><span class="operator">,</span> e);
}</pre>
<p>The canvas widget reimplements mouse and key event handlers, and forwards these events to the scripting environment. The environment will take care of delivering the event to the proper script target, if any.</p>
<a name="the-environment"></a>
<h2>The Environment</h2>
<pre class="cpp"> <span class="keyword">class</span> Environment : <span class="keyword">public</span> <span class="type"><a href="qobject.html">QObject</a></span>
{
Q_OBJECT
Q_PROPERTY(<span class="type"><a href="qscriptvalue.html">QScriptValue</a></span> document READ document)
<span class="keyword">public</span>:
Environment(<span class="type"><a href="qobject.html">QObject</a></span> <span class="operator">*</span>parent <span class="operator">=</span> <span class="number">0</span>);
<span class="operator">~</span>Environment();
<span class="type"><a href="qscriptvalue.html">QScriptValue</a></span> document() <span class="keyword">const</span>;
<span class="type">void</span> addCanvas(QContext2DCanvas <span class="operator">*</span>canvas);
QContext2DCanvas <span class="operator">*</span>canvasByName(<span class="keyword">const</span> <span class="type"><a href="qstring.html">QString</a></span> <span class="operator">&</span>name) <span class="keyword">const</span>;
<span class="type"><a href="qlist.html">QList</a></span><span class="operator"><</span>QContext2DCanvas<span class="operator">*</span><span class="operator">></span> canvases() <span class="keyword">const</span>;
<span class="type"><a href="qscriptvalue.html">QScriptValue</a></span> evaluate(<span class="keyword">const</span> <span class="type"><a href="qstring.html">QString</a></span> <span class="operator">&</span>code<span class="operator">,</span>
<span class="keyword">const</span> <span class="type"><a href="qstring.html">QString</a></span> <span class="operator">&</span>fileName <span class="operator">=</span> <span class="type"><a href="qstring.html">QString</a></span>());
<span class="type"><a href="qscriptvalue.html">QScriptValue</a></span> toWrapper(<span class="type"><a href="qobject.html">QObject</a></span> <span class="operator">*</span>object);
<span class="type">void</span> handleEvent(QContext2DCanvas <span class="operator">*</span>canvas<span class="operator">,</span> <span class="type"><a href="qmouseevent.html">QMouseEvent</a></span> <span class="operator">*</span>e);
<span class="type">void</span> handleEvent(QContext2DCanvas <span class="operator">*</span>canvas<span class="operator">,</span> <span class="type"><a href="qkeyevent.html">QKeyEvent</a></span> <span class="operator">*</span>e);
<span class="type">void</span> reset();</pre>
<p>The Environment class provides a scripting environment where a Canvas C++ object can be registered, looked up by ID (name), and where scripts can be evaluated. The environment has a <tt>document</tt> property, just like the scripting environment of a web browser, so that scripts can call <tt>document.getElementById()</tt> to obtain a reference to a canvas.</p>
<pre class="cpp"> <span class="keyword">public</span> <span class="keyword">slots</span>:
<span class="type">int</span> setInterval(<span class="keyword">const</span> <span class="type"><a href="qscriptvalue.html">QScriptValue</a></span> <span class="operator">&</span>expression<span class="operator">,</span> <span class="type">int</span> delay);
<span class="type">void</span> clearInterval(<span class="type">int</span> timerId);
<span class="type">int</span> setTimeout(<span class="keyword">const</span> <span class="type"><a href="qscriptvalue.html">QScriptValue</a></span> <span class="operator">&</span>expression<span class="operator">,</span> <span class="type">int</span> delay);
<span class="type">void</span> clearTimeout(<span class="type">int</span> timerId);</pre>
<p>The Environment class provides the timer attributes of the DOM Window Object interface. This enables us to support scripts that do animation, for example.</p>
<pre class="cpp"> <span class="keyword">signals</span>:
<span class="type">void</span> scriptError(<span class="keyword">const</span> <span class="type"><a href="qscriptvalue.html">QScriptValue</a></span> <span class="operator">&</span>error);</pre>
<p>The scriptError() signal is emitted when evaluation of a script causes a script exception. For example, if a mouse press handler or timeout handler causes an exception, the environment's client(s) will be notified of this and can report the error.</p>
<pre class="cpp"> Environment<span class="operator">::</span>Environment(<span class="type"><a href="qobject.html">QObject</a></span> <span class="operator">*</span>parent)
: <span class="type"><a href="qobject.html">QObject</a></span>(parent)
{
m_engine <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qscriptengine.html">QScriptEngine</a></span>(<span class="keyword">this</span>);
m_document <span class="operator">=</span> m_engine<span class="operator">-</span><span class="operator">></span>newQObject(
<span class="keyword">new</span> Document(<span class="keyword">this</span>)<span class="operator">,</span> <span class="type"><a href="qscriptengine.html">QScriptEngine</a></span><span class="operator">::</span><span class="type">QtOwnership</span><span class="operator">,</span>
<span class="type"><a href="qscriptengine.html">QScriptEngine</a></span><span class="operator">::</span>ExcludeSuperClassContents);
CanvasGradientPrototype<span class="operator">::</span>setup(m_engine);
m_originalGlobalObject <span class="operator">=</span> m_engine<span class="operator">-</span><span class="operator">></span>globalObject();
reset();
}</pre>
<p>The constructor initializes the environment. First it creates the <a href="qscriptengine.html">QScriptEngine</a> that will be used to evaluate scripts. It creates the Document object that provides the getElementById() function. Note that the <a href="qscriptengine.html#QObjectWrapOption-enum">QScriptEngine::ExcludeSuperClassContents</a> flag is specified to avoid the wrapper objects from exposing properties and methods inherited from <a href="qobject.html">QObject</a>. Next, the environment wraps a pointer to <i>itself</i>; this is to prepare for setting this object as the script engine's Global Object. The properties of the standard Global Object are copied, so that these will also be available in our custom Global Object. We also create two self-references to the object; again, this is to provide a minimal level of compabilitity with the scripting environment that web browsers provide.</p>
<pre class="cpp"> <span class="type">void</span> Environment<span class="operator">::</span>addCanvas(QContext2DCanvas <span class="operator">*</span>canvas)
{
m_canvases<span class="operator">.</span>append(canvas);
}
QContext2DCanvas <span class="operator">*</span>Environment<span class="operator">::</span>canvasByName(<span class="keyword">const</span> <span class="type"><a href="qstring.html">QString</a></span> <span class="operator">&</span>name) <span class="keyword">const</span>
{
<span class="keyword">for</span> (<span class="type">int</span> i <span class="operator">=</span> <span class="number">0</span>; i <span class="operator"><</span> m_canvases<span class="operator">.</span>size(); <span class="operator">+</span><span class="operator">+</span>i) {
QContext2DCanvas <span class="operator">*</span>canvas <span class="operator">=</span> m_canvases<span class="operator">.</span>at(i);
<span class="keyword">if</span> (canvas<span class="operator">-</span><span class="operator">></span>objectName() <span class="operator">=</span><span class="operator">=</span> name)
<span class="keyword">return</span> canvas;
}
<span class="keyword">return</span> <span class="number">0</span>;
}</pre>
<p>The addCanvas() function adds the given canvas to the list of registered canvas objects. The canvasByName() function looks up a canvas by <a href="qobject.html#objectName-prop">QObject::objectName</a>(). This function is used to implement the <tt>document.getElementById()</tt> script function.</p>
<pre class="cpp"> <span class="type">int</span> Environment<span class="operator">::</span>setInterval(<span class="keyword">const</span> <span class="type"><a href="qscriptvalue.html">QScriptValue</a></span> <span class="operator">&</span>expression<span class="operator">,</span> <span class="type">int</span> delay)
{
<span class="keyword">if</span> (expression<span class="operator">.</span>isString() <span class="operator">|</span><span class="operator">|</span> expression<span class="operator">.</span>isFunction()) {
<span class="type">int</span> timerId <span class="operator">=</span> startTimer(delay);
m_intervalHash<span class="operator">.</span>insert(timerId<span class="operator">,</span> expression);
<span class="keyword">return</span> timerId;
}
<span class="keyword">return</span> <span class="operator">-</span><span class="number">1</span>;
}
<span class="type">void</span> Environment<span class="operator">::</span>clearInterval(<span class="type">int</span> timerId)
{
killTimer(timerId);
m_intervalHash<span class="operator">.</span>remove(timerId);
}
<span class="type">void</span> Environment<span class="operator">::</span>timerEvent(<span class="type"><a href="qtimerevent.html">QTimerEvent</a></span> <span class="operator">*</span>event)
{
<span class="type">int</span> id <span class="operator">=</span> event<span class="operator">-</span><span class="operator">></span>timerId();
<span class="type"><a href="qscriptvalue.html">QScriptValue</a></span> expression <span class="operator">=</span> m_intervalHash<span class="operator">.</span>value(id);
<span class="keyword">if</span> (<span class="operator">!</span>expression<span class="operator">.</span>isValid()) {
expression <span class="operator">=</span> m_timeoutHash<span class="operator">.</span>value(id);
<span class="keyword">if</span> (expression<span class="operator">.</span>isValid())
killTimer(id);
}
<span class="keyword">if</span> (expression<span class="operator">.</span>isString()) {
evaluate(expression<span class="operator">.</span>toString());
} <span class="keyword">else</span> <span class="keyword">if</span> (expression<span class="operator">.</span>isFunction()) {
expression<span class="operator">.</span>call();
}
maybeEmitScriptError();
}</pre>
<p>The setInterval() and clearInterval() implementations use a <a href="qhash.html">QHash</a> to map from timer ID to the <a href="qscriptvalue.html">QScriptValue</a> that holds the expression to evaluate when the timer is triggered. A helper function, maybeEmitScriptError(), is called after invoking the script handler; it will emit the scriptError() signal if the script engine has an uncaught exception.</p>
<pre class="cpp"> <span class="type"><a href="qscriptvalue.html">QScriptValue</a></span> Environment<span class="operator">::</span>toWrapper(<span class="type"><a href="qobject.html">QObject</a></span> <span class="operator">*</span>object)
{
<span class="keyword">return</span> m_engine<span class="operator">-</span><span class="operator">></span>newQObject(object<span class="operator">,</span> <span class="type"><a href="qscriptengine.html">QScriptEngine</a></span><span class="operator">::</span><span class="type">QtOwnership</span><span class="operator">,</span>
<span class="type"><a href="qscriptengine.html">QScriptEngine</a></span><span class="operator">::</span>PreferExistingWrapperObject
<span class="operator">|</span> <span class="type"><a href="qscriptengine.html">QScriptEngine</a></span><span class="operator">::</span>ExcludeSuperClassContents);
}</pre>
<p>The toWrapper() functions creates a <a href="qscriptvalue.html">QScriptValue</a> that wraps the given <a href="qobject.html">QObject</a>. Note that the <a href="qscriptengine.html#QObjectWrapOption-enum">QScriptEngine::PreferExistingWrapperObject</a> flag is specified; this guarantees that a single, unique wrapper object will be returned, even if toWrapper() is called several times with the same argument. This is important, since it is possible that a script can set new properties on the resulting wrapper object (e.g. event handlers like <tt>onmousedown</tt>), and we want these to persist.</p>
<pre class="cpp"> <span class="type">void</span> Environment<span class="operator">::</span>handleEvent(QContext2DCanvas <span class="operator">*</span>canvas<span class="operator">,</span> <span class="type"><a href="qmouseevent.html">QMouseEvent</a></span> <span class="operator">*</span>e)
{
<span class="type"><a href="qstring.html">QString</a></span> type;
<span class="keyword">switch</span> (e<span class="operator">-</span><span class="operator">></span>type()) {
<span class="keyword">case</span> <span class="type"><a href="qevent.html">QEvent</a></span><span class="operator">::</span>MouseButtonPress:
type <span class="operator">=</span> <span class="string">"mousedown"</span>; <span class="keyword">break</span>;
<span class="keyword">case</span> <span class="type"><a href="qevent.html">QEvent</a></span><span class="operator">::</span>MouseButtonRelease:
type <span class="operator">=</span> <span class="string">"mouseup"</span>; <span class="keyword">break</span>;
<span class="keyword">case</span> <span class="type"><a href="qevent.html">QEvent</a></span><span class="operator">::</span>MouseMove:
type <span class="operator">=</span> <span class="string">"mousemove"</span>; <span class="keyword">break</span>;
<span class="keyword">default</span>: <span class="keyword">break</span>;
}
<span class="keyword">if</span> (type<span class="operator">.</span>isEmpty())
<span class="keyword">return</span>;
<span class="type"><a href="qscriptvalue.html">QScriptValue</a></span> handlerObject;
<span class="type"><a href="qscriptvalue.html">QScriptValue</a></span> handler <span class="operator">=</span> eventHandler(canvas<span class="operator">,</span> type<span class="operator">,</span> <span class="operator">&</span>handlerObject);
<span class="keyword">if</span> (<span class="operator">!</span>handler<span class="operator">.</span>isFunction())
<span class="keyword">return</span>;
<span class="type"><a href="qscriptvalue.html">QScriptValue</a></span> scriptEvent <span class="operator">=</span> newFakeDomEvent(type<span class="operator">,</span> toWrapper(canvas));
<span class="comment">// MouseEvent</span>
scriptEvent<span class="operator">.</span>setProperty(<span class="string">"screenX"</span><span class="operator">,</span> e<span class="operator">-</span><span class="operator">></span>globalX()<span class="operator">,</span> <span class="type"><a href="qscriptvalue.html">QScriptValue</a></span><span class="operator">::</span>ReadOnly);
scriptEvent<span class="operator">.</span>setProperty(<span class="string">"screenY"</span><span class="operator">,</span> e<span class="operator">-</span><span class="operator">></span>globalY()<span class="operator">,</span> <span class="type"><a href="qscriptvalue.html">QScriptValue</a></span><span class="operator">::</span>ReadOnly);
scriptEvent<span class="operator">.</span>setProperty(<span class="string">"clientX"</span><span class="operator">,</span> e<span class="operator">-</span><span class="operator">></span>x()<span class="operator">,</span> <span class="type"><a href="qscriptvalue.html">QScriptValue</a></span><span class="operator">::</span>ReadOnly);
scriptEvent<span class="operator">.</span>setProperty(<span class="string">"clientY"</span><span class="operator">,</span> e<span class="operator">-</span><span class="operator">></span>y()<span class="operator">,</span> <span class="type"><a href="qscriptvalue.html">QScriptValue</a></span><span class="operator">::</span>ReadOnly);
scriptEvent<span class="operator">.</span>setProperty(<span class="string">"layerX"</span><span class="operator">,</span> e<span class="operator">-</span><span class="operator">></span>x()<span class="operator">,</span> <span class="type"><a href="qscriptvalue.html">QScriptValue</a></span><span class="operator">::</span>ReadOnly);
scriptEvent<span class="operator">.</span>setProperty(<span class="string">"layerY"</span><span class="operator">,</span> e<span class="operator">-</span><span class="operator">></span>y()<span class="operator">,</span> <span class="type"><a href="qscriptvalue.html">QScriptValue</a></span><span class="operator">::</span>ReadOnly);
scriptEvent<span class="operator">.</span>setProperty(<span class="string">"pageX"</span><span class="operator">,</span> e<span class="operator">-</span><span class="operator">></span>x()<span class="operator">,</span> <span class="type"><a href="qscriptvalue.html">QScriptValue</a></span><span class="operator">::</span>ReadOnly);
scriptEvent<span class="operator">.</span>setProperty(<span class="string">"pageY"</span><span class="operator">,</span> e<span class="operator">-</span><span class="operator">></span>y()<span class="operator">,</span> <span class="type"><a href="qscriptvalue.html">QScriptValue</a></span><span class="operator">::</span>ReadOnly);
scriptEvent<span class="operator">.</span>setProperty(<span class="string">"altKey"</span><span class="operator">,</span> (e<span class="operator">-</span><span class="operator">></span>modifiers() <span class="operator">&</span> <span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>AltModifier) <span class="operator">!</span><span class="operator">=</span> <span class="number">0</span><span class="operator">,</span>
<span class="type"><a href="qscriptvalue.html">QScriptValue</a></span><span class="operator">::</span>ReadOnly);
scriptEvent<span class="operator">.</span>setProperty(<span class="string">"ctrlKey"</span><span class="operator">,</span> (e<span class="operator">-</span><span class="operator">></span>modifiers() <span class="operator">&</span> <span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>ControlModifier) <span class="operator">!</span><span class="operator">=</span> <span class="number">0</span><span class="operator">,</span>
<span class="type"><a href="qscriptvalue.html">QScriptValue</a></span><span class="operator">::</span>ReadOnly);
scriptEvent<span class="operator">.</span>setProperty(<span class="string">"metaKey"</span><span class="operator">,</span> (e<span class="operator">-</span><span class="operator">></span>modifiers() <span class="operator">&</span> <span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>MetaModifier) <span class="operator">!</span><span class="operator">=</span> <span class="number">0</span><span class="operator">,</span>
<span class="type"><a href="qscriptvalue.html">QScriptValue</a></span><span class="operator">::</span>ReadOnly);
scriptEvent<span class="operator">.</span>setProperty(<span class="string">"shiftKey"</span><span class="operator">,</span> (e<span class="operator">-</span><span class="operator">></span>modifiers() <span class="operator">&</span> <span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>ShiftModifier) <span class="operator">!</span><span class="operator">=</span> <span class="number">0</span><span class="operator">,</span>
<span class="type"><a href="qscriptvalue.html">QScriptValue</a></span><span class="operator">::</span>ReadOnly);
<span class="type">int</span> button <span class="operator">=</span> <span class="number">0</span>;
<span class="keyword">if</span> (e<span class="operator">-</span><span class="operator">></span>button() <span class="operator">=</span><span class="operator">=</span> <span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>RightButton)
button <span class="operator">=</span> <span class="number">2</span>;
<span class="keyword">else</span> <span class="keyword">if</span> (e<span class="operator">-</span><span class="operator">></span>button() <span class="operator">=</span><span class="operator">=</span> <span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>MidButton)
button <span class="operator">=</span> <span class="number">1</span>;
scriptEvent<span class="operator">.</span>setProperty(<span class="string">"button"</span><span class="operator">,</span> button);
scriptEvent<span class="operator">.</span>setProperty(<span class="string">"relatedTarget"</span><span class="operator">,</span> m_engine<span class="operator">-</span><span class="operator">></span>nullValue()<span class="operator">,</span>
<span class="type"><a href="qscriptvalue.html">QScriptValue</a></span><span class="operator">::</span>ReadOnly);
handler<span class="operator">.</span>call(handlerObject<span class="operator">,</span> <span class="type">QScriptValueList</span>() <span class="operator"><</span><span class="operator"><</span> scriptEvent);
maybeEmitScriptError();
}</pre>
<p>The handleEvent() function determines if there exists a handler for the given event in the environment, and if so, invokes that handler. Since the script expects a DOM event, the Qt C++ event must be converted to a DOM event before it is passed to the script. This mapping is relatively straightforward, but again, we only implement a subset of the full DOM API; just enough to get most scripts to work.</p>
<pre class="cpp"> <span class="type"><a href="qscriptvalue.html">QScriptValue</a></span> Environment<span class="operator">::</span>newFakeDomEvent(<span class="keyword">const</span> <span class="type"><a href="qstring.html">QString</a></span> <span class="operator">&</span>type<span class="operator">,</span> <span class="keyword">const</span> <span class="type"><a href="qscriptvalue.html">QScriptValue</a></span> <span class="operator">&</span>target)
{
<span class="type"><a href="qscriptvalue.html">QScriptValue</a></span> e <span class="operator">=</span> m_engine<span class="operator">-</span><span class="operator">></span>newObject();
<span class="comment">// Event</span>
e<span class="operator">.</span>setProperty(<span class="string">"type"</span><span class="operator">,</span> type<span class="operator">,</span> <span class="type"><a href="qscriptvalue.html">QScriptValue</a></span><span class="operator">::</span>ReadOnly);
e<span class="operator">.</span>setProperty(<span class="string">"bubbles"</span><span class="operator">,</span> <span class="keyword">true</span><span class="operator">,</span> <span class="type"><a href="qscriptvalue.html">QScriptValue</a></span><span class="operator">::</span>ReadOnly);
e<span class="operator">.</span>setProperty(<span class="string">"cancelable"</span><span class="operator">,</span> <span class="keyword">false</span><span class="operator">,</span> <span class="type"><a href="qscriptvalue.html">QScriptValue</a></span><span class="operator">::</span>ReadOnly);
e<span class="operator">.</span>setProperty(<span class="string">"target"</span><span class="operator">,</span> target<span class="operator">,</span> <span class="type"><a href="qscriptvalue.html">QScriptValue</a></span><span class="operator">::</span>ReadOnly);
e<span class="operator">.</span>setProperty(<span class="string">"currentTarget"</span><span class="operator">,</span> target<span class="operator">,</span> <span class="type"><a href="qscriptvalue.html">QScriptValue</a></span><span class="operator">::</span>ReadOnly);
e<span class="operator">.</span>setProperty(<span class="string">"eventPhase"</span><span class="operator">,</span> <span class="number">3</span>); <span class="comment">// bubbling</span>
e<span class="operator">.</span>setProperty(<span class="string">"timeStamp"</span><span class="operator">,</span> <span class="type"><a href="qdatetime.html">QDateTime</a></span><span class="operator">::</span>currentDateTime()<span class="operator">.</span>toTime_t());
<span class="comment">// UIEvent</span>
e<span class="operator">.</span>setProperty(<span class="string">"detail"</span><span class="operator">,</span> <span class="number">0</span><span class="operator">,</span> <span class="type"><a href="qscriptvalue.html">QScriptValue</a></span><span class="operator">::</span>ReadOnly);
e<span class="operator">.</span>setProperty(<span class="string">"view"</span><span class="operator">,</span> m_engine<span class="operator">-</span><span class="operator">></span>globalObject()<span class="operator">,</span> <span class="type"><a href="qscriptvalue.html">QScriptValue</a></span><span class="operator">::</span>ReadOnly);
<span class="keyword">return</span> e;
}</pre>
<p>The newFakeDomEvent() function is a helper function that creates a new script object and initializes it with default values for the attributes defined in the DOM Event and DOM UIEvent interfaces.</p>
<pre class="cpp"> <span class="keyword">class</span> Document : <span class="keyword">public</span> <span class="type"><a href="qobject.html">QObject</a></span>
{
Q_OBJECT
<span class="keyword">public</span>:
Document(Environment <span class="operator">*</span>env);
<span class="operator">~</span>Document();
<span class="keyword">public</span> <span class="keyword">slots</span>:
<span class="type"><a href="qscriptvalue.html">QScriptValue</a></span> getElementById(<span class="keyword">const</span> <span class="type"><a href="qstring.html">QString</a></span> <span class="operator">&</span>id) <span class="keyword">const</span>;
<span class="type"><a href="qscriptvalue.html">QScriptValue</a></span> getElementsByTagName(<span class="keyword">const</span> <span class="type"><a href="qstring.html">QString</a></span> <span class="operator">&</span>name) <span class="keyword">const</span>;
<span class="comment">// EventTarget</span>
<span class="type">void</span> addEventListener(<span class="keyword">const</span> <span class="type"><a href="qstring.html">QString</a></span> <span class="operator">&</span>type<span class="operator">,</span> <span class="keyword">const</span> <span class="type"><a href="qscriptvalue.html">QScriptValue</a></span> <span class="operator">&</span>listener<span class="operator">,</span>
<span class="type">bool</span> useCapture);
};</pre>
<p>The Document class defines two slots that become available to scripts: getElementById() and getElementsByTagName(). When the tag name is "canvas", getElementsByTagName() will return a list of all canvas objects that are registered in the environment.</p>
<a name="the-application-window"></a>
<h2>The Application Window</h2>
<pre class="cpp"> Window<span class="operator">::</span>Window(<span class="type"><a href="qwidget.html">QWidget</a></span> <span class="operator">*</span>parent)
: <span class="type"><a href="qwidget.html">QWidget</a></span>(parent)
<span class="preprocessor">#ifndef QT_NO_SCRIPTTOOLS</span>
<span class="operator">,</span> m_debugger(<span class="number">0</span>)<span class="operator">,</span> m_debugWindow(<span class="number">0</span>)
<span class="preprocessor">#endif</span>
{
m_env <span class="operator">=</span> <span class="keyword">new</span> Environment(<span class="keyword">this</span>);
<span class="type"><a href="qobject.html">QObject</a></span><span class="operator">::</span>connect(m_env<span class="operator">,</span> SIGNAL(scriptError(<span class="type"><a href="qscriptvalue.html">QScriptValue</a></span>))<span class="operator">,</span>
<span class="keyword">this</span><span class="operator">,</span> SLOT(reportScriptError(<span class="type"><a href="qscriptvalue.html">QScriptValue</a></span>)));
Context2D <span class="operator">*</span>context <span class="operator">=</span> <span class="keyword">new</span> Context2D(<span class="keyword">this</span>);
context<span class="operator">-</span><span class="operator">></span>setSize(<span class="number">150</span><span class="operator">,</span> <span class="number">150</span>);
m_canvas <span class="operator">=</span> <span class="keyword">new</span> QContext2DCanvas(context<span class="operator">,</span> m_env<span class="operator">,</span> <span class="keyword">this</span>);
m_canvas<span class="operator">-</span><span class="operator">></span>setFixedSize(context<span class="operator">-</span><span class="operator">></span>size());
m_canvas<span class="operator">-</span><span class="operator">></span>setObjectName(<span class="string">"tutorial"</span>);
m_env<span class="operator">-</span><span class="operator">></span>addCanvas(m_canvas);</pre>
<p>The Window constructor creates an Environment object and connects to its scriptError() signal. It then creates a Context2D object, and a QContext2DCanvas widget to hold it. The canvas widget is given the name <tt>tutorial</tt>, and added to the environment; scripts can access the canvas by e.g. <tt>document.getElementById('tutorial')</tt>.</p>
<pre class="cpp"> <span class="type"><a href="qdir.html">QDir</a></span> dir(scriptsDir());
<span class="type"><a href="qfileinfo.html#QFileInfoList-typedef">QFileInfoList</a></span> entries <span class="operator">=</span> dir<span class="operator">.</span>entryInfoList(<span class="type"><a href="qstringlist.html">QStringList</a></span>() <span class="operator"><</span><span class="operator"><</span> <span class="string">"*.js"</span>);
<span class="keyword">for</span> (<span class="type">int</span> i <span class="operator">=</span> <span class="number">0</span>; i <span class="operator"><</span> entries<span class="operator">.</span>size(); <span class="operator">+</span><span class="operator">+</span>i)
m_view<span class="operator">-</span><span class="operator">></span>addItem(entries<span class="operator">.</span>at(i)<span class="operator">.</span>fileName());
connect(m_view<span class="operator">,</span> SIGNAL(currentItemChanged(<span class="type"><a href="qlistwidgetitem.html">QListWidgetItem</a></span><span class="operator">*</span><span class="operator">,</span><span class="type"><a href="qlistwidgetitem.html">QListWidgetItem</a></span><span class="operator">*</span>))<span class="operator">,</span>
<span class="keyword">this</span><span class="operator">,</span> SLOT(selectScript(<span class="type"><a href="qlistwidgetitem.html">QListWidgetItem</a></span><span class="operator">*</span>)));</pre>
<p>The window contains a list widget that is populated with available scripts (read from a <tt>scripts/</tt> folder).</p>
<pre class="cpp"> <span class="type">void</span> Window<span class="operator">::</span>selectScript(<span class="type"><a href="qlistwidgetitem.html">QListWidgetItem</a></span> <span class="operator">*</span>item)
{
<span class="type"><a href="qstring.html">QString</a></span> fileName <span class="operator">=</span> item<span class="operator">-</span><span class="operator">></span>text();
runScript(fileName<span class="operator">,</span> <span class="comment">/*debug=*/</span><span class="keyword">false</span>);
}</pre>
<p>When an item is selected, the corresponding script is evaluated in the environment.</p>
<pre class="cpp"> <span class="type">void</span> Window<span class="operator">::</span>runInDebugger()
{
<span class="type"><a href="qlistwidgetitem.html">QListWidgetItem</a></span> <span class="operator">*</span>item <span class="operator">=</span> m_view<span class="operator">-</span><span class="operator">></span>currentItem();
<span class="keyword">if</span> (item) {
<span class="type"><a href="qstring.html">QString</a></span> fileName <span class="operator">=</span> item<span class="operator">-</span><span class="operator">></span>text();
runScript(fileName<span class="operator">,</span> <span class="comment">/*debug=*/</span><span class="keyword">true</span>);
}
}</pre>
<p>When the "Run in Debugger" button is clicked, the Qt Script debugger will automatically be invoked when the first statement of the script is reached. This enables the user to inspect the scripting environment and control further execution of the script; e.g. he can single-step through the script and/or set breakpoints. It is also possible to enter script statements in the debugger's console widget, e.g. to perform custom Context2D drawing operations, interactively.</p>
<pre class="cpp"> <span class="type">void</span> Window<span class="operator">::</span>runScript(<span class="keyword">const</span> <span class="type"><a href="qstring.html">QString</a></span> <span class="operator">&</span>fileName<span class="operator">,</span> <span class="type">bool</span> debug)
{
<span class="type"><a href="qfile.html">QFile</a></span> file(scriptsDir() <span class="operator">+</span> <span class="string">"/"</span> <span class="operator">+</span> fileName);
file<span class="operator">.</span>open(<span class="type"><a href="qiodevice.html">QIODevice</a></span><span class="operator">::</span>ReadOnly);
<span class="type"><a href="qstring.html">QString</a></span> contents <span class="operator">=</span> file<span class="operator">.</span>readAll();
file<span class="operator">.</span>close();
m_env<span class="operator">-</span><span class="operator">></span>reset();
<span class="preprocessor">#ifndef QT_NO_SCRIPTTOOLS</span>
<span class="keyword">if</span> (debug) {
<span class="keyword">if</span> (<span class="operator">!</span>m_debugger) {
m_debugger <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qscriptenginedebugger.html">QScriptEngineDebugger</a></span>(<span class="keyword">this</span>);
m_debugWindow <span class="operator">=</span> m_debugger<span class="operator">-</span><span class="operator">></span>standardWindow();
m_debugWindow<span class="operator">-</span><span class="operator">></span>setWindowModality(<span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>ApplicationModal);
m_debugWindow<span class="operator">-</span><span class="operator">></span>resize(<span class="number">1280</span><span class="operator">,</span> <span class="number">704</span>);
}
m_debugger<span class="operator">-</span><span class="operator">></span>attachTo(m_env<span class="operator">-</span><span class="operator">></span>engine());
m_debugger<span class="operator">-</span><span class="operator">></span>action(<span class="type"><a href="qscriptenginedebugger.html">QScriptEngineDebugger</a></span><span class="operator">::</span>InterruptAction)<span class="operator">-</span><span class="operator">></span>trigger();
} <span class="keyword">else</span> {
<span class="keyword">if</span> (m_debugger)
m_debugger<span class="operator">-</span><span class="operator">></span>detach();
}
<span class="preprocessor">#else</span>
Q_UNUSED(debug);
<span class="preprocessor">#endif</span>
<span class="type"><a href="qscriptvalue.html">QScriptValue</a></span> ret <span class="operator">=</span> m_env<span class="operator">-</span><span class="operator">></span>evaluate(contents<span class="operator">,</span> fileName);
<span class="preprocessor">#ifndef QT_NO_SCRIPTTOOLS</span>
<span class="keyword">if</span> (m_debugWindow)
m_debugWindow<span class="operator">-</span><span class="operator">></span>hide();
<span class="preprocessor">#endif</span>
<span class="keyword">if</span> (ret<span class="operator">.</span>isError())
reportScriptError(ret);
}</pre>
<p>If the evaluation of a script causes an uncaught exception, the Qt Script debugger will automatically be invoked; this enables the user to get an idea of what went wrong.</p>
</div>
<!-- @@@script/context2d -->
<div class="ft">
<span></span>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2012 Nokia Corporation and/or its
subsidiaries. Documentation contributions included herein are the copyrights of
their respective owners.</p>
<br />
<p>
The documentation provided herein is licensed under the terms of the
<a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation
License version 1.3</a> as published by the Free Software Foundation.</p>
<p>
Documentation sources may be obtained from <a href="http://www.qt-project.org">
www.qt-project.org</a>.</p>
<br />
<p>
Nokia, Qt and their respective logos are trademarks of Nokia Corporation
in Finland and/or other countries worldwide. All other trademarks are property
of their respective owners. <a title="Privacy Policy"
href="http://en.gitorious.org/privacy_policy/">Privacy Policy</a></p>
</div>
</body>
</html>
|
