如何使用FabricJS创建画布？-猿码集

使用FabricJS创建画布

FabricJS是一个利用JavaScript开发的使用HTML5 Canvas元素的库，可用于创建高质量且交互性强的图像，它可以让开发者在网页上直接使用Canvas绘图，并提供了很多实用的API来帮助我们快速的实现自己所想要的功能。在这篇文章中，我们将详细介绍如何使用FabricJS来创建画布。

1. 引入FabricJS库

在使用FabricJS之前，我们需要先将其引入到我们的项目中。可以直接下载 FabricJS 库，然后将其添加到页面中。我们也可以通过CDN引入FabricJS库。这里我们选择第二种方式，因为这样可以使我们的代码更加简洁。


//引入FabricJS库
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.3.0/fabric.min.js" integrity="sha512-VdeuTjGiMEdmhF6zLJtREt0qSCl2jODTr+1zMT4ZYX9No/w3btxJ5Svyv8viG50zn9Wn5TlW6ofqDJT6JJJmgQ==" crossorigin="anonymous"></script>

2. 创建画布

创建画布可以使用FabricJS中的canvas对象。在页面中添加 canvas 元素，并建立 FabricJS 的实例。可以指定画布的大小和其它属性。


//获取页面画布对象
var myCanvas = new fabric.Canvas('myCanvas', { 
    width: 800, //画布宽度
    height: 600, //画布高度
    backgroundColor: '#ccc', //画布背景颜色
    selectionBorderColor: 'blue', //选择框颜色
    selectionLineWidth: 2, //选择框宽度
    defaultCursor: 'default', // 默认鼠标指针样式
    hoverCursor: 'pointer' // 悬浮鼠标指针样式
});

3. 绘制元素

接下来我们就可以开始在画布上绘制元素了。 FabricJS 具有很多工具，可以让我们以各种形状和大小来创建直线，文本，图形等等。先创建几个不同种类的图形来演示一下。

3.1 绘制矩形

在 FabricJS 中，我们可以使用 Rectangle 类来创建矩形。Rectangle 类的构造函数可以接受许多选项来定义此矩形的大小、位置和颜色等属性。


//绘制矩形
var rect = new fabric.Rect({
  left: 100, //属性：绘制距离画布左侧的距离
  top: 100, //属性：绘制距离画布顶部的距离
  fill: 'red', //属性：填充色，默认为空
  width: 200, //属性：宽度
  height: 100, //属性：高度
  angle: 45, //属性：旋转角度
  strokeWidth: 2, //属性：线条宽度
  stroke: 'green', //属性：线条颜色
  opacity: 0.5 //属性：透明度
});
myCanvas.add(rect); //添加到canvas中

3.2 绘制文本

在 FabricJS 中，我们可以使用 Text 类来创建文本。Text 类的构造函数可以接受许多选项来定义此文本的字体、大小、颜色等属性。


//绘制文本
var text = new fabric.Text('Hello FabricJS', {
    left: 100,
    top: 250,
    fontFamily: 'Arial', //属性：字体
    fontSize: 30, //属性：字体大小
    fill: 'black', //属性：填充颜色
    fontStyle: 'italic' //属性：字体样式
});
myCanvas.add(text); //添加到canvas中

3.3 绘制圆形

在 FabricJS 中，我们可以使用 Circle 类来创建圆形。Circle 类的构造函数可以接受许多选项来定义此圆形的半径、位置和颜色等属性。


//绘制圆形
var circle = new fabric.Circle({
  left: 100,
  top: 400,
  strokeWidth: 2, //属性：线条宽度
  radius: 50, //属性：半径
  fill: null, //属性：填充颜色
  stroke: 'blue' //属性：线条颜色
});
myCanvas.add(circle); //添加到canvas中

4. 动画

绘制了我们想要的图形，下面就可以为这些图形添加一些动画了。 FabricJS 可以使对象实现移动、旋转、缩放等动画效果。直观效果十分吸引人。

4.1 移动动画

在 FabricJS 中，可以使用 animate 方法，该方法有两个参数：一个是JSON对象，该对象描述了要执行的动画类型和选项，第二个参数是回调函数，该函数将在动画完成时执行。为了使矩形能够左右移动，我们可以将矩形从左侧移动到最右侧，然后从右侧移动到最左侧。这需要改变其 left 属性。并使用 animate 方法，在样式更改时使用 FabricJS 缓动函数。


var rect = new fabric.Rect({
  left: 0,
  top: 0,
  width: 50,
  height: 50,
  fill: '#0aa',
  
});
myCanvas.add(rect);
//移动矩形
rect.animate('left', 350, {
  onChange: myCanvas.renderAll.bind(myCanvas),
  duration: 3000,
  easing: fabric.util.ease.easeInOutCubic,
  onComplete: function() {
    rect.animate('left', 0, {
      onChange: myCanvas.renderAll.bind(myCanvas),
      duration: 3000,
      easing: fabric.util.ease.easeInOutCubic,
      onComplete: function() {
        //完成后执行的操作
      }
    });
  }
});

4.2 缩放动画

在 FabricJS 中，可以使用 animate 方法，该方法有两个参数：一个是JSON对象，该对象描述了要执行的动画类型和选项，第二个参数是回调函数，该函数将在动画完成时执行。为了使矩形能够放大和缩小，我们可以使用缩放属性来更改其大小并使用 FabricJS animate 方法中的 duration 属性和缓动函数来实现缩放动画。


//缩放矩形
rect.animate('scaleX', 2, {
    onChange: myCanvas.renderAll.bind(myCanvas),
    duration: 3000,
    easing: fabric.util.ease.easeInOutCubic,
    onComplete: function() {
      rect.animate('scaleX', 1, {
        onChange: myCanvas.renderAll.bind(myCanvas),
        duration: 3000, 
        easing: fabric.util.ease.easeInOutCubic,
        onComplete: function() {
        //完成后执行的操作
        }
      });
    }
});

4.3 旋转动画

在 FabricJS 中，可以使用 animate 方法，该方法有两个参数：一个是JSON对象，该对象描述了要执行的动画类型和选项，第二个参数是回调函数，该函数将在动画完成时执行。为了使圆形能够旋转，我们可以使用旋转属性并使用 FabricJS animate 方法中的 duration 属性和缓动函数来实现旋转动画。


//旋转圆形
circle.animate('angle', 360, {
  onChange: myCanvas.renderAll.bind(myCanvas),
  duration: 3000,
  easing: fabric.util.ease.easeInOutCubic,
  onComplete: function() {
     circle.animate('angle', 0, {
       onChange: myCanvas.renderAll.bind(myCanvas),
       duration: 3000, 
       easing: fabric.util.ease.easeInOutCubic,
       onComplete: function() {
      //完成后执行的操作
       }
     });
  }
});

5. 总结

在本文中，我们详细介绍了如何使用 FabricJS 来创建画布、绘制元素和实现动画效果。FabricJS 是一款非常优秀的绘图库，它提供非常方便的API接口，使得我们可以轻松地开发出高交互性的网页图像。相信通过本文的学习，你已经能够熟练掌握 FabricJS 的基本用法，以及如何使用 FabricJS 来创建画布、绘制元素和实现动画效果。

如何使用FabricJS创建画布？