fabricJs 在vue项目中的实战记录（四）添加文字以及文字的操作[字体大小、颜色、字间距、行间距、透明度、加粗、斜体、下划线、删除线、对齐方式、字体设置]

在阅读以下文章的基础上查看本篇笔记：

第一篇：fabricJs 在vue项目中的实战记录（一）引入以及初始化
第二篇：fabricJs 在vue项目中的实战记录（二）fabricjs设置海报背景（图片以及纯色）
第三篇：fabricJs 在vue项目中的实战记录（三）元素的上移层级、下移层级以及删除

1、前言说明：

// 1、let Shape = new fabric.Textbox('字体内容', currentOptionCss) : currentOptionCss=>字体样式
// 2、imageEffectCanvas.add(Shape) : 添加到画布上
// 3、fontFamily ： 字体类型设置
// 4、fill ： 字体颜色
// 5、textBackgroundColor ： 字体背景颜色
// 6、fontWeight : bold加粗，normal正常
// 7、textAlign：left 左对齐 right 右对齐 center 居中
// 8、opacity :number 透明度 0-1取值
// 9、underline : true false 下划线
// 10、linethrough:true false 中划线
// 11、overline: true false 顶部划线
// 12、lineHeight: number 行高（数字类型）
// 13、text: string 文字内容
// 14、fontSize:number 字体大小
// 15、top: Number 距离画布顶部的距离
// 16、left: Number 距离画布左边的距离
// 17、width: Number 默认宽度
// 18、charSpacing: Number 字间距

2、template布局：

<canvas :style="{'transform':'scale(' + 0.5 +')','transform-origin':'center top'}" id="imageEffectCanvas"></canvas>

<div @click="addShapeHandle('textbox','add')" class="addText">
	<i class="el-icon-plus"></i>
	<span>添加文字</span>
</div>

3、script方法：

<script>
import { fabric } from 'fabric'
// 初始化画布控制器
fabric.Object.prototype.set({
    cornerStrokeColor:'#ff4555',
    cornerColor:'#ff4555',
    cornerStyle:'circle',
    cornerSize:28,
    borderScaleFactor:6,
    
    borderColor:'#ff4555',
});
let imageEffectCanvas = '';
data() {
	return() {
		activeObjectData :{
		     type: 'textbox',
		     text: '双击编辑文字',
		     fontSize: 100,
		     left: 100,
		     top: 400,
		     width: 200,
		     fill: '#000000',
		     textBackgroundColor: 'rgba(0,0,0,0)',
		     opacity:1,
		     stroke: '#ffffff',
		     strokeWidth: 0,
		     background: '#7ED321',
		     fontWeight:'normal',
		     fontStyle:'normal',
		     underline:false,
		     linethrough:false,
		     overline:false,
		     textAlign:'left',
		     lineHeight:1,
		     charSpacing:1,
		     fontFamily:'hyzktjjkt',
		     rotate: 0,
		     selectable: true,
	 	},
	}
},
//生命周期- 挂载完成（可以访问DOM元素）
mounted() {
    this.initImageEffectCanvas(); // 初始化画布
},
methods: {
     // 初始化画布
     initImageEffectCanvas() {
         imageEffectCanvas = new fabric.Canvas('imageEffectCanvas',
         {
             width: '1080',
             height: '1920',
             backgroundColor: '#ffffff',
         });
         imageEffectCanvas.preserveObjectStacking=true;
     },
	// 添加（新增、编辑）
	addShapeHandle(actions,action) {
		//目前只添加文字，后续文档会更新添加图片
	    switch (actions) {
	        case 'textbox': 
	            this.addTextObjectHandle(action);
	            break;
	        case 'image':
	            this.addImageObjectHandle(action);
	            break;
	    }
	},
	// 添加文字
	addTextObjectHandle(action,flagVal) {   
	    let Shape;     
	    let currentOptionCss;
	    if(action == 'add') {
	        currentOptionCss = this.activeObjectData;
	    }
	    //通过最大行高计算高度,并删除多余文字,多出文字..表示,三个会换行
	    Shape = new fabric.Textbox(currentOptionCss.text || '', currentOptionCss);
	    if(action == 'add') {
	        imageEffectCanvas.add(Shape).setActiveObject(Shape);
	    }
	},
}
</script>

4、效果图：