动画 (rect.animate)

  1. var canvas = new fabric.Canvas("c");
  2. var rect = new fabric.Rect({
  3.   left: 100,
  4.   top: 100,
  5.   fill: "red",
  6.   width: 20,
  7.   height: 20,
  8.   angle: 0,
  9. });
  10. rect.animate("angle", 190, {
  11.   onChange: canvas.renderAll.bind(canvas),
  12.   duration: 1000,
  13.   // easeInCubic，easeOutCubic，easeInElastic，easeOutElastic，easeInBounce和easeOutExpo
  14.   easing: fabric.util.ease.easeOutExpo,
  15.   onComplete: function () {
  16.     console.log("动画结束");
  17.   },
  18. });
  19. canvas.add(rect);

图像滤镜 (Rect.fillters.push())

创建图像

  • fabric.Image 构造函数，它接受图像元素。
  • 还有 fabric.Image.fromURL 方法

    Grayscale、Sepia、Grayscale、Invert

  1. fabric.Image.fromURL("../2.jpg", function (oImg) {
  2.   oImg.filters.push(
  3.     new fabric.Image.filters.Grayscale(),
  4.     new fabric.Image.filters.Sepia()
  5.   );
  6.   oImg.applyFilters();
  7.   canvas.add(oImg);
  8. });

由于“filters”属性是一个数组，我们可以用数组方法执行任何所需的操作：移除滤镜（pop，splice，shift），添加滤镜（push，unshift，splice），甚至可以组合多个滤镜。当我们调用 applyFilters 时，“filters”数组中存在的任何滤镜将逐个应用，所以让我们尝试创建一个既色偏又明亮（Brightness）的图像。

颜色 fabirc.Color()

转换也很简单。 toHex（）将颜色实例转换为十六进制表示。 toRgb（）可以转换为 RGB，toRgba（）转换为带 Alpha 通道的 RGB。

  1. new fabric.Color("#f55").toRgb(); // "rgb(255,85,85)"
  2. new fabric.Color("rgb(100,100,100)").toHex(); // "646464"
  3. new fabric.Color("fff").toHex(); // "FFFFFF"
  5. var redish = new fabric.Color("#f55");
  6. var greenish = new fabric.Color("#5f5");
  7. // 颜色叠加
  8. redish.overlayWith(greenish).toRgb(); // "AAAA55"
  9. // 转成灰度加颜色
  10. redish.toGrayscale().toHex(); // "A1A1A1"

渐变 rect.setGradient(‘fill’,{})

setGradient

  1. var circle = new fabric.Circle({
  2.   left: 100,
  3.   top: 100,
  4.   radius: 50,
  5. });
  7. circle.setGradient("fill", {
  8.   x1: 0,
  9.   y1: 0,
  10.   x2: 0,
  11.   y2: circle.height,
  12.   colorStops: {
  13.     0: "#000",
  14.     1: "#fff",
  15.   },
  16. });

两对坐标决定横轴还是纵轴方向
colorStops 决定多个色彩过度

  1. circle.setGradient("fill", {
  2.   x1: 0,
  3.   y1: 0,
  4.   x2: circle.width,
  5.   y2: 0,
  6.   colorStops: {
  7.     0: "red",
  8.     0.2: "orange",
  9.     0.4: "yellow",
  10.     0.6: "green",
  11.     0.8: "blue",
  12.     1: "purple",
  13.   },
  14. });

文本 fabric.Text

  1. var canvas = new fabric.Canvas("c");
  2. var text = new fabric.Text("hello world", {
  3.   // left: 100,
  4.   // top: 100,
  5.   fill: "#f00",
  6.   opacity: "0.4",
  7.   fontFamily: "Comic Sans",
  8.   fontSize: 50,
  9.   fontWeight: "bold",
  10.   textDecoration: true,
  11.   overline: true,
  12.   linethrough: true,
  13.   underline: true,
  14.   shadow: "green -5px -5px 3px",
  15.   fontStyle: "italic",
  16.   fontFamily: "Delicious",
  17.   stroke: "#ff1318",
  18.   strokeWidth: 1,
  19.   textAlign: "right",
  20.   lineHeight: 3,
  21.   textBackgroundColor: "rgb(0,200,0)",
  22.   originX: "center",
  23.   originY: "center",
  24. });
  25. canvas.add(text);

事件

  1. var canvas = new fabric.Canvas("c");
  2. canvas.on("mouse:down", function (options) {
  3.   if (options.target) {
  4.     console.log("有对象被点击咯! ", options.target.type);
  5.   }
  6. });

canvas.on(‘mouse:down’, function(options) {…}

事件
地址

  • after:render
  • object:modified
  • object:selected
  • object:moving
  • object:scaling
  • object:rotate
  • object:added
  • object:removed
  • selected

举例

我们将事件侦听器直接附加到矩形和圆形实例。使用”selected”来代替”object:selected”。同样的，使用“modified”代替“object:modified”，使用“rotating”来代替“object:rotating”。等等。。

  1. var circle = new fabric.Circle({ radius: 75, fill: "blue" });
  2. circle.on("selected", function () {
  3.   console.log("selected a circle");
  4. });
  5. // 全局
  6. canvas.on("object:selected", function () {
  7.   console.log("selected a circle");
  8. });