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、效果图：

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

Vue项目中刷新当前页面的四种方法
Vue项目中刷新当前页面的四种方法前记刷新当前页面的四种方法 this.$router.go(0) location.reload() 跳转空白页再跳回原页面使用provide / inject ...
java font 字体加粗_java字体设置，包括大小，颜色，加粗，下划线，对齐，斜体的设置...
本文转自:http://www.blogjava.net/Swing/archive/2007/12/26/128965.html 想做一个文本编辑器的朋友,来这里是找对了!! 下面的代码告诉我们该怎 ...
java字体设置，包括大小，颜色，加粗，下划线，对齐，斜体的设置
本文转自:http://www.blogjava.net/Swing/archive/2007/12/26/128965.html 下面的代码告诉我们该怎么在文本编辑器中设置字体大小,颜色,加粗,下划 ...
「Vue To Words」 - 教你在Vue项目中导出Word文档（包含表格合并，图片修改大小）
前言:最近在项目中遇到了,vue页面需要导出word文档,今日就进行记录一下,如有不对的地方,还请见谅 ^^ 简单说一下需求:需要导出的页面是表格页面,因为包含表格的嵌套和合并,其实最主要的就是导出页 ...
vue项目中使用svg，通过img标签轻量解决方案，支持动态颜色更改
前言 svg的优点不多说,怎么在vue项目优雅的使用svg?通过img似乎很优雅简单,但是你知道通过img引入svg怎么更改颜色吗?知道怎么动态切换颜色吗? 一.components下创建自定义公共s ...
word和excel中加粗和下划线的键盘快捷是什么？
加粗是ctrl+B 加下划线是ctrl+U WORD全套快捷键小技巧 CTRL+O 打开 CTRL+P 打印 CTRL+A 全选 CTRL+[/] 对文字进行大小设置(在选中目标情况下) CTRL+D ...
HTML常用字体样式设置（加粗、下划线、斜体）
有的时候,仅仅是价格要求,前面的符号小一点,后面的数字大一点,就没必要用SpannableString.用HTML简单处理即可效果图: 代码实现: //加粗:<strong>222< ...
Latex ulem包设置下划线删除线强调文本等效果
引言今天在用IEEE的模板写latex的时候,发现了一个问题:由\begin{algorithm}方法生成的伪代码中原本默认应该是斜体的强调部分,发现最后显示时被自动加了下划线. 我调了十几分钟也没 ...
[Overleaf] LaTeX中的斜体、加粗、下划线和简单指令
[Overleaf] LaTeX中的部分使用技巧 1.斜体使用 \textit 指令 it is an \textit{apple}. 运行结果: 2.字体加粗使用 \textbf 指令,或者使用 ...

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

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

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

最新文章

热门文章