| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Canvas Hit Regions: transform test</title> |
| <script src="../../resources/js-test.js"></script> |
| </head> |
| <body> |
| <canvas id="canvas" width="400" height="400"></canvas> |
| <script src="./resources/canvas-hit-region-event.js"></script> |
| <script> |
| |
| var canvas = document.getElementById("canvas"); |
| var context = canvas.getContext("2d"); |
| var testSet = []; |
| |
| function clickTests(message, tests) |
| { |
| testSet.push({ |
| type : "debug", |
| message : message |
| }); |
| |
| for (var i = 0; i < tests.length; i++) |
| testSet.push({ |
| type : "shouldBe", |
| actual : clickCanvas(tests[i].x, tests[i].y), |
| expected : tests[i].expected |
| }); |
| |
| testSet.push({ |
| type : "debug", |
| message : "" |
| }); |
| } |
| |
| function createHitRegion(pathMethod) |
| { |
| context.removeHitRegion("hit"); |
| context.beginPath(); |
| context.save(); |
| pathMethod(); |
| context.restore(); |
| context.addHitRegion({ |
| id : "hit" |
| }); |
| } |
| |
| function drawStar() |
| { |
| context.beginPath(); |
| context.moveTo(0, -50); |
| context.lineTo(-15, -10); |
| context.lineTo(-50, -10); |
| context.lineTo(-15, 10); |
| context.lineTo(-35, 50); |
| context.lineTo(0, 20); |
| context.lineTo(35, 50); |
| context.lineTo(15, 10); |
| context.lineTo(50, -10); |
| context.lineTo(15, -10); |
| context.lineTo(0, -50); |
| } |
| |
| // Rectangle with context.translate() |
| createHitRegion(function() { |
| context.translate(20, 20); |
| context.rect(0, 0, 50, 50); |
| }); |
| clickTests("Rectangle with context.translate():", [ |
| { x : 1, y : 1, expected : null }, |
| { x : 31, y : 21, expected : "hit" }, |
| { x : 51, y : 51, expected : "hit" }, |
| { x : 10, y : 5, expected : null }, |
| { x : 61, y : 61, expected : "hit" } |
| ]); |
| |
| // Rectangle with context.rotate() |
| createHitRegion(function() { |
| context.rotate(Math.PI * 0.25); // 45 degrees |
| context.rect(0, 0, 50, 50); |
| }); |
| clickTests("Rectangle with context.rotate():", [ |
| { x : 20, y : 5, expected : null }, |
| { x : 0, y : 25, expected : "hit" }, |
| { x : 49, y : 49, expected : null }, |
| { x : 0, y : 51, expected : "hit" }, |
| ]); |
| |
| // Rectangle with context.scale() |
| createHitRegion(function() { |
| context.scale(2, 2); |
| context.rect(0, 0, 50, 50); |
| }); |
| clickTests("Rectangle with context.scale():", [ |
| { x : 1, y : 1, expected : "hit" }, |
| { x : 49, y : 49, expected : "hit" }, |
| { x : 51, y : 51, expected : "hit" }, |
| { x : 99, y : 99, expected : "hit" }, |
| ]); |
| |
| // Non rectangle (star) with context.translate() |
| createHitRegion(function() { |
| context.translate(50, 50); |
| drawStar(); |
| }); |
| clickTests("Non rectangle (star) with context.translate():", [ |
| { x : 26, y : 23, expected : null }, |
| { x : 82, y : 65, expected : null }, |
| { x : 51, y : 21, expected : "hit" }, |
| { x : 74, y : 49, expected : "hit" }, |
| { x : 49, y : 88, expected : null }, |
| { x : 13, y : 65, expected : null }, |
| { x : 66, y : 76, expected : "hit" }, |
| { x : 76, y : 23, expected : null }, |
| { x : 38, y : 76, expected : "hit" }, |
| { x : 28, y : 47, expected : "hit" }, |
| ]); |
| |
| // Non rectangle (star) with context.rotate() |
| createHitRegion(function() { |
| context.translate(50, 50); |
| context.rotate(Math.PI * 0.25); |
| drawStar(); |
| }); |
| clickTests("Non rectangle (star) with context.rotate():", [ |
| { x : 26, y : 23, expected : "hit" }, |
| { x : 82, y : 65, expected : null }, |
| { x : 51, y : 21, expected : null }, |
| { x : 74, y : 49, expected : null }, |
| { x : 49, y : 88, expected : null }, |
| { x : 13, y : 65, expected : null }, |
| { x : 66, y : 76, expected : null }, |
| { x : 76, y : 23, expected : "hit" }, |
| { x : 38, y : 76, expected : "hit" }, |
| { x : 28, y : 47, expected : null }, |
| ]); |
| |
| // Non rectangle (star) with context.scale() |
| createHitRegion(function() { |
| context.translate(25, 25); |
| context.scale(0.5, 0.5); |
| drawStar(); |
| }); |
| clickTests("Non rectangle (star) with context.scale():", [ |
| { x : 28, y : 13, expected : "hit" }, |
| { x : 38, y : 24, expected : "hit" }, |
| { x : 34, y : 38, expected : "hit" }, |
| { x : 13, y : 12, expected : null }, |
| { x : 36, y : 12, expected : null }, |
| { x : 40, y : 33, expected : null }, |
| { x : 9, y : 31, expected : null }, |
| { x : 18, y : 41, expected : "hit" }, |
| { x : 12, y : 25, expected : "hit" }, |
| { x : 25, y : 42, expected : null }, |
| ]); |
| |
| for (var i = 0; i < testSet.length; i++) { |
| var test = testSet[i]; |
| |
| if (test.type == "debug") { |
| debug(test.message); |
| } |
| else if (test.type == "shouldBe") { |
| window.region = test.expected; |
| if (test.expected == null) |
| shouldBe("region", String(test.actual)); |
| else |
| shouldBe("region", "'" + test.actual + "'"); |
| } |
| } |
| |
| </script> |
| </body> |
| </html> |
