文章目录
前言
提示:本文章会连续记录Fabric.js的使用
在项目开发过程中,可能会遇到绘制图形的情况,如自由绘图、图像编辑、绘制建筑轮廓图然后生成3D模型等等,这样的情况下,需要一个比较好的图形编辑器,并且可以导出绘制体,进行编辑,基于此进行本文章的撰写,同样也是自己学习的记录
提示:自己不是一个开发人员,也是学习的阶段,有不正确的地方请大家指出
一、Fabric.js是什么?
Fabric.js是一个完全开源的Javascript HTML5 (画布库)项目,于2010年左右开始创建,降低了开发Canvas的过程中,各种类型的交互与变更的复杂度;
Fabric.js是基于canvas封装的开源库,canvas提供一个好的画布能力, 但其api超级烂。如果你就想画个简单图形, 其实也可以, 不过做一些复杂的图形绘制, 编写一些复杂的效果,就不是那么好了。而Fabric.js就是比较好的选择之一
二、和vue2结合搭建一个简单项目
1.创建vue2项目
首先创建一个vue2项目,比较简单,这个不做过多说明,直接采用脚手架vue-cli(我用的CLI v5.0.8),在cmd中输入下面命令:
//创建vue项目
vue create + 项目名
创建完成之后,项目就会初始化好,如下:
2.安装Fabric.js
npm i fabric --save
3.创建简单图形
先创建简单的图形,把项目跑起来
只需 3个操作 就能展示点东西了
3.1创建canvas 容器
在 template 中创建 ,并设置容器的 id 和 宽高,width/height
代码如下(示例):
<canvas width="1200" height="500" id="canvas-box" style="border: 1px solid #ccc;"></canvas>
然后 把容器居中显示
代码如下(示例):
.hello{
width: 100%;
height: 100%;
display: flex;
justify-content:center;
align-items:center;
}
3.2引入Fabric.js
在vue中引入Fabric.js
import { fabric } from 'fabric'
3.3使用 fabric 接管容器,并画一个矩形
实例化 fabric ,之后就可以使用 fabric 的 api 管理 canvas 了。
mounted(){
this.init()
},
methods:{
init(){
this.canvas = new fabric.Canvas('canvas-box') // 这里传入的是canvas的id
// 创建一个长方形
const rect = new fabric.Rect({
top: 30, // 距离容器顶部 30px
left: 30, // 距离容器左侧 30px
width: 100, // 宽 100px
height: 60, // 高 60px
fill: 'red' // 填充 红色
})
// 在canvas画布中加入矩形(rect)。add是“添加”的意思
this.canvas.add(rect)
},
},
呈现:
完整代码
<template>
<div class="hello">
<!-- 画布元素 -->
<canvas width="1200" height="500" id="canvas-box" style="border: 1px solid #ccc;"></canvas>
</div>
</template>
<script>
import { fabric } from 'fabric'
export default {
name: 'HelloWorld',
data() {
return {
}
},
mounted(){
this.init()
},
methods:{
init(){
this.canvas = new fabric.Canvas('canvas-box') // 这里传入的是canvas的id
// 创建一个长方形
const rect = new fabric.Rect({
top: 30, // 距离容器顶部 30px
left: 30, // 距离容器左侧 30px
width: 100, // 宽 100px
height: 60, // 高 60px
fill: 'red' // 填充 红色
})
// 在canvas画布中加入矩形(rect)。add是“添加”的意思
this.canvas.add(rect)
},
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello{
width: 100%;
height: 100%;
display: flex;
justify-content:center;
align-items:center;
}
</style>
总结
这就是通过Fabric.js库创建了一个简单的项目,在画布里面绘制一个矩形,后续的文章会继续介绍