Created
September 6, 2016 12:17
-
-
Save jossef/83125afab5801756bde1d806b5fda9f1 to your computer and use it in GitHub Desktop.
fabric-js draw layers like photoshop
This file contains hidden or 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> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.4/fabric.min.js"></script> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/q.js/1.4.1/q.min.js"></script> | |
| <style> | |
| html, body { | |
| margin: 0; | |
| padding: 0; | |
| background: #fff; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <canvas id="a4_canvas" width="2480" height="3508"></canvas> | |
| <script> | |
| var redLineColor = "#F05323"; | |
| //redLineColor = "#Ff0000"; | |
| document.addEventListener('DOMContentLoaded', function () { | |
| var canvas = new fabric.StaticCanvas('a4_canvas', { | |
| stateful: false | |
| }); | |
| var alignment = 308; | |
| var layers = [ | |
| background(0, 0, "images/background.png"), | |
| image(alignment, 810, "images/breach.png"), | |
| rect(alignment, 900, 8, 200, redLineColor) | |
| ]; | |
| Q.all(layers) | |
| .then(function (objects) { | |
| objects.forEach(function (object) { | |
| canvas.add(object); | |
| }) | |
| }); | |
| }, false); | |
| function background(x, y, url) { | |
| var def = Q.defer(); | |
| fabric.Image.fromURL(url, function (img) { | |
| img.set({ | |
| left: x, | |
| top: y, | |
| originX: "left" | |
| }); | |
| def.resolve(img); | |
| }); | |
| return def.promise; | |
| } | |
| function image(x, y, url) { | |
| var def = Q.defer(); | |
| fabric.Image.fromURL(url, function (img) { | |
| img.set({ | |
| left: x, | |
| top: y, | |
| originX: "center" | |
| }); | |
| def.resolve(img); | |
| }); | |
| return def.promise; | |
| } | |
| function rect(x, y, w, h, color) { | |
| var def = Q.defer(); | |
| var line = new fabric.Rect({ | |
| width: w, | |
| height: h, | |
| fill: color, | |
| left: x, | |
| top: y, | |
| originX: "center" | |
| }); | |
| def.resolve(line); | |
| return def.promise; | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment