安装与使用

$ yarn add fabric

在Vue中使用:

<template>
  <canvas id="main" width="1000" height="1000" style="width:1000px;height:1000px;border:1px solid #ccc;"></canvas>
</template>
<script>
import { fabric } from 'fabric'
export default {
  name: 'home',
  mounted() {
    var canvas = new fabric.Canvas('main');
    var rect = new fabric.Rect({
      left:0,
      top:0,
      fill:'red',
      width:100,
      height:100
    });
    canvas.add(rect);
  }
}
</script>

使用步骤

  1. 引入 fabric
import { fabric } from 'fabric'
  1. 创建 fabric 画布
var canvas = new fabric.Canvas('main')

其中 main 为 id 为 main 的 DOM

也可以在创建的时候为画布设置一些样式:

var canvas = new fabric.Canvas('main', {
  backgroundColor: 'rgb(100,100,200)',
  selectionColor: 'blue',
  selectionLineWidth: 2
});

通过 fabric.Canvas 创建的画布可以对里面的元素进行进行拖动、缩放、旋转等操作,如果不想对元素进行操作,可以使用 fabric.StaticCanvas 创建

var staticCanvas = new fabric.StaticCanvas('main');
staticCanvas.add(
  new fabric.Rect({
    width: 10, height: 20,
    left: 100, top: 100,
    fill: 'yellow',
    angle: 30
  })
);
  1. 创建图形
var obj = new fabric. ...
  1. 将创建的图形加入到画布
canvas.add(rect)
  1. 获取画布中所有元素
canvas.getObjects();
  1. 获取画布中某个序号的元素
canvas.item(0);
  1. 移除画布中某个元素
canvas.remove(rect);

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress