fabric 学习笔记

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（轻量级）