Successfully reported this slideshow.

Interactive web with Fabric.js @ meet.js

8

Share

1 of 31
1 of 31

Interactive web with Fabric.js @ meet.js

8

Share

Download to read offline

Transcript

  1. 1. Interactive Web With Fabric.js by @kangax Saturday, October 19, 13
  2. 2. Saturday, October 19, 13
  3. 3. Duck swim() quack() WildDuck swim() quack() fly() ScroogeMcDuck swim() quack() moneyDive() RubberDuck swim() quack() toy: true Saturday, October 19, 13
  4. 4. printio.ru Saturday, October 19, 13
  5. 5. HTML5 Canvas interface CanvasPathMethods { ... void closePath(...); void moveTo(...); void lineTo(...); void quadraticCurveTo(...); void bezierCurveTo(...); void arcTo(...); void rect(...); void arc(...); void ellipse(...); ... }; Saturday, October 19, 13
  6. 6. Fabric.js HTML5 Canvas Library Interactive object model on top of <canvas> element Saturday, October 19, 13
  7. 7. Fabric vs canvas var canvasEl = document.getElementById(‘c’); var ctx = canvasEl.getContext(‘2d’); ctx.fillStyle = ‘red’; ctx.fillRect(10, 10, 100, 100); var canvas = new fabric.Canvas(‘c’); var rect = new fabric.Rect({ left: 10, top: 10, fill: ‘red’, width: 100, height: 100 }); canvas.add(rect); Saturday, October 19, 13
  8. 8. Fabric vs canvas var canvasEl = document.getElementById(‘c’); var ctx = canvasEl.getContext(‘2d’); ctx.fillStyle = ‘red’; ctx.save(); ctx.translate(10, 10); ctx.rotate(Math.PI / 180 * 45); ctx.fillRect(-10, -10, 100, 100); ctx.restore(); var canvas = new fabric.Canvas(‘c’); var rect = new fabric.Rect({ left: 10, top: 10, fill: ‘red’, width: 100, height: 100, angle: 45 }); canvas.add(rect); Saturday, October 19, 13
  9. 9. Fabric vs canvas ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); ctx.fillRect(20, 50, 20, 20); rect.set({ left: 20, top: 50 }); canvas.renderAll(); Saturday, October 19, 13
  10. 10. Fabric vs canvas ctx.beginPath(); ctx.moveTo(20, 10); ctx.lineTo(80, 10); ctx.quadraticCurveTo(90, ctx.lineTo(90, 80); ctx.quadraticCurveTo(90, ctx.lineTo(20, 90); ctx.quadraticCurveTo(10, ctx.lineTo(10, 20); ctx.quadraticCurveTo(10, ctx.fill(); 10, 90, 20); 90, 80, 90); 90, 10, 80); 10, 20, 10); var rect = new fabric.Rect({ left: 10, top: 10, width: 80, height: 80, rx: 10, ry: 10 }); Saturday, October 19, 13
  11. 11. fabric.Image OOP fabric.Text fabric.PathGroup Saturday, October 19, 13
  12. 12. fabric.Image render() OOP fabric.Text render() fabric.PathGroup render() Saturday, October 19, 13
  13. 13. fabric.Image render() toSVG() toJSON() OOP fabric.Text render() toSVG() toJSON() fabric.PathGroup render() toSVG() toJSON() Saturday, October 19, 13
  14. 14. OOP fabric.Canvas fabric.Object has fabric.Line fabric.Circle fabric.Triangle fabric.Ellipse fabric.Rect fabric.Polyline fabric.Polygon fabric.Group fabric.Text fabric.Image fabric.Path is has mixin is Saturday, October 19, 13 fabric.PathGroup fabric.Color fabric.Gradient fabric.Pattern fabric.Shadow fabric.Observable fabric.Collection
  15. 15. Features Demo Saturday, October 19, 13
  16. 16. Goals Simple, Intuitive fabric.Image.fromURL('...', function(img) { img.scale(0.5).set({ left: 250, top: 250, angle: -15, clipTo: function (ctx) { ... } }); canvas.add(img).setActiveObject(img); }); Saturday, October 19, 13
  17. 17. Goals Simple, Intuitive Modular ~50 small classes/modules Custom build: 77-204KB Flexible architecture: image filters, brushes Saturday, October 19, 13
  18. 18. Goals Simple, Intuitive Modular Encapsulated Plays well with other libraries Everything is under 1 object — fabric No non-standard host object additions Saturday, October 19, 13
  19. 19. Goals Simple, Intuitive Modular Encapsulated Tests, tests, tests Saturday, October 19, 13 fabricjs.com/test 2000+
  20. 20. Goals Simple, Intuitive Modular Encapsulated Tests, tests, tests Cross-browser Saturday, October 19, 13 Native Firefox 2+ Safari 3+ Opera 9.64+ Chrome (all) IE9, IE10, IE11 Excanvas IE6,7,8
  21. 21. Goals Simple, Intuitive Fabric.js Node.js Modular node-canvas Encapsulated cairo Tests, tests, tests Cross-browser Server-side rendering Saturday, October 19, 13
  22. 22. Key features Built-in Interaction SVG parsing Free Drawing Image Filters Animation Events Saturday, October 19, 13
  23. 23. On a Roadmap Curved text Multiple layers for performance Saturday, October 19, 13 Interactive Text Canvas zooming WebGL renderer
  24. 24. Other libraries Saturday, October 19, 13
  25. 25. Other libraries SVG parsing but no object model Closest functionality Sophisticated curves handling Not JS Recent additions Mostly unpopular or inactive Saturday, October 19, 13
  26. 26. Built with Fabric Infographics designer Saturday, October 19, 13 Soccer formation board
  27. 27. Built with Fabric Tutoring Whiteboard Saturday, October 19, 13 Arcade Volleyball
  28. 28. Open Source Power 50+ contributors on Github 900+ tickets on Github (800+ closed) 1500+ commits (only 999 commits by me) 2300+ stars on Github 1200+ threads on GoogleGroup 400+ fabric questions on StackOverflow Saturday, October 19, 13
  29. 29. Help welcome Translating tutorials New demos Fixing bugs fabricjs.com design Finding SVG failures Improvings docs Spreading the love Saturday, October 19, 13
  30. 30. Keep in touch fabricjs.com github.com/kangax/fabric.js twitter.com/fabricjs Saturday, October 19, 13
  31. 31. Thanks! Questions? @kangax Saturday, October 19, 13

