在 Vue 中使用 Fabric.js

如果业务里有与图形操作相关的内容,那你的前端可能需要 Fabric.js


首先,创建一个 Vue 项目

1
vue create my-project

安装 fabric

1
yarn add fabric

main.js 文件里引入 fabric

1
import 'fabric'

在对应的业务组件中创建图形:

1
2
<!-- 模版里的一个 canvas 元素 -->
<canvas ref="c"></canvas>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 找到模版里的 canvas 元素
const myCanvas = this.$refs.c

// 创建一个 fabric.Canvas 对象
const canvas = new window.fabric.Canvas(canvasRef, {
width: 130,
height: 170
})

// 通过一个图片 URL,创建一个 fabric.Image 对象
// 在实例创建好之后,把它添加到 canvas 上
window.fabric.Image.fromURL(this.imageUrl, function (oImg) {
oImg.scale(0.5)
canvas.add(oImg)
})

利用 Fabric.js 可以轻松、直观地实现图形、图象的绘制和布局,甚至是旋转、缩放等操作

Fabric Tutorial: http://fabricjs.com/articles/

原文作者: dgb8901,yinxing

原文链接: https://www.itwork.club/2020/05/07/use-fabric-in-vue/

版权声明: 转载请注明出处

为您推荐

体验小程序「跟我记账」

关注公众号「特想学英语」

前端面试准备内容