Created
January 17, 2017 20:29
-
-
Save lakenen/61628faa0b88bae7c82fc6a190aa308a to your computer and use it in GitHub Desktop.
Teledraw Canvas example with synced layers
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>Teledraw Canvas Example</title> | |
| <style type="text/css"> | |
| html, body { | |
| background: #888; | |
| } | |
| .container { | |
| position: relative; | |
| width: 512px; | |
| height: 512px; | |
| } | |
| canvas { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| } | |
| #background-canvas { | |
| background: #fff; | |
| } | |
| </style> | |
| <script type="text/javascript" src="../node_modules/jquery/dist/jquery.js"></script> | |
| <script type="text/javascript" src="jquery.mousewheel.js"></script> | |
| <script type="text/javascript" src="../build/teledraw-canvas.js"></script> | |
| <script type="text/javascript"> | |
| var imgURL = 'https://camo.githubusercontent.com/c89f9327bba08e6a16db96876ed8333d6612bac7/68747470733a2f2f646c2e64726f70626f7875736572636f6e74656e742e636f6d2f752f3133393939323935322f737461636b6f766572666c6f772f4b6f6f6c4169644d616e2e706e67'; | |
| var background, foreground; | |
| $(function () { | |
| background = TeledrawCanvas('background-canvas'); | |
| background.fromImageURL(imgURL); | |
| foreground = TeledrawCanvas('foreground-canvas'); | |
| foreground.on('zoom pan', updateBackground); | |
| foreground.zoom(0); | |
| function updateBackground() { | |
| var off = this.state.currentOffset, | |
| zoom = this.state.currentZoom; | |
| background.pan(off.x * zoom, off.y * zoom, true); | |
| background.zoom(zoom); | |
| } | |
| $('#test-canvas').bind('mousewheel', function (e, d, dx, dy) { | |
| foreground.pan(-dx*10, dy*10); | |
| e.preventDefault(); | |
| }); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <h1>Layered Teledraw Canvas</h1> | |
| <div class="container"> | |
| <canvas id="background-canvas" width="512" height="512"></canvas> | |
| <canvas id="foreground-canvas" width="512" height="512"></canvas> | |
| </div> | |
| <br/> | |
| <button onclick="foreground.setTool('pencil')">pencil</button> | |
| <button onclick="foreground.setTool('eraser')">eraser</button> | |
| <button onclick="foreground.setTool('grab')">pan</button> | |
| <button onclick="foreground.zoom(foreground.state.currentZoom*2)">zoom (+)</button> | |
| <button onclick="foreground.zoom(foreground.state.currentZoom/2)">zoom (-)</button> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi Sir, you are really champ.. This is what I was expecting.. You have saved my life.. Thanks a lot..