Successfully reported this slideshow.

Fabric.js @ Falsy Values

13

Share

Upcoming SlideShare
Prototype UI Intro
Prototype UI Intro
Loading in …3
×
1 of 42
1 of 42

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Fabric.js @ Falsy Values

  1. 1. fabric.js Building a canvas library Warsaw 2011
  2. 2. who is kangax? kangax.com
  3. 3. who is kangax? perfectionkills.com ES5 compat tables fabric.js Common Feature Tests PrototypeJS HTML minifier DOMLint
  4. 4. Game Plan History Why fabric? How it works. Features. Canvas libraries Future plans
  5. 5. History printio.ru
  6. 6. History printio.ru All Javascript, no Flash Free drawing Vectors & images Performance
  7. 7. Canvas vs SVG
  8. 8. Why fabric? Canvas API sucks is too low level There was an excruciating need for interactive object model for canvas element
  9. 9. Why fabric? native var canvasEl = document.getElementById('canvas'); var ctx = canvasEl.getContext('2d'); ctx.strokeStyle = ''; ctx.fillStyle = 'red'; ctx.fillRect(100, 100, 20, 20); fabric var canvas = new fabric.Element('canvas'); var rect = new fabric.Rect({ top: 100, left: 100, fill: 'red', width: 20, height: 20 }); canvas.add(rect);
  10. 10. Why fabric? native var canvasEl = document.getElementById('canvas'); var ctx = canvasEl.getContext('2d'); ctx.strokeStyle = ''; ctx.fillStyle = 'red'; ctx.save(); ctx.translate(100, 100); ctx.rotate(Math.PI / 180 * 45); ctx.fillRect(-10, -10, 20, 20); ctx.restore(); fabric var canvas = new fabric.Element('canvas'); var rect = new fabric.Rect({ top: 100, left: 100, fill: 'red', width: 20, height: 20, angle: 45 }); canvas.add(rect);
  11. 11. Why fabric? native ctx.fillRect(20, 50, 20, 20); fabric rect.set(‘left’, 20).set(‘top’, 50); canvas.renderAll();
  12. 12. Why fabric? native ctx.fillRect(20, 50, 20, 20); ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); ctx.fillRect(20, 50, 20, 20); fabric rect.set(‘left’, 20).set(‘top’, 50); canvas.renderAll();
  13. 13. Demo http://kangax.github.com/fabric.js/test/demo
  14. 14. Under the hood Upper <canvas> Group selection Lower <canvas> All objects
  15. 15. Under the hood fabric.Circle fabric.Rect render() render() fabric.Element renderAll() fabric.Triangle render()
  16. 16. Under the hood fabric.Circle fabric.Rect render() render() fabric.Element fabric.Triangle renderAll() render()
  17. 17. Under the hood Root “class”. 2D objects Concrete “subclasses” fabric.Object fabric.Line fabric.Circle fabric.Triangle fabric.Ellipse Container fabric.Rect fabric.Element fabric.Polyline fabric.Polygon fabric.Group fabric.Color fabric.Text fabric.Point fabric.Image fabric.Intersection fabric.Path
  18. 18. Under the hood clone cloneAsImage Root “class”. 2D objects complexity Inherited by all subclasses get fabric.Object getCenter getWidth getElement getHeight intersectsWithObject isActive isType scale scaleToHeight scaleToWidth set setActive setElement straighten toDataURL toJSON toGrayscale ...
  19. 19. Features — Animation fxCenterObjectV: function (...) { fabric.util.animate ... fabric.util.animate({ startValue: object.get('top'), endValue: this.getCenter().top, duration: this.FX_DURATION, onChange: function(value) { object.set('top', value); _this.renderAll(); onChange(); fxCenterObjectV }, onComplete: function() { fxCenterObjectH object.setCoords(); onComplete(); fxStraightenObject } }); fxRemove ... } ...
  20. 20. Features — Animation Or just use new, fancy window.requestAnimationFrame (function animate() { canvas.forEachObject(function(obj) { obj.left += (obj.movingLeft ? -1 : 1); obj.top += 1; if (obj.left > 900 || obj.top > 500) { canvas.remove(obj); } else { obj.setAngle(obj.getAngle() + 2); } }); canvas.renderAll(); window.requestAnimationFrame(animate); })();
  21. 21. Features — Events object:scaled object:selected fabric.util.observeEvent('object:moved', function(e) { object:moved var activeObject = e.memo.target; console.log(activeObject.left, activeObject.top); group:modified }); group:selected before:group:destroyed after:group:destroyed mouse:up selection:cleared Will be made more consistent! path:created
  22. 22. Features — Text fontsize var myText = new fabric.Text('Hello world', { font weight fontfamily: 'delicious' fontfamily }); fontStyle canvas.add(myText); textDecoration textShadow lineHeight backgroundColor strokeStyle Will be made more consistent! strokeWidth
  23. 23. Features — Text Multiline support text aligning coming soon
  24. 24. Features — Text Multiline support Relies on Cufon.js http://kangax.github.com/jstests/canvas_fillText_test
  25. 25. Features — Text Multiline support Relies on Cufon.js Renders using any OTF, TTF, etc. font Each font is a JS file with glyph definitions
  26. 26. Features — SVG Parser Q: How to render SVG shapes on canvas? A: Transform them to fabric objects.
  27. 27. Features — SVG Parser <path d="M-122.304 84.285C-122.304 { 84.285 -122.203 86.179 -123.027 Step 1 path: [ 86.16C-123.851 86.141 -140.305 [ "M", -122.304, 84.285 ], 38.066 -160.833 40.309C-160.833 [ "C", -122.304, 84.285, 40.309 -143.05 32.956 -122.304 -122.203, 86.179, 84.285z" /> -123.027, 86.16 ], [ "C", -123.851, ... ], [ ... ], ... ] }
  28. 28. Features — SVG Parser { case 'C': // bezierCurveTo, absolute path: [ x = current[5]; [ "M", -122.304, 84.285 ], y = current[6]; [ "C", -122.304, 84.285, Step 2 controlX = current[3]; -122.203, 86.179, controlY = current[4]; ctx.bezierCurveTo( -123.027, 86.16 ], current[1] + l, [ "C", -123.851, ... ], current[2] + t, [ ... ], controlX + l, ... controlY + t, ] x + l, } y + t ); break;
  29. 29. Canvas libraries http://goo.gl/CCRRT
  30. 30. Canvas libraries canvg The only other library with (good) SVG parser But no object model
  31. 31. Canvas libraries burst Lots of features but completely abandoned
  32. 32. Canvas libraries Unit Tests Hard to come across a library that has them
  33. 33. Canvas libraries easel.js Probably the most active, similar, and promising alternative. But no unit tests or SVG parser :(
  34. 34. Fabric use cases mouse-based interactions built in Collages might be overkill for static charts Basic games Charts Basic drawing (paintbrush, diagrams) Display SVG where unsupported (Android)
  35. 35. What can you build? mustachified.com
  36. 36. Future plans Smaller footprint Better docs, tutorials Custom builder fabric-to-SVG Touch compatible (iOS)
  37. 37. Smaller footprint Fabric 0.2.5 jQuery 1.6.1 102 KB — minified 91 KB — minified 33 KB — minified + compressed 32 KB — minified + compressed Can do even better – optional json2.js, cufon.js + custom builder
  38. 38. Smaller footprint with Cufon without cufon.js 102 KB — minified 86 KB — minified 33 KB — minified + compressed 29 KB — minified + compressed without json2.js JSON missing in FF 3, SF 3.2, OP 10.1, IE 7 82 KB — minified 25 KB — minified + compressed
  39. 39. Docs, Tests 1000+ tests ATM http://kangax.github.com/fabric.js/docs http://kangax.github.com/fabric.js/test/unit/suite_runner
  40. 40. Demos, Benchmarks http://kangax.github.com/fabric.js/test/ raphael_vs_fabric/complex_shape http://kangax.github.com/fabric.js/demos
  41. 41. Supported browsers Firefox 2+ Safari 3+ (& Mobile Safari) Opera 9.64+ Chrome (all versions should work) IE9+ (IE7 & 8 via excanvas.js)
  42. 42. Thank you! Questions? http://spkr8.com/t/7582 github.com/kangax/fabric.js @fabric.js @kangax

×