Fabric.js的学习

简介

 Fabric.js - 一个强大的 Javascript 库，它让使用 HTML5 画布变得轻而易举。Fabric 为画布提供了一个缺失的对象模型，以及一个 SVG 解析器、交互层和一整套其他不可或缺的工具。它是一个完全开源的项目。

如今， Canvas使我们能够在网络上创建一些绝对 令人惊叹的 图形。但它提供的 API令人失望地低级。如果我们只是想在画布上绘制一些基本形状而忘记它们，那是一回事。但是，一旦需要进行任何类型的交互、随时更改图片或绘制更复杂的形状，情况就会发生巨大变化。

Fabric旨在解决这个问题。

官网  Fabric.js

安装

 npm安装 

npm install fabric --save

  npm方式引入 

import { fabric } from 'fabric'

 CDN引入

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.6/fabric.min.js"></script>

 cdn方式引入全局就有了fabric对象

Fabric的对象 

• fabric.Circle   //圆形
• fabric.Ellipse   //椭圆
• fabric.Line      //线
• fabric.Polygon //多边形
• fabric.Polyline //交叉线 折线
• fabric.Rect //矩形
• fabric.Triangle//三角形

• mouse:down 鼠标按下
• mouse:move 鼠标移动
• mouse:dblclick 鼠标双击
• object:added 添加图层
• object:modified 编辑图层
• object:removed 移除图层
• selection:created 初次选中图层
• selection:updated 图层选择变化
• selection:cleared 清空图层选中

使用 

1、给定一个 带有 id 的 canvas 标签，相当于一个画布容器

<canvas id="canvas" width="400" height="400"></canvas>
//  样式
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  body {
    width: 100vw;
    height: 100vh;
  }
  #canvas {
    border: 1px solid red;
  }
</style>

 2、初始化 fabric.Canvas

// 实例化
let fabricObj = new fabric.Canvas('canvas')
//  设置画布宽高  可以动态设置画布宽高，如果在标签上也设置了宽高，则会将其覆盖掉
fabricObj.setWidth(650)
fabricObj.setHeight(650)

3、设置画布背景 

// 设置背景图
// 读取图片地址，设置画布背景
fabric.Image.fromURL('./image/4.jpg', (img) => {
  img.set({
    // 通过scale来设置图片大小，这里设置和画布一样大
    scaleX: fabricObj.width / img.width,  // 这里也可以写0 - 1
    scaleY: fabricObj.height / img.height, // 这里也可以写0 - 1
  });
  // 设置背景
  fabricObj.setBackgroundImage(img, fabricObj.renderAll.bind(fabricObj));
  fabricObj.renderAll();
})

4. 画矩形

//  画个矩形
let rect = new fabric.Rect({
  left: 100,
  top: 50,
  fill: '#ccc',
  width: 30,
  height: 30,
  strokeWidth: 5,//笔触宽度
  hasControls: true, //选中时是否可以放大缩小
  hasRotatingPoint: true,//选中时是否可以旋转
  hasBorders:true,//选中时是否有边框
  transparentCorners:true,
  perPixelTargetFind:true,//默认false。当设置为true，对象的检测会以像互点为基础，而不是以边界的盒模型为基础。
  selectable:true,//是否可被选中
  lockMovementX: true,//X轴是否可被移动(true为不可，因为前缀是lock)
  lockMovementY: true,//Y轴是否可被移动(true为不可，因为前缀是lock)
})
fabricObj.add(rect)

5、画圆 

//  画个圆
let circle = new fabric.Circle({
  left: 100,
  top: 100,
  fill: '#007acc',
  radius: 50  // 半径
})
fabricObj.add(circle)

6、画三角形 

//  画个三角形
let triangle = new fabric.Triangle({
  left: 100,
  top: 250,
  fill: '#ffcd43',
  width: 100,
  height: 50
})
fabricObj.add(triangle)

7、画线 

// 画线
let line = new fabric.Line([200, 300, 200, 150], {//终止位置，线长，起始位置，top，这里是从项目中截下来的我用了变量代替，你要用的话lineheight和lineleft用自己的变量或者数字代替。如果两个终止位置和起始位置的数值一样那么这个线条会垂直，这个应该很好理解。
  fill: '#5E2300',//填充颜色
  stroke: '#5E2300',//笔触颜色
  strokeWidth: 5,//笔触宽度
  hasControls: false, //选中时是否可以放大缩小
  hasRotatingPoint: false,//选中时是否可以旋转
  hasBorders:false,//选中时是否有边框
  transparentCorners:true,
  perPixelTargetFind:true,//默认false。当设置为true，对象的检测会以像互点为基础，而不是以边界的盒模型为基础。
  selectable:true,//是否可被选中
  lockMovementX: true,//X轴是否可被移动(true为不可，因为前缀是lock)
  lockMovementY: true,//Y轴是否可被移动(true为不可，因为前缀是lock)
});
fabricObj.add(line)

8、 画椭圆

// 画个椭圆
let ellipse = new fabric.Ellipse({
  rx: 80,  // 定义水平半径
  ry: 40,  // 定义垂直半径
  fill: 'blue',
  borderDashArray: [10]  //定义边框的虚线图案
});
fabricObj.add(ellipse)

用鼠标绘制多边形可以 参考下面这位园友的一篇博客

Fabric.js在vue页面中鼠标绘画多边形 Polyline