mask.html 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Mask</title>
  5. <meta charset="utf-8">
  6. </head>
  7. <body>
  8. <script type="text/javascript" src="../build/escher.js"></script>
  9. <script type="text/javascript">
  10. var division = document.createElement("div");
  11. division.style.position = "absolute";
  12. division.style.width = "100%";
  13. division.style.height = "100%";
  14. division.style.top = "0px";
  15. division.style.left = "0px";
  16. division.style.overflow = "hidden";
  17. document.body.appendChild(division);
  18. // Setup the display canvas
  19. var canvas = document.createElement("canvas");
  20. canvas.style.position = "absolute";
  21. canvas.style.width = "100%";
  22. canvas.style.height = "100%";
  23. canvas.style.top = "0px";
  24. canvas.style.left = "0px";
  25. canvas.width = window.innerWidth;
  26. canvas.height = window.innerHeight;
  27. canvas.oncontextmenu = function(event)
  28. {
  29. event.preventDefault();
  30. return false;
  31. };
  32. division.appendChild(canvas);
  33. window.onresize = function()
  34. {
  35. canvas.width = window.innerWidth;
  36. canvas.height = window.innerHeight;
  37. };
  38. canvas.ondblclick = function(event)
  39. {
  40. var box = new Escher.BoxMask();
  41. box.invert = true;
  42. box.draggable = true;
  43. blackLayer.masks.push(box);
  44. group.add(box);
  45. if(event !== undefined)
  46. {
  47. var p = new Escher.Vector2(event.clientX, event.clientY);
  48. p = viewport.inverseMatrix.transformPoint(p);
  49. box.position.copy(p);
  50. }
  51. Escher.Helpers.boxResizeTool(box);
  52. };
  53. // Create the diagram
  54. var group = new Escher.Object2D();
  55. // Image
  56. var background = new Escher.Image("images/hexagon.jpg");
  57. background.position.set(-300, -400);
  58. background.layer = -20;
  59. group.add(background);
  60. // Black layer
  61. var blackLayer = new Escher.Object2D();
  62. blackLayer.ignoreViewport = true;
  63. blackLayer.layer = 10;
  64. blackLayer.draw = function(context, viewport, canvas)
  65. {
  66. context.fillStyle = "rgba(0.0, 0.0, 0.0, 0.3)";
  67. context.fillRect(0, 0, canvas.width, canvas.height);
  68. };
  69. blackLayer.isInside = function(point)
  70. {
  71. return false;
  72. };
  73. group.add(blackLayer);
  74. canvas.ondblclick();
  75. var viewport = new Escher.Viewport(canvas);
  76. var renderer = new Escher.Renderer(canvas);
  77. renderer.createRenderLoop(group, viewport);
  78. </script>
  79. </body>
  80. </html>