Your SlideShare is downloading. ×
0
Interactive web with Fabric.js @ meet.js
Interactive web with Fabric.js @ meet.js
Interactive web with Fabric.js @ meet.js
Interactive web with Fabric.js @ meet.js
Interactive web with Fabric.js @ meet.js
Interactive web with Fabric.js @ meet.js
Interactive web with Fabric.js @ meet.js
Interactive web with Fabric.js @ meet.js
Interactive web with Fabric.js @ meet.js
Interactive web with Fabric.js @ meet.js
Interactive web with Fabric.js @ meet.js
Interactive web with Fabric.js @ meet.js
Interactive web with Fabric.js @ meet.js
Interactive web with Fabric.js @ meet.js
Interactive web with Fabric.js @ meet.js
Interactive web with Fabric.js @ meet.js
Interactive web with Fabric.js @ meet.js
Interactive web with Fabric.js @ meet.js
Interactive web with Fabric.js @ meet.js
Interactive web with Fabric.js @ meet.js
Interactive web with Fabric.js @ meet.js
Interactive web with Fabric.js @ meet.js
Interactive web with Fabric.js @ meet.js
Interactive web with Fabric.js @ meet.js
Interactive web with Fabric.js @ meet.js
Interactive web with Fabric.js @ meet.js
Interactive web with Fabric.js @ meet.js
Interactive web with Fabric.js @ meet.js
Interactive web with Fabric.js @ meet.js
Interactive web with Fabric.js @ meet.js
Interactive web with Fabric.js @ meet.js
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Interactive web with Fabric.js @ meet.js

4,426

Published on

Published in: Technology, Art & Photos
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,426
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
23
Comments
0
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Interactive Web With Fabric.js by @kangax Saturday, October 19, 13
  • 2. Saturday, October 19, 13
  • 3. Duck swim() quack() WildDuck swim() quack() fly() ScroogeMcDuck swim() quack() moneyDive() RubberDuck swim() quack() toy: true Saturday, October 19, 13
  • 4. printio.ru Saturday, October 19, 13
  • 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. Fabric.js HTML5 Canvas Library Interactive object model on top of <canvas> element Saturday, October 19, 13
  • 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. 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. 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. 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. fabric.Image OOP fabric.Text fabric.PathGroup Saturday, October 19, 13
  • 12. fabric.Image render() OOP fabric.Text render() fabric.PathGroup render() Saturday, October 19, 13
  • 13. fabric.Image render() toSVG() toJSON() OOP fabric.Text render() toSVG() toJSON() fabric.PathGroup render() toSVG() toJSON() Saturday, October 19, 13
  • 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. Features Demo Saturday, October 19, 13
  • 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. Goals Simple, Intuitive Modular ~50 small classes/modules Custom build: 77-204KB Flexible architecture: image filters, brushes Saturday, October 19, 13
  • 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. Goals Simple, Intuitive Modular Encapsulated Tests, tests, tests Saturday, October 19, 13 fabricjs.com/test 2000+
  • 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. 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. Key features Built-in Interaction SVG parsing Free Drawing Image Filters Animation Events Saturday, October 19, 13
  • 23. On a Roadmap Curved text Multiple layers for performance Saturday, October 19, 13 Interactive Text Canvas zooming WebGL renderer
  • 24. Other libraries Saturday, October 19, 13
  • 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. Built with Fabric Infographics designer Saturday, October 19, 13 Soccer formation board
  • 27. Built with Fabric Tutoring Whiteboard Saturday, October 19, 13 Arcade Volleyball
  • 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. Help welcome Translating tutorials New demos Fixing bugs fabricjs.com design Finding SVG failures Improvings docs Spreading the love Saturday, October 19, 13
  • 30. Keep in touch fabricjs.com github.com/kangax/fabric.js twitter.com/fabricjs Saturday, October 19, 13
  • 31. Thanks! Questions? @kangax Saturday, October 19, 13

×