OLD | NEW |
---|---|
(Empty) | |
1 <!DOCTYPE html> | |
2 <html> | |
3 <head> | |
4 <title>Canvas Hit Regions: path2d test</title> | |
5 <script src="../../resources/js-test.js"></script> | |
6 </head> | |
7 <body> | |
8 <canvas id="canvas" width="400" height="400"> | |
9 <button id="face"></button> | |
10 <button id="eyes"></button> | |
11 </canvas> | |
12 <script> | |
13 | |
14 var canvas = document.getElementById("canvas"); | |
15 var context = canvas.getContext("2d"); | |
16 | |
17 function clickCanvas(x, y) | |
18 { | |
19 if (!window.eventSender) | |
20 return "This test requires eventSender"; | |
21 | |
22 var result = null; | |
23 function listener(event) | |
24 { | |
25 result = event.region; | |
26 } | |
27 | |
28 var rect = canvas.getBoundingClientRect(); | |
29 canvas.addEventListener("click", listener, false); | |
30 eventSender.mouseMoveTo(rect.left + x, rect.top + y); | |
31 eventSender.mouseDown(); | |
32 eventSender.mouseUp(); | |
33 canvas.removeEventListener("click", listener, false); | |
34 | |
35 return result; | |
36 } | |
37 | |
38 var face = new Path2D(); | |
39 context.fillStyle = "pink"; | |
Rik
2014/06/29 03:22:22
Try to add scaling to the context to make sure tha
zino
2014/06/29 04:07:18
I've already created the test for transform operat
| |
40 face.arc(200, 175, 150, 0, Math.PI * 2, true); | |
41 context.fill(face); | |
42 context.addHitRegion({ id : "face", control : document.getElementById("face"), path : face }); | |
43 | |
44 var nose = new Path2D(); | |
45 context.fillStyle = "black"; | |
46 context.globalAlpha = .5; | |
47 nose.moveTo(200, 165); | |
48 nose.lineTo(240, 205); | |
49 nose.lineTo(160, 205); | |
50 nose.closePath(); | |
51 context.fill(nose); | |
52 context.addHitRegion({ id : "nose", path : nose }); | |
53 | |
54 var mouth = new Path2D(); | |
55 context.fillStyle = "red"; | |
56 mouth.rect(125, 240, 150, 20); | |
57 context.fill(mouth); | |
58 context.addHitRegion({ id : "mouth", path : mouth }); | |
59 | |
60 var eyes = new Path2D(); | |
61 context.globalAlpha = 1; | |
62 context.fillStyle = "blue"; | |
63 eyes.arc(150, 125, 25, 0, Math.PI * 2, true); | |
64 eyes.arc(250, 125, 25, 0, Math.PI * 2, true); | |
65 context.fill(eyes); | |
66 context.addHitRegion({ id: "eye", control : document.getElementById("eyes"), p ath : eyes }); | |
67 | |
68 debug("Hit detection and mouse event tests"); | |
69 shouldBe("clickCanvas(100, 100)", "'face'"); | |
70 shouldBe("clickCanvas(200, 200)", "'nose'"); | |
71 shouldBe("clickCanvas(127, 242)", "'mouth'"); | |
72 shouldBe("clickCanvas(150, 125)", "'eye'"); | |
73 shouldBe("clickCanvas(250, 125)", "'eye'"); | |
74 shouldBe("clickCanvas(200, 125)", "'face'"); | |
75 shouldBe("clickCanvas(20, 10)", "null"); | |
76 debug(""); | |
77 | |
78 </script> | |
79 </body> | |
80 </html> | |
OLD | NEW |