在 Vue 中使用 Fabric.js

May 07, 2020Vue点击

如果业务里有与图形操作相关的内容，那你的前端可能需要 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>

// 找到模版里的 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/
版权声明: 转载请注明出处

体验小程序「简易记账」

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

在 Vue 中使用 Fabric.js

在 Vue 中使用 Fabric.js

为您推荐