Vue2开发之用vue搭建一个fabric的项目

31人浏览 / 0人评论 / 添加收藏

首先创建一个vue2项目,比较简单,这个不做过多说明,直接采用脚手架vue-cli(我用的CLI v5.0.8),在cmd中输入下面命令:

//创建vue项目
vue create + 项目名

创建完成之后,项目就会初始化好,如下:

2.安装Fabric.js

npm i fabric --save

package.json文件中使用的fabric的版本:

3.创建简单图形
先创建简单的图形,把项目跑起来

只需 3个操作 就能展示点东西了

3.1创建canvas 容器
在 template 中创建 ,并设置容器的 id 和 宽高,width/height
代码如下(示例):

<canvas width="600" height="600" id="canvas" style="border: 1px solid #ccc;"></canvas>

 

4.js中代码

<script>
import { fabric } from 'fabric'

export default {
name: 'HelloWorld',
props: {
msg: String
},
data() {
return {
message: '',
userListShow: false,
userList: [],
currentRow: {}
};
},
mounted() {
this.init();
},
methods: {
init() {
let canvas = new fabric.Canvas('canvas') // 实例化fabric,并绑定到canvas元素上

// 圆
let circle = new fabric.Circle({
left: 100,
top: 100,
radius: 50,
})

// 线性渐变
let gradient = new fabric.Gradient({
type: 'linear', // linear or radial
gradientUnits: 'pixels', // pixels or pencentage 像素 或者 百分比
coords: { x1: 0, y1: 0, x2: circle.width, y2: 0 }, // 至少2个坐标对(x1,y1和x2,y2)将定义渐变在对象上的扩展方式
colorStops:[ // 定义渐变颜色的数组
{ offset: 0, color: 'red' },
{ offset: 0.2, color: 'orange' },
{ offset: 0.4, color: 'yellow' },
{ offset: 0.6, color: 'green' },
{ offset: 0.8, color: 'blue' },
{ offset: 1, color: 'purple' },
]
})
circle.set('fill', gradient);
canvas.add(circle)
}
}
}
</script>

全部评论