一、准备工作

在项目中遇到了需要在图片上面打点的需求，想到了 canvas 和 svg ,后来找到了Fabric.js库，由于文档是英文的，只能硬啃文档加上在百度上各处搜教程，现在记录一下。

• 使用vue2+进行开发
• npm i -S fabric

由于练习使用 html

<script src="node_modules/fabric/dist/fabric.js"></script>

目录：

--node_modules
--index.html
--image

二、起步

1.基本使用

渲染图片

HTML 部分

<!-- 不在 html 里面指定宽高 -->
<canvas id="canvas"></canvas>
or
<!-- 在 html 里面指定宽高 -->
<canvas id="canvas" width="1000" height="1778"></canvas>

<img id="img" src="./image/demo.jpeg" />

JS 部分

// 初始化一个 canvas，指定宽高(也可以在 HTML 里面指定宽高)
// tips: 也可以利用 Fabric 创建 canvas
const canvas = new fabric.Canvas('canvas', {width: 1000, height: 1778});
// 创建一个图片示例，指定路径，回调函数可以设置放大比例，位置，大小……
// tips：也可以在 HTML 里面写一个 <img /> 标签，通过 Fabric 获取
fabric.Image.fromURL('image/demo.jpeg', (img) => {
    img.set({
        width: 1000,
        height: 1778
    });
    // 将这个对象添加进 canvas 示例里面，这样就可以显示了
    canvas.add(img);
});
// 第二种方式
const img = document.getElementById('img');
const image = new fabric.Image(img, {
    width: 1080,
    height: 1778
})

canvas.add(image)

tips: 图片有个比较坑的地方，width、height 是类似图层大小而不是图片大小，图片大小需要设置 scaleX、scaleY(图层大小 / 图片大小 就可以适配图层大小了)

图片渲染

2. 设置层级

1. zIndex
2. 1. 下移：image.sendBackwards();
   2. 上移：image.bringForward();
   3. 置顶：image.bringToFront();
   4. 置底：image.sendToBack();

3. 事件添加与移除

• 事件添加：canvas.on(eventType, callback)
• 事件移除：canvas.off(eventType, [?callback])
• 移除全部事件：canvas.removeListeners()

3.1 添加事件

tips: 例如 image 对象的事件为 mouseup、mousedown等等

canvas.on('mouse:down', (e) => {
    console.log('鼠标左键按下，位置是：', e.pointer.x, e.pointer.y);
})
canvas.on('mouse:up', (e) => {
    console.log('鼠标左键抬起，位置是：', e.pointer.x, e.pointer.y)
})

全部事件示例

全部事件文档

3.2 移除事件

// 移除指定事件
canvas.off('mouse:down');
// 移除全部事件
canvas.removeListeners();

4. 取消旋转、缩放

• image.evented：禁止选中

  • 点击禁止选中，鼠标滑动可以选择。
  • 鼠标样式为默认，不可以移动旋转
  • 事件取消

• image.selectable：禁止选中

  • 点击与滑动都禁止选中
  • 鼠标样式仍为可移动样式，但是不能移动
  • 事件取消

• image.setControlsVisibility({})：可以设置单个控制点是否可见

  • bl: false, // 左下
  • br: false, // 右下
  • mb: false, // 下中
  • ml: false, // 中左
  • mr: false, // 中右
  • mt: false, // 上中
  • tl: false, // 上左
  • tr: false, // 上右
  • mtr: false // 旋转控制键

• image.hasControls: 全部控制点是否可见

• image.hasBorders：选中后的边框是否可见

控制器