Vue2开发之用vue搭建一个fabric的项目
首先创建一个vue2项目，比较简单，这个不做过多说明，直接采用脚手架vue-cli（我用的CLI v5.0.8），在cmd中输入下面命令：
//创建vue项目
vue create + 项目名
创建完成之后，项目就会初始化好，如下：
2.安装Fabric.js
npm i fabric --savepackage.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>
全部评论