Interactive

Web With

Fabric.js
by @kangax

Saturday, October 19, 13
Saturday, October 19, 13
Duck
swim()
quack()
WildDuck
swim()
quack()
fly()

ScroogeMcDuck

swim()
quack()
moneyDive()
RubberDuck
swim()
quack()
toy...
printio.ru

Saturday, October 19, 13
HTML5 Canvas
interface CanvasPathMethods {
...
void closePath(...);
void moveTo(...);
void lineTo(...);
void quadraticCurv...
Fabric.js
HTML5 Canvas Library
Interactive object model
on top of <canvas> element

Saturday, October 19, 13
Fabric vs canvas
var canvasEl = document.getElementById(‘c’);
var ctx = canvasEl.getContext(‘2d’);
ctx.fillStyle = ‘red’;
...
Fabric vs canvas
var canvasEl = document.getElementById(‘c’);
var ctx = canvasEl.getContext(‘2d’);
ctx.fillStyle = ‘red’;
...
Fabric vs canvas
ctx.clearRect(0, 0,
ctx.canvas.width, ctx.canvas.height);
ctx.fillRect(20, 50, 20, 20);

rect.set({
left:...
Fabric vs canvas
ctx.beginPath();
ctx.moveTo(20, 10);
ctx.lineTo(80, 10);
ctx.quadraticCurveTo(90,
ctx.lineTo(90, 80);
ctx...
fabric.Image

OOP

fabric.Text

fabric.PathGroup

Saturday, October 19, 13
fabric.Image
render()

OOP

fabric.Text
render()

fabric.PathGroup
render()

Saturday, October 19, 13
fabric.Image
render()
toSVG()
toJSON()

OOP

fabric.Text
render()
toSVG()
toJSON()

fabric.PathGroup
render()
toSVG()
toJS...
OOP

fabric.Canvas

fabric.Object
has
fabric.Line
fabric.Circle
fabric.Triangle
fabric.Ellipse
fabric.Rect
fabric.Polyline...
Features Demo

Saturday, October 19, 13
Goals
Simple, Intuitive
fabric.Image.fromURL('...', function(img) {
img.scale(0.5).set({
left: 250,
top: 250,
angle: -15,
...
Goals
Simple, Intuitive
Modular
~50 small classes/modules
Custom build: 77-204KB
Flexible architecture: image filters, bru...
Goals
Simple, Intuitive
Modular
Encapsulated
Plays well with other libraries
Everything is under 1 object — fabric
No non-...
Goals
Simple, Intuitive
Modular
Encapsulated
Tests, tests, tests

Saturday, October 19, 13

fabricjs.com/test
2000+
Goals
Simple, Intuitive
Modular
Encapsulated
Tests, tests, tests
Cross-browser
Saturday, October 19, 13

Native
Firefox 2+...
Goals
Simple, Intuitive
Fabric.js
Node.js
Modular
node-canvas
Encapsulated
cairo
Tests, tests, tests
Cross-browser
Server-...
Key features
Built-in Interaction
SVG parsing
Free Drawing
Image Filters
Animation
Events

Saturday, October 19, 13
On a Roadmap
Curved text

Multiple layers
for performance
Saturday, October 19, 13

Interactive Text

Canvas
zooming
WebGL...
Other libraries

Saturday, October 19, 13
Other libraries
SVG parsing
but no object model
Closest
functionality
Sophisticated
curves handling
Not JS
Recent addition...
Built with Fabric
Infographics designer

Saturday, October 19, 13

Soccer formation board
Built with Fabric
Tutoring Whiteboard

Saturday, October 19, 13

Arcade Volleyball
Open Source Power
50+ contributors on Github
900+ tickets on Github (800+ closed)
1500+ commits (only 999 commits by me)
2...
Help welcome
Translating tutorials
New demos
Fixing bugs

fabricjs.com design
Finding SVG failures

Improvings docs
Spread...
Keep in touch
fabricjs.com

github.com/kangax/fabric.js
twitter.com/fabricjs
Saturday, October 19, 13
Thanks!
Questions?

@kangax

Saturday, October 19, 13
Upcoming SlideShare
Loading in...5
×

Interactive web with Fabric.js @ meet.js

4,823

Published on

Published in: Technology, Art & Photos

Interactive web with Fabric.js @ meet.js

  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
  1. ¿Le ha llamado la atención una diapositiva en particular?

    Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

×