interactive web with fabric.js @ meet.js
DESCRIPTION
TRANSCRIPT
Fabric.jsInteractive Web With
by @kangax
Saturday, October 19, 13
Saturday, October 19, 13
WildDuck
swim() quack() fly()
RubberDuck
swim() quack() toy: true
Duck
swim() quack()
ScroogeMcDuck
swim() quack() moneyDive()
Saturday, October 19, 13
printio.ru
Saturday, October 19, 13
HTML5 Canvasinterface CanvasPathMethods { ... void closePath(...); void moveTo(...); void lineTo(...); void quadraticCurveTo(...); void bezierCurveTo(...); void arcTo(...); void rect(...); void arc(...); void ellipse(...); ... };
Saturday, October 19, 13
Fabric.jsHTML5 Canvas Library
Interactive object modelon top of <canvas> element
Saturday, October 19, 13
Fabric vs canvasvar 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
Fabric vs canvasvar 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
Fabric vs canvasctx.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
Fabric vs canvasctx.beginPath();ctx.moveTo(20, 10);ctx.lineTo(80, 10);ctx.quadraticCurveTo(90, 10, 90, 20);ctx.lineTo(90, 80);ctx.quadraticCurveTo(90, 90, 80, 90);ctx.lineTo(20, 90);ctx.quadraticCurveTo(10, 90, 10, 80);ctx.lineTo(10, 20);ctx.quadraticCurveTo(10, 10, 20, 10);ctx.fill();
var rect = new fabric.Rect({ left: 10, top: 10, width: 80, height: 80, rx: 10, ry: 10});
Saturday, October 19, 13
OOP fabric.Textfabric.Image
fabric.PathGroup
Saturday, October 19, 13
OOP fabric.Textfabric.Image
fabric.PathGroup
render()render()
render()
Saturday, October 19, 13
OOP fabric.Textfabric.Image
fabric.PathGroup
render()toSVG()toJSON()
render()toSVG()toJSON()
render()toSVG()toJSON()
Saturday, October 19, 13
OOPfabric.Object
fabric.Linefabric.Circlefabric.Trianglefabric.Ellipsefabric.Rectfabric.Polylinefabric.Polygonfabric.Groupfabric.Textfabric.Imagefabric.Path
fabric.Canvas
has
is
fabric.PathGroup
fabric.Colorfabric.Gradientfabric.Patternfabric.Shadow
has
fabric.Observablefabric.Collectionmixin
is
Saturday, October 19, 13
Features Demo
Saturday, October 19, 13
GoalsSimple, 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
GoalsSimple, IntuitiveModular
~50 small classes/modules
Custom build: 77-204KB
Flexible architecture: image filters, brushes
Saturday, October 19, 13
GoalsSimple, IntuitiveModularEncapsulated
Everything is under 1 object — fabric
Plays well with other libraries
No non-standard host object additions
Saturday, October 19, 13
GoalsSimple, IntuitiveModularEncapsulatedTests, tests, tests
fabricjs.com/test
2000+
Saturday, October 19, 13
GoalsSimple, IntuitiveModularEncapsulatedTests, tests, testsCross-browser
Firefox 2+Safari 3+Opera 9.64+Chrome (all)IE9, IE10, IE11
Native
Excanvas
IE6,7,8
Saturday, October 19, 13
GoalsSimple, IntuitiveModularEncapsulatedTests, tests, testsCross-browser
Fabric.js
Server-side rendering
Node.js
node-canvas
cairo
Saturday, October 19, 13
Key featuresBuilt-in Interaction
SVG parsing
Free Drawing
Image Filters
Animation
Events
Saturday, October 19, 13
On a RoadmapInteractive Text
WebGL renderer
Multiple layers for performance
Curved text
Canvaszooming
Saturday, October 19, 13
Other libraries
Saturday, October 19, 13
Other libraries
Closest functionality
Recent additions
Mostly unpopularor inactive
SVG parsingbut no object model
Not JS
Sophisticatedcurves handling
Saturday, October 19, 13
Built with FabricSoccer formation boardInfographics designer
Saturday, October 19, 13
Built with FabricArcade VolleyballTutoring Whiteboard
Saturday, October 19, 13
Open Source Power
400+ fabric questions on StackOverflow
1200+ threads on GoogleGroup
900+ tickets on Github (800+ closed)
50+ contributors on Github
1500+ commits (only 999 commits by me)
2300+ stars on Github
Saturday, October 19, 13
Help welcome
New demos
Translating tutorials
fabricjs.com design
Fixing bugs Finding SVG failures
Improvings docs
Spreading the love
Saturday, October 19, 13
Keep in touch
fabricjs.com
github.com/kangax/fabric.js
twitter.com/fabricjs
Saturday, October 19, 13
Thanks!
@kangax
Questions?
Saturday, October 19, 13