fabricjs学习二：animation，image filters滤镜，渐变、文本、事件

fabricjs中的动画

元素中，多个动画执行时，

可以只在其中一个动画里面设置onChange，其他属性值，每一个动画，都要单独设置。

import {fabric} from 'fabric'

let cas = document.getElementById('canvas')

let canvas = new fabric.Canvas(cas)
let rect = new fabric.Rect({
  left: 25,
  top: 25,
  width: 30,
  height: 30
})
canvas.add(rect)
rect.animate('angle', 45, {
  // onChange: canvas.renderAll.bind(canvas),
  easing: fabric.util.ease.easeInCubic
})
  .animate('left', '+=150', {
    from: 50,
    onChange: canvas.renderAll.bind(canvas),
    duration：1000，
    easing: fabric.util.ease.easeInCubic
  })

常用的easing有：easeOutBounce, easeInCubic, easeOutCubic, easeInElastic, easeOutElastic, easeInBounce, and easeOutExpo.

 

image filters

Image.filters是一个普通数组，可以用普通数组的方法去操作它

示例代码

fabric.Image.fromURL('pug.jpg', function(img) {
  img.filters.push(
    new fabric.Image.filters.Sepia(),
    new fabric.Image.filters.Brightness({ brightness: 100 }));

  img.applyFilters();
  canvas.add(img);
})

渐变 

目前看到的渐变方式，都是线性渐变，没有径向渐变。

var circle = new fabric.Circle({
  left: 100,
  top: 100,
  radius: 50
});

circle.setGradient('fill', {
  x1: 0,
  y1: 0,
  x2: circle.width,
  y2: 0,
  colorStops: {
    0: "red",
    0.2: "orange",
    0.4: "yellow",
    0.6: "green",
    0.8: "blue",
    1: "purple"
  }
});

文本具有以下属性

• Multiline support Native text methods unfortunately simply ignore new lines.
• Text alignment Left, center, right. Useful when working with multiline text.
• Text background Background also respects text alignment.
• Text decoration Underline, overline, strike-through.
• Line height Useful when working with multiline text.
• Char spacing Makes text more compact or more spaced
• Subranges apply colors and properties to subranges of your text object
• Multibyte support emoticons!
• On canvas editing with the interactive class you can type text directly over the canvas

示例代码：

var text20 = new fabric.Text('I\'m at fontSize 20', {
  fontSize: 20
})
canvas.add(text20)

事件

on绑定事件，off解绑事件

事件可以直接绑定到元素上

示例代码

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

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');
});

 

参考

http://fabricjs.com/fabric-intro-part-2