fabricjs文档阅读(二)

Part 2

动画

我们通过set方法就可以快速的修改canvas上的图形的属性。但是，往往我们在开发网站的时候除了完成功能需求之外，也需要提高网页的美观。所以动画是一个必不可少的功能。

举个例子：

rect.set('angle', 45);

给这个变化属性添加动画非常简单，因为每一个图形对象都有一个animate的方法，只需要传入相应的参数即可

rect.animate('angle', 45, {
  onChange: canvas.renderAll.bind(canvas)
});

第一个参数就是动画属性，第二个是属性变化的值，第三个是一个包含指定animate变化更多细致的属性的对象，如：持续时间、回调、动画变化曲线等。

当你不想计算动画最终的数值，你可以使用+=``-=计算符号

rect.animate('left', '+=100', { onChange: canvas.renderAll.bind(canvas) });

代表着图形向右移动100距离

性能考虑：如果一个复杂一点的图形动画，给每一个图形都添加一个onchange的话就会给性能带来很大的负担，所以我们可以考虑使用一些requestAnimationFrame 这些计时器去刷新页面，而不是全部使用onChange

记住，画布表面下面有整个对象模型。物体有它们自己的属性和关系，canvas只负责将它们的存在投射到外部世界。

第三个参数有效属性：

• from:允许指定动画属性的起始值(如果我们不希望使用当前值)。

• duration:动画持续时间

• onComplete:完成时的回调函数

• onChange:数值变化时调用的函数

• easing:动画变化的曲线

  • 你不需要去了解这个函数如何实现，因为fabric已经预制好了几种的动画曲线。你可以这样使用

    rect.animate('left', 500, {
      onChange: canvas.renderAll.bind(canvas),
      duration: 1000,
      easing: fabric.util.ease.easeOutBounce
    });
    

    其他值得注意的包括easeInCubic、easeOutCubic、easeInElastic、easeOutElastic、easeInBounce和easeOutExpo。

##　Image filters

Colors

fabric提供了一些方法，让你能够快速方便地指定颜色。

new fabric.Color('#f55');
new fabric.Color('#123123');
new fabric.Color('356735');
new fabric.Color('rgb(100,0,100)');
new fabric.Color('rgba(10, 20, 30, 0.5)');

并且不同模式是可以互相转换

new fabric.Color('#f55').toRgb(); // "rgb(255,85,85)"
new fabric.Color('rgb(100,100,100)').toHex(); // "646464"
new fabric.Color('fff').toHex(); // "FFFFFF"

你还能够将颜色进行合成,或者转换成灰度图颜色

var redish = new fabric.Color('#f55');
var greenish = new fabric.Color('#5f5');

redish.overlayWith(greenish).toHex(); // "AAAA55"
redish.toGrayscale().toHex(); // "A1A1A1"

Gradients

Text

我们在Fabric中提供文本抽象有两个原因。

1. 首先，允许以面向对象的方式处理文本。通过实例化结构。文本实例，我们可以像处理任何其他Fabric对象一样处理文本——移动它、缩放它、更改它的属性，等等。
2. 第二个原因是提供比canvas更丰富的功能。
   1. 支持多行输入
   2. 文字对齐方式选择
   3. 文字背景设置
   4. 文本修饰,下划线、删除线等
   5. 设置文本行高
   6. 设置字间距
   7. 修改样式
   8. 富文本,支持表情
   9. 可交互性,直接在canvas进行输入编辑

例子:

var text = new fabric.Text('hello world', { left: 100, top: 100 });
canvas.add(text);

我们可以发现fabric使用起来非常熟悉,第一个参数是文本内容,第二个则是文本的属性对象.

每一个文本都有属于字节的文本对象和属性.

• 字体fontFamily

  var comicSansText = new fabric.Text("I'm in Comic Sans", {
    fontFamily: 'Comic Sans'
  });
  

• 字体大小fontSize

  除了使用fontSize之外,你还可以通过使用scaleX``scaleY获得相同的效果

  var text40 = new fabric.Text("I'm at fontSize 40", {
    fontSize: 40
  });
  var text20 = new fabric.Text("I'm at fontSize 20", {
    fontSize: 20
  });
  

• 字体粗细fontWeight

  就像在CSS中一样，您可以使用关键字(“normal”、“bold”)或数字(100、200、400、600、800)

  var normalText = new fabric.Text("I'm a normal text", {
    fontWeight: 'normal'
  });
  var boldText = new fabric.Text("I'm at bold text", {
    fontWeight: 'bold'
  });
  

• 文本修饰textDecoration

  var underlineText = new fabric.Text("I'm an underlined text", {
    underline; true
  });
  var strokeThroughText = new fabric.Text("I'm a stroke-through text", {
    linethrough: true
  });
  var overlineText = new fabric.Text("I'm an overline text", {
    overline: true
  });
  

