fabric.js之强大的SVG处理工具类库

导语   什么是Fabric js  使用 Fabric js 你可以创建和填充画布上的对象,从简单的几何图形到成百上千路径组成的复杂图形。你可以通过鼠标轻松的移动、缩放和旋转这些对象,修改它们的属性(颜色、透明度,层叠顺

  什么是Fabric.js

  使用 Fabric.js 你可以创建和填充画布上的对象,从简单的几何图形到成百上千路径组成的复杂图形。你可以通过鼠标轻松的移动、缩放和旋转这些对象,修改它们的属性(颜色、透明度,层叠顺序)等等。

  

前端SVG

 

  SVG系列教程

  总体上,fabric.js提供了2个大功能:

  在canvas的底层基础上提供了 object model

  提供 canvas的 rendering和state管理

  对象

  基本类型

  1. fabric.Circle 
  2.  
  3. fabric.Ellipse 
  4.  
  5. fabric.Line 
  6.  
  7. fabric.Polygon 
  8.  
  9. fabric.Polyline 
  10.  
  11. fabric.Rect 
  12.  
  13. fabric.Triangle 

  操作对象

  属性 get(‘width’)和 set({ }): 

  1. positioning — left, top; 
  2. dimension — width, height; 
  3. rendering — fill, opacity, stroke,strokeWidth; 
  4. scaling and rotation — scaleX, scaleY, angle; 
  5. 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的操作

  步骤:

  1.初始化 canvas,加载 object model

  2.使用 selection 和selectable属性

  1. canvas.selection = false;// disable group selection 
  2. rect.set('selectable'false); // makeobject unselectable 

  3.创建一不含交互的canvas(轻量级) 

  1. var staticCanvas = newfabric.StaticCanvas('c'); 
  2.   staticCanvas.add(。。。) 

  Images

  有img的html标签时:使用 fabric.Image,有 url 时: fabric.Image.fromUrl, 回调函数中的参数就是fabric.Image。

  Path和PathGroup可以制作任意向量图。

  path 包括一系列的命令,如 “move”, “line”, “curve”, or “arc”, 类似于 svg 的 ,可使用 fabric.Path手动创建,步骤:

  1. varpath=new fabric.Path 
  2.  
  3. path.set 

  也可使用 fabric内置的 SVG Parser创建(真创建复杂图形,这种方法比较多),步骤:

  1.使用 fabric.loadSVGFromString loadSVGFromURL加载整个SVG

  2.使用 SVG Parser得到 path对象

  3.PathGroup是Path的集合,集成于fabric.Object,所以可以add到cavas中

  Animation

  使用 animate 函数,包括三个参数:属性、值(支持目标值,如300, 相对值,如’+=100’)、回调函数(支持 duration, from,onComplete, easing change等,一般监听change事件。 )

  onChange: canvas.renderAll.bind(canvas) 在每帧变化时重新渲染,可看到动画效果

  easing 代表变化函数,可取的值是fabric.util.ease包下,有easeOutBounce easeInCubic easeOutCubiceaseInElastic easeOutElastic easeInBounce 和easeOutExpo

  Filter

  图片滤镜效果,预支持的有 remove whitebackground grayscale filter invert or brigtness one , gradienttransparentcy, sepia, noise

  使用fabric.Image.filters.push ,再调用 img.applyFilters(canvas.renderAll.bind(canvas));

  支持的 remove filter (via pop, splice, or shift), add filter (via push, splice, unshift), or even combine multiple filters.

  可自定义filter: 略,参考filter中相应章节

  Color:

  支持多种color的定义,如rgb rgba hex等

  newfabric.Color(‘#123123’);

  newfabric.Color(‘rgb(100,0,100)’);

  Gradients

  使用Object 中的setGradientFil函数,如
 

  1. circle.setGradientFill({ 
  2.  
  3.   x1:0, 
  4.  
  5.   y1:0, 
  6.  
  7.   x2:0, 
  8.  
  9.   y2:circle.height, 
  10.  
  11.  colorStops: { 
  12.  
  13.     0:'#000'
  14.  
  15.     1:'#fff' 
  16.  
  17.   } 
  18.  
  19. }); 

  其中 x1,y1定义开始点,x2,y2定义结束点,colorStops 可以有多个,从 0 to 1 (e.g. 0, 0.1, 0.3,0.5, 0.75, 1),如彩虹七色

  Text(艺术字)

  扩展:

  1. Multiline support. Native text methods unfortunately simply ignore new lines. 
  2. Text alignment. Left, center, right. Useful when working with multiline text. 
  3. Text background. Background also respects text alignment. 
  4. Text decoration. Underline, overline, strike-through. 
  5. Line height. Useful when working with multiline text 
  6.   如:var text = newfabric.Text('hello world', { left: 100, top: 100 }); 

  其中第二个参数可选,可以为left, top, fill, opacity,fontFamily ,fontSize fontWeight textShadow, fontStyle strokeStyle strokeWidth textBackgroundColor lineHeight textAlign.

  Events

  提供从低端的mouse到高端的object 事件,如:

 

  1. mouse-level: 
  2.  
  3.           "mouse:down","mouse:move", and "mouse:up"
  4.  
  5.  genericones: 
  6.  
  7.           "after:render"
  8.  
  9.   selection-related: 
  10.  
  11.              "before:selection:cleared","selection:created""selection:cleared"
  12.  
  13.   object ones: 
  14.  
  15.              "object:modified","object:selected""object:moving""object:scaling","object:rotating", and "object:added".. 

  使用 on 监听事件,off 移除监听器

Note that eventslike "object:moving" (or "object:scaling") are fired continuouslyevery time an object is moved (or scaled) even by one pixel. On the other hand,events like "object:modified" or "selection:created" arefired only at the end of the action (object modification or selectioncreation).
 

 

也可以直接给 model object 添加事件  canvas.on('mouse:down', function(options){console.log(options.e.clientX, options.e.clientY); });    其中options有两个属性,一个e 代表事件,target 代表事件发出的对象

 Groups

  对多个物体统一移动和修改(scale rotate等)

  1.     //创建一个 labeledeclipse 
  2.  
  3. var group = new fabric.Group([ text,circle ], { 
  4.  
  5.   left:150, 
  6.  
  7.   top:100, 
  8.  
  9.  angle: -10 
  10.  
  11. }); 
  12.  
  13. canvas.add(group); 
  14.  
  15. //修改group中的个体 
  16.  
  17. group.item(0).set({ 
  18.  
  19.   text:'trololo', 
  20.  
  21.   fill:'white' 
  22.  
  23. }); 
  24.  
  25. group.item(1).setFill('red'); 

  group中item默认布局在group中央,通过给每个item设置left和top属性可修改

  其他函数: getObjects() 获得group中所有对象, item 取得单个对象 等

  创建已经在 canvas中加载的对象的group

  1. var group = new fabric.Group([ 
  2.  
  3.     canvas.item(0).clone(), 
  4.  
  5.  canvas.item(1).clone() 
  6.  
  7. ]); 
  8.  
  9. // remove all objects and re-render 
  10.  
  11. canvas.clear().renderAll(); 
  12. // add group onto canvas 
  13.  
  14. canvas.add(group); 

  Serialization

  用于传递数据到其他客户端和服务器。以text方式

  1. toObject,toJSON 

  其中 toObject 转化为object格式,toJSON转换为json 字符串

  实例:

  1. //将对象转为字符串 
  2.  
  3. var canvas = new fabric.Canvas('c'); 
  4.  
  5. JSON.stringify(canvas); // '{"objects":[],"background":"rgba(0,0, 0, 0)"}' 

  对于自定义类,只要定义 toObject函数,当使用 canvas.toObject()时就可以递归调用,类似于java的toString。

  1. toSVG 

  SVG是canvas的另一种文本格式,好处是生成的文本可以被外部的SVG程序解析,

  Free drawing

  支持在canvas上任意画,步骤:

  1.canvas.isDrawingMode(true)后将鼠标的移动认为是pen和brush。

  当mouse:up后,fabric发出 path:created事件,并创建fabric.Path实例

  canvas.isDrawingMode(false)终止绘画

  可设置canvas的 freeDrawingColor and freeDrawingLineWidth

http://www.aseoe.com/ true fabric.js之强大的SVG处理工具类库 http://www.aseoe.com/show-80-749-1.html report <?php echo strlen($content) / 2; ?>   什么是Fabric js  使用 Fabric js 你可以创建和填充画布上的对象,从简单的几何图形到成百上千路径组成的复杂图形。你可以通过鼠标轻松的移动、缩放和旋转这些对象,修改它们的属性(颜色、透明度,层叠顺
TAG:fabric SVG 类库
本站欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果
转载请注明: 文章转载自:爱思资源网 http://www.aseoe.com/show-80-749-1.html

[前端插件推荐] Plugin

1 2 3 4
  • jQuery实现逐字逐句显示插件l-by-l.min.js
  • jQuery带方向感知的鼠标滑过图片边框特效插件
  • jQuery HotKeys监听键盘按下事件keydown插件
  • 响应式无限轮播jQuery旋转木马插件
响应式无限轮播jQuery旋转木马插件
web前端开发
爱思资源网 Copyright 2012-2014 Www.Aseoe.Com All rights reserved.(晋ICP备13001436号-1)