SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
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.
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.
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.
Features — Text
Multiline support
text aligning coming soon
24.
Features — Text
Multiline support
Relies on Cufon.js
http://kangax.github.com/jstests/canvas_fillText_test
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.
Features — SVG Parser
Q: How to render SVG shapes on canvas?
A: Transform them to fabric objects.
30.
Canvas libraries
canvg
The only other library with (good) SVG parser
But no object model
31.
Canvas libraries
burst
Lots of features but completely abandoned
32.
Canvas libraries
Unit Tests
Hard to come across a library that has them
33.
Canvas libraries
easel.js
Probably the most active, similar, and
promising alternative.
But no unit tests or SVG parser :(
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)