• 阴影shadow

  在1.3.0版本之前，这个属性被称为“textShadow”

  文本阴影由4个组件组成:颜色、水平偏移量、垂直偏移量和模糊大小。

  var shadowText1 = new fabric.Text("I'm a text with shadow", {
    shadow: 'rgba(0,0,0,0.3) 5px 5px 5px'
  });
  var shadowText2 = new fabric.Text("And another shadow", {
    shadow: 'rgba(0,0,0,0.2) 0 0 5px'
  });
  var shadowText3 = new fabric.Text("Lorem ipsum dolor sit", {
    shadow: 'green -5px -5px 3px'
  });
  

• 字体样式fontStyle

  字体样式可以是两个值之一:normal或italic。

  var italicText = new fabric.Text("A very fancy italic text", {
    fontStyle: 'italic',
    fontFamily: 'Delicious'
  });
  var anotherItalicText = new fabric.Text("another italic text", {
    fontStyle: 'italic',
    fontFamily: 'Hoefler Text'
  });
  

• 字体边框颜色stroke 和边框宽度strokeWidth

  var textWithStroke = new fabric.Text("Text with a stroke", {
    stroke: '#ff1318',
    strokeWidth: 1
  });
  var loremIpsumDolor = new fabric.Text("Lorem ipsum dolor", {
    fontFamily: 'Impact',
    stroke: '#c3bfbf',
    strokeWidth: 3
  });
  

• 文本对齐方式textAlign

  允许的值是"left", "center", 和"right".

  var text = 'this is\na multiline\ntext\naligned right!';
  var alignedRightText = new fabric.Text(text, {
    textAlign: 'right'
  });
  

• 行高lineHeight

  var lineHeight3 = new fabric.Text('Lorem ipsum ...', {
    lineHeight: 3
  });
  var lineHeight1 = new fabric.Text('Lorem ipsum ...', {
    lineHeight: 1
  });
  

• 字体背景颜色textBackgroundColor

  var text = 'this is\na multiline\ntext\nwith\ncustom lineheight\n&background';
  var textWithBackground = new fabric.Text(text, {
    textBackgroundColor: 'rgb(0,200,0)'
  });
  

• text对象不支持自己输入字,使用IText和TextBox就可以直接在canvas进行输入文字

事件EVENTS

事件驱动能够提高框架的灵活性和便利,Fabric也不例外,也提供了内部的事件驱动,包含了简单的鼠标事件到复杂的对象交互事件.

这些事件允许我们在canvas画布上不同时刻有不同的操作.想要知道鼠标什么时候按下?fabric提供了mouse:down属性进行设置.想要知道新的图形什么时候添加?fabric也提供了object:add事件.想要知道画布什么时候发生刷新?after:render或许是你需要使用到的.

这些事件与JQuery非常相似,on的方法代表挂载事件监听,off则表示移除事件监听

说了这么多,让我们看看如何使用吧

var canvas = new fabric.Canvas('...');
canvas.on('mouse:down', function(options) {
  console.log(options.e.clientX, options.e.clientY);
});

我们添加了mouse:down鼠标事件在canvas画布上,我们输出的2个值分别为鼠标点击的X,Y的值,除了鼠标信息的e,options还有一个属性是target包含画布上单击的对象信息.

• 鼠标点击事件:"mouse:down", "mouse:move", "mouse:up"

• 一般事件:after:render

• 选择事件:"before:selection:cleared", "selection:created", "selection:cleared"

• 对象事件:"object:modified", "object:selected", "object:moving", "object:scaling", "object:rotating", "object:added", and "object:removed"

  注意像"object:moving" (or "object:scaling")只要对象进行移动或者放大哪怕只是一像素都会触发一次.所以处于性能考虑应该使用防抖或者使用定时器更新

  如果你在canvas对象中添加事件,你事件所有的触发区域就是canvas本身,如果我们只是需要给指定对象添加点击事件,我们可以进行这样的操作,和给canvas添加事件一样.

var rect = new fabric.Rect({ width: 100, height: 50, fill: 'green' });
rect.on('selected', function() {
  console.log('selected a rectangle');
});

var circle = new fabric.Circle({ radius: 75, fill: 'blue' });
circle.on('selected', function() {
  console.log('selected a circle');
});

我在开发中使用的是object:modified这个事件是canvas的所有对象中只要修改了就可以调用相应的事件,这样就可以进行状态保存,避免丢失用户的一些修改操作.

	jsPageToobar.upadatePageCanvasImage = function () {
	  this.pagesList[this.currentPageIndex].imgUrl = this.canvas.toDataURL()// canvas的图片数据
	  this.pagesList[this.currentPageIndex].canvasJSON = this.canvas.toJSON()// canvas的JSON数据
	}
   this.canvas.on('object:modified', jsPageToobar.upadatePageCanvasImage.bind(this))