Chromium Code Reviews Chromium Code Reviews
Issue 354333002:
Add path option(path2d) for hit regions on canvas2d. (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master| Index: LayoutTests/fast/canvas/canvas-hit-regions-path2d-test.html |
| diff --git a/LayoutTests/fast/canvas/canvas-hit-regions-path2d-test.html b/LayoutTests/fast/canvas/canvas-hit-regions-path2d-test.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..d4efe6930eefd49e158c4c56cd5d9e1c7d164da7 |
| --- /dev/null |
| +++ b/LayoutTests/fast/canvas/canvas-hit-regions-path2d-test.html |
| @@ -0,0 +1,80 @@ |
| +<!DOCTYPE html> |
| +<html> |
| +<head> |
| + <title>Canvas Hit Regions: path2d test</title> |
| + <script src="../../resources/js-test.js"></script> |
| +</head> |
| +<body> |
| +<canvas id="canvas" width="400" height="400"> |
| + <button id="face"></button> |
| + <button id="eyes"></button> |
| +</canvas> |
| +<script> |
| + |
| + var canvas = document.getElementById("canvas"); |
| + var context = canvas.getContext("2d"); |
| + |
| + function clickCanvas(x, y) |
| + { |
| + if (!window.eventSender) |
| + return "This test requires eventSender"; |
| + |
| + var result = null; |
| + function listener(event) |
| + { |
| + result = event.region; |
| + } |
| + |
| + var rect = canvas.getBoundingClientRect(); |
| + canvas.addEventListener("click", listener, false); |
| + eventSender.mouseMoveTo(rect.left + x, rect.top + y); |
| + eventSender.mouseDown(); |
| + eventSender.mouseUp(); |
| + canvas.removeEventListener("click", listener, false); |
| + |
| + return result; |
| + } |
| + |
| + var face = new Path2D(); |
| + 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
|
| + face.arc(200, 175, 150, 0, Math.PI * 2, true); |
| + context.fill(face); |
| + context.addHitRegion({ id : "face", control : document.getElementById("face"), path : face }); |
| + |
| + var nose = new Path2D(); |
| + context.fillStyle = "black"; |
| + context.globalAlpha = .5; |
| + nose.moveTo(200, 165); |
| + nose.lineTo(240, 205); |
| + nose.lineTo(160, 205); |
| + nose.closePath(); |
| + context.fill(nose); |
| + context.addHitRegion({ id : "nose", path : nose }); |
| + |
| + var mouth = new Path2D(); |
| + context.fillStyle = "red"; |
| + mouth.rect(125, 240, 150, 20); |
| + context.fill(mouth); |
| + context.addHitRegion({ id : "mouth", path : mouth }); |
| + |
| + var eyes = new Path2D(); |
| + context.globalAlpha = 1; |
| + context.fillStyle = "blue"; |
| + eyes.arc(150, 125, 25, 0, Math.PI * 2, true); |
| + eyes.arc(250, 125, 25, 0, Math.PI * 2, true); |
| + context.fill(eyes); |
| + context.addHitRegion({ id: "eye", control : document.getElementById("eyes"), path : eyes }); |
| + |
| + debug("Hit detection and mouse event tests"); |
| + shouldBe("clickCanvas(100, 100)", "'face'"); |
| + shouldBe("clickCanvas(200, 200)", "'nose'"); |
| + shouldBe("clickCanvas(127, 242)", "'mouth'"); |
| + shouldBe("clickCanvas(150, 125)", "'eye'"); |
| + shouldBe("clickCanvas(250, 125)", "'eye'"); |
| + shouldBe("clickCanvas(200, 125)", "'face'"); |
| + shouldBe("clickCanvas(20, 10)", "null"); |
| + debug(""); |
| + |
| +</script> |
| +</body> |
| +</html> |
