Fabric 的学习
定义
Fabric provides a missing object model forcanvas, as well as an SVG parser, layer of interactivity, and a whole suite ofother indispensable tools.
作用
在canvas的底层基础上提供了 object model
提供 canvas的 rendering和state管理
对象
基本类型:
fabric.Circle
fabric.Ellipse
fabric.Line
fabric.Polygon
fabric.Polyline
fabric.Rect
fabric.Triangle
操作对象:
属性 get('width')和 set({ }): positioning — left, top; dimension — width, height; rendering — fill, opacity, stroke,strokeWidth; scaling and rotation — scaleX, scaleY, angle; and even those related to flipping — flipX, flipY.
状态变化时的动作:通过event来实现
动画
层次关系:
fabric.Object: 代表二维形状,具有属性 left/top and width/height properties, as well as a slew of other graphiccharacteristics. Those properties that we saw on objects — fill, stroke, angle, opacity, flip*, etc。 可以在fabric.Object.prototype 定义函数,在fabric.Object的子类上共享
fabric.Circle 有 radius属性
fabric.Image 有 setElement和getElement
Canvas
是<canvas>的包装类,管理所有的fabric.Object
有方法: add getObjects item remove.
配置:背景色或背景图片,剪切,是否交互等。
Interactive:
支持:
选择、拖动、旋转、放大、group together的操作
步骤:
初始化 canvas,加载 object model
使用 selection 和selectable属性 canvas.selection = false;// disable group selection rect.set('selectable', false); // makeobject unselectable
创建一不含交互的canvas(轻量级)