Transcript

  1. 1. Interactive Web With Fabric.js by @kangax Saturday, October 19, 13
  2. 2. Saturday, October 19, 13
  3. 3. Duck swim() quack() WildDuck swim() quack() fly() ScroogeMcDuck swim() quack() moneyDive() RubberDuck swim() quack() toy: true Saturday, October 19, 13
  4. 4. printio.ru Saturday, October 19, 13
  5. 5. HTML5 Canvas interface CanvasPathMethods { ... void closePath(...); void moveTo(...); void lineTo(...); void quadraticCurveTo(...); void bezierCurveTo(...); void arcTo(...); void rect(...); void arc(...); void ellipse(...); ... }; Saturday, October 19, 13
  6. 6. Fabric.js HTML5 Canvas Library Interactive object model on top of <canvas> element Saturday, October 19, 13
  7. 7. Fabric vs canvas var canvasEl = document.getElementById(‘c’); var ctx = canvasEl.getContext(‘2d’); ctx.fillStyle = ‘red’; ctx.fillRect(10, 10, 100, 100); var canvas = new fabric.Canvas(‘c’); var rect = new fabric.Rect({ left: 10, top: 10, fill: ‘red’, width: 100, height: 100 }); canvas.add(rect); Saturday, October 19, 13
  8. 8. Fabric vs canvas var canvasEl = document.getElementById(‘c’); var ctx = canvasEl.getContext(‘2d’); ctx.fillStyle = ‘red’; ctx.save(); ctx.translate(10, 10); ctx.rotate(Math.PI / 180 * 45); ctx.fillRect(-10, -10, 100, 100); ctx.restore(); var canvas = new fabric.Canvas(‘c’); var rect = new fabric.Rect({ left: 10, top: 10, fill: ‘red’, width: 100, height: 100, angle: 45 }); canvas.add(rect); Saturday, October 19, 13
  9. 9. Fabric vs canvas ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); ctx.fillRect(20, 50, 20, 20); rect.set({ left: 20, top: 50 }); canvas.renderAll(); Saturday, October 19, 13
  10. 10. Fabric vs canvas ctx.beginPath(); ctx.moveTo(20, 10); ctx.lineTo(80, 10); ctx.quadraticCurveTo(90, ctx.lineTo(90, 80); ctx.quadraticCurveTo(90, ctx.lineTo(20, 90); ctx.quadraticCurveTo(10, ctx.lineTo(10, 20); ctx.quadraticCurveTo(10, ctx.fill(); 10, 90, 20); 90, 80, 90); 90, 10, 80); 10, 20, 10); var rect = new fabric.Rect({ left: 10, top: 10, width: 80, height: 80, rx: 10, ry: 10 }); Saturday, October 19, 13
  11. 11. fabric.Image OOP fabric.Text fabric.PathGroup Saturday, October 19, 13
  12. 12. fabric.Image render() OOP fabric.Text render() fabric.PathGroup render() Saturday, October 19, 13
  13. 13. fabric.Image render() toSVG() toJSON() OOP fabric.Text render() toSVG() toJSON() fabric.PathGroup render() toSVG() toJSON() Saturday, October 19, 13
  14. 14. OOP fabric.Canvas fabric.Object has fabric.Line fabric.Circle fabric.Triangle fabric.Ellipse fabric.Rect fabric.Polyline fabric.Polygon fabric.Group fabric.Text fabric.Image fabric.Path is has mixin is Saturday, October 19, 13 fabric.PathGroup fabric.Color fabric.Gradient fabric.Pattern fabric.Shadow fabric.Observable fabric.Collection
  15. 15. Features Demo Saturday, October 19, 13
  16. 16. Goals Simple, Intuitive fabric.Image.fromURL('...', function(img) { img.scale(0.5).set({ left: 250, top: 250, angle: -15, clipTo: function (ctx) { ... } }); canvas.add(img).setActiveObject(img); }); Saturday, October 19, 13
  17. 17. Goals Simple, Intuitive Modular ~50 small classes/modules Custom build: 77-204KB Flexible architecture: image filters, brushes Saturday, October 19, 13
  18. 18. Goals Simple, Intuitive Modular Encapsulated Plays well with other libraries Everything is under 1 object — fabric No non-standard host object additions Saturday, October 19, 13
  19. 19. Goals Simple, Intuitive Modular Encapsulated Tests, tests, tests Saturday, October 19, 13 fabricjs.com/test 2000+
  20. 20. Goals Simple, Intuitive Modular Encapsulated Tests, tests, tests Cross-browser Saturday, October 19, 13 Native Firefox 2+ Safari 3+ Opera 9.64+ Chrome (all) IE9, IE10, IE11 Excanvas IE6,7,8
  21. 21. Goals Simple, Intuitive Fabric.js Node.js Modular node-canvas Encapsulated cairo Tests, tests, tests Cross-browser Server-side rendering Saturday, October 19, 13
  22. 22. Key features Built-in Interaction SVG parsing Free Drawing Image Filters Animation Events Saturday, October 19, 13
  23. 23. On a Roadmap Curved text Multiple layers for performance Saturday, October 19, 13 Interactive Text Canvas zooming WebGL renderer
  24. 24. Other libraries Saturday, October 19, 13
  25. 25. Other libraries SVG parsing but no object model Closest functionality Sophisticated curves handling Not JS Recent additions Mostly unpopular or inactive Saturday, October 19, 13
  26. 26. Built with Fabric Infographics designer Saturday, October 19, 13 Soccer formation board
  27. 27. Built with Fabric Tutoring Whiteboard Saturday, October 19, 13 Arcade Volleyball
  28. 28. Open Source Power 50+ contributors on Github 900+ tickets on Github (800+ closed) 1500+ commits (only 999 commits by me) 2300+ stars on Github 1200+ threads on GoogleGroup 400+ fabric questions on StackOverflow Saturday, October 19, 13
  29. 29. Help welcome Translating tutorials New demos Fixing bugs fabricjs.com design Finding SVG failures Improvings docs Spreading the love Saturday, October 19, 13
  30. 30. Keep in touch fabricjs.com github.com/kangax/fabric.js twitter.com/fabricjs Saturday, October 19, 13
  31. 31. Thanks! Questions? @kangax Saturday, October 19, 13

More Related Content

Related Audiobooks

Free with a 30 day trial from Scribd

See all

×