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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/peade/article/details/94013491

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, easeInCubiceaseOutCubiceaseInElasticeaseOutElasticeaseInBounce, 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

展开阅读全文

没有更多推荐了,返回首页