Fabric.js 中文文档

Fabric.js 中文文档

基于canvas画布的实用类Fabric.js的使用

4、Fabric.js 常用的方法&事件

Fabric.js 画布 defaultCursor 属性(1)

官网文档地址：http://fabricjs.com/docs/github
地址：https://github.com/fabricjs/fabric.js
Demo地址：http://fabricjs.com/demos/
NPM 地址：https://www.npmjs.com/package/fabric
中文文档：https://www.wenjiangs.com/docs/fabric-js

使用

通过CDN引入：

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

或者

npm install fabric

import fabric from 'fabric';

<template>
  <div>
    <canvas ref="canvas"></canvas>
  </div>
</template>
 
<script>
import fabric from 'fabric';
 
export default {
  mounted() {
    // 在组件挂载后，创建Canvas对象并将其绑定到canvas元素上
    this.canvas = new fabric.Canvas(this.$refs.canvas);
 
    // 创建矩形对象
    const rect = new fabric.Rect({
      left: 100,
      top: 100,
      width: 200,
      height: 100,
      fill: 'red'
    });
 
    // 将矩形添加到Canvas中
    this.canvas.add(rect);
  }
}
</script>