1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192 |
- <!DOCTYPE html>
- <html>
- <head>
- <title>Mask</title>
- <meta charset="utf-8">
- </head>
- <body>
- <script type="text/javascript" src="../build/escher.js"></script>
- <script type="text/javascript">
- var division = document.createElement("div");
- division.style.position = "absolute";
- division.style.width = "100%";
- division.style.height = "100%";
- division.style.top = "0px";
- division.style.left = "0px";
- division.style.overflow = "hidden";
- document.body.appendChild(division);
- // Setup the display canvas
- var canvas = document.createElement("canvas");
- canvas.style.position = "absolute";
- canvas.style.width = "100%";
- canvas.style.height = "100%";
- canvas.style.top = "0px";
- canvas.style.left = "0px";
- canvas.width = window.innerWidth;
- canvas.height = window.innerHeight;
- canvas.oncontextmenu = function(event)
- {
- event.preventDefault();
- return false;
- };
- division.appendChild(canvas);
- window.onresize = function()
- {
- canvas.width = window.innerWidth;
- canvas.height = window.innerHeight;
- };
- canvas.ondblclick = function(event)
- {
- var box = new Escher.BoxMask();
- box.invert = true;
- box.draggable = true;
- blackLayer.masks.push(box);
- group.add(box);
- if(event !== undefined)
- {
- var p = new Escher.Vector2(event.clientX, event.clientY);
- p = viewport.inverseMatrix.transformPoint(p);
- box.position.copy(p);
- }
- Escher.Helpers.boxResizeTool(box);
- };
- // Create the diagram
- var group = new Escher.Object2D();
- // Image
- var background = new Escher.Image("images/hexagon.jpg");
- background.position.set(-300, -400);
- background.layer = -20;
- group.add(background);
- // Black layer
- var blackLayer = new Escher.Object2D();
- blackLayer.ignoreViewport = true;
- blackLayer.layer = 10;
- blackLayer.draw = function(context, viewport, canvas)
- {
- context.fillStyle = "rgba(0.0, 0.0, 0.0, 0.3)";
- context.fillRect(0, 0, canvas.width, canvas.height);
- };
- blackLayer.isInside = function(point)
- {
- return false;
- };
- group.add(blackLayer);
- canvas.ondblclick();
- var viewport = new Escher.Viewport(canvas);
- var renderer = new Escher.Renderer(canvas);
- renderer.createRenderLoop(group, viewport);
- </script>
- </body>
- </html>
|