fabricJs 在vue项目中的实战记录（一）引入以及初始化

1、下载fabric包：

cnpm i fabric -D // 或者 npm i fabric -D

2、在main.js 中引入：

// 海报模板插件
import { fabric } from 'fabric'
Vue.use(fabric);

3、template 中添加canvas元素：

<!-- 图文编辑区 -->
<div @click="hideToolWrapperHandle" class="canvasLayout">
	<canvas id="imageEffectCanvas"></canvas>
</div>

4、script中初始化画布：

<script>
	let imageEffectCanvas = '';

	// 初始化画布控制器
	fabric.Object.prototype.set({
	    cornerStrokeColor:'#ff4555', //边角描边颜色
	    cornerColor:'#ff4555', //边角颜色
	    cornerStyle:'circle', //边角形状
	    cornerSize:28, //边角大小
	    borderScaleFactor:6, //描边边框大小
	    borderColor:'#ff4555', //描边边框颜色
	});
	methods: {
		// 初始化画布
		initImageEffectCanvas() {
			imageEffectCanvas = new fabric.Canvas('imageEffectCanvas',
				{
	                width: '1080', //画布宽度
	                height: '1920', //画布高度
	                backgroundColor: '#ffffff', //画布默认背景颜色
	            });
	            imageEffectCanvas.preserveObjectStacking=true; //选中对象不会到最高层（解决选中图片层级提升覆盖文字等其它元素问题）
		},
	},
</script>

5、效果图：