学习整理Fabric.js 实现文本文字加粗、下划线、斜体、竖排、字体对齐代码

原图

效果图

代码

index.html

<!DOCTYPE HTML>
<html>
<head><meta charset="utf-8"><title>Fabric.js 加粗、下划线、斜体、竖排、字体对齐</title><script src="../fabric5.2.1.js"></script><style>div#container {padding: 30px;font-family: 'verdana', lucida;}input {background-color: #ccc;padding: 0;width: 300px;color: #777;}a {color: #777;display: block;background-color: #ccc;width: 300px;padding: 0;margin-top: 2px;text-decoration: none;}</style></head>
<body><div id="container"><p><input type="color" id="color" name="color" onchange="changeColor(value)"/></p><p><button onclick="bold()">加粗</button><button onclick="overline()">上划线</button><button onclick="linethrough()">中划线</button><button onclick="underline()">下划线</button><button onclick="italic()">斜体</button><button onclick="textalign('left')">字体左对齐</button><button onclick="textalign('right')">字体右对齐</button><button onclick="textalign('center')">字体居中对齐</button></p><canvas id="imageCanvas" width="300" height="300"></canvas><a id="lnkDownload" href="#">点我保存图片</a>
</div><script src="script.js"></script></body>
</html>

script.js 代码

 var canvas = new fabric.Canvas('imageCanvas', {backgroundColor: 'rgb(240,240,240)',includeDefaultValues: false,// 指示toObject/toDatalessObject是否应该包含默认值，如果设置为false，则优先于对象值perPixelTargetFind: true, //这一句说明选中的时候以图形的实际大小来选择而不是以边框来选择hasBorders: false,
});canvas.setWidth(500);
canvas.setHeight(800);// 使用 IText，可编辑文本
var text_1 = new fabric.IText('《天净沙·秋思》\n枯藤老树昏鸦，\n小桥流水人家，\n古道西风瘦马。\n夕阳西下，\n断肠人在天涯。',{width: 300,fontSize: 14,fontFamily: 'Comic Sans',left: 50,top: 100,fill: 'blue',splitByGrapheme: true, // 自动换行}
);
canvas.add(text_1);// 使用 IText，可编辑文本
var text_2 = new fabric.Textbox('《奇葩天地网》www.qipa250.com',{width: 300, // 建议设置 textbox 的宽度fontSize: 14,fontFamily: 'Comic Sans',left: 50,top: 400,fill: 'red',}
);
//禁止用户调整文本框高度
/*
setControlVisible 第一个参数是操作点(控件)的键，分别有 tl, tr, br, bl, ml, mt, mr, mb, mtr
mt 表示中间顶部的操作点，mb 表示中间底部的操作点。
第二个参数设置控件是否可见。true 是默认值，表示可见；设置成 false 代表指定控件不可见。
*/
//禁止下拉，防止字体变形
text_2.setControlVisible('mt', false);
text_2.setControlVisible('mb', false);
// splitByGrapheme 为 true 时，Textbox 里的文本就会实时根据宽度进行换行。
text_2.splitByGrapheme = true;
canvas.add(text_2);function changeColor(value) {console.log('changeColor--value=', value);let activeTxt = canvas.getActiveObject();if (!activeTxt) return;if (activeTxt.isEditing) {console.log('选中，修改单个文字的颜色');// 编辑状态activeTxt.setSelectionStyles({'fill': value});} else {console.log('选中整体，修改所有文字的颜色');activeTxt.fill = value;let s = activeTxt.styles;for (let i in s) {for (let j in s[i]) {s[i][j].fill = value;}}}canvas.renderAll();
}// 加粗
function bold() {let activeTxt = canvas.getActiveObject();if (!activeTxt) return;if (activeTxt.isEditing) {// 编辑状态const state = activeTxt.getSelectionStyles().find(item => item.fontWeight !== 'bold');if (!state || (JSON.stringify(state) === '{}' && activeTxt['fontWeight'] === 'bold')) {activeTxt.setSelectionStyles({'fontWeight': 'normal'});} else {activeTxt.setSelectionStyles({'fontWeight': 'bold'});}} else {// 选择状态if (activeTxt['fontWeight'] === 'bold') {activeTxt.fontWeight = 'normal';let s = activeTxt.styles;for (let i in s) {for (let j in s[i]) {s[i][j].fontWeight = 'normal';}}} else {activeTxt.fontWeight = 'bold';let s = activeTxt.styles;for (let i in s) {for (let j in s[i]) {s[i][j].fontWeight = 'bold';}}}}canvas.renderAll();
}//上划线
function overline() {let activeTxt = canvas.getActiveObject(); // 获取当前选中的文字// 如果当前没选中文字，那什么都不操作if (!activeTxt) return;// 判断当前是否进入编辑状态if (activeTxt.isEditing) {// 编辑状态const state = activeTxt.getSelectionStyles().find(item => item.overline !== true);// 如果当前if (!state || (JSON.stringify(state) === '{}' && activeTxt['overline'] === true)) {// 如果当前已经设置了上划线，那就把全局上划线取消activeTxt.setSelectionStyles({'overline': false});} else {// 如果当前没设置上划线，那就添加上上划线activeTxt.setSelectionStyles({'overline': true});}} else {// 选择状态if (activeTxt['overline'] === true) {activeTxt.overline = false;activeTxt.dirty = true;let s = activeTxt.styles;for (let i in s) {for (let j in s[i]) {s[i][j].overline = false;}}} else {activeTxt.overline = true;activeTxt.dirty = true;let s = activeTxt.styles;for (let i in s) {for (let j in s[i]) {s[i][j].overline = true;}}}}canvas.renderAll();
}//中划线
function linethrough() {//获取当前选中的文字let activeTxt = canvas.getActiveObject();// 如果当前没选中文字，那什么都不操作if (!activeTxt) return;// 判断当前是否进入编辑状态if (activeTxt.isEditing) {// 编辑状态const state = activeTxt.getSelectionStyles().find(item => item.linethrough !== true);// 如果当前if (!state || (JSON.stringify(state) === '{}' && activeTxt['linethrough'] === true)) {// 如果当前已经设置了中划线，那就把全局中划线取消activeTxt.setSelectionStyles({'linethrough': false});} else {// 如果当前没设置中划线，那就添加上中划线activeTxt.setSelectionStyles({'linethrough': true});}} else {// 选择状态if (activeTxt['linethrough'] === true) {activeTxt.linethrough = false;activeTxt.dirty = true;let s = activeTxt.styles;for (let i in s) {for (let j in s[i]) {s[i][j].linethrough = false;}}} else {activeTxt.linethrough = true;activeTxt.dirty = true;let s = activeTxt.styles;for (let i in s) {for (let j in s[i]) {s[i][j].linethrough = true;}}}}canvas.renderAll();
}//下划线
function underline() {//获取当前选中的文字let activeTxt = canvas.getActiveObject();// 如果当前没选中文字，那什么都不操作if (!activeTxt) return;// 判断当前是否进入编辑状态if (activeTxt.isEditing) {// 编辑状态const state = activeTxt.getSelectionStyles().find(item => item.underline !== true);// 如果当前if (!state || (JSON.stringify(state) === '{}' && activeTxt['underline'] === true)) {// 如果当前已经设置了下划线，那就把全局下划线取消activeTxt.setSelectionStyles({'underline': false});} else {// 如果当前没设置下划线，那就添加上下划线activeTxt.setSelectionStyles({'underline': true});}} else {// 选择状态if (activeTxt['underline'] === true) {activeTxt.underline = false;activeTxt.dirty = true;let s = activeTxt.styles;for (let i in s) {for (let j in s[i]) {s[i][j].underline = false;}}} else {activeTxt.underline = true;activeTxt.dirty = true;let s = activeTxt.styles;for (let i in s) {for (let j in s[i]) {s[i][j].underline = true;}}}}canvas.renderAll();
}//斜体
function italic() {let activeTxt = canvas.getActiveObject();if (!activeTxt) return;if (activeTxt.isEditing) {// 编辑状态const state = activeTxt.getSelectionStyles().find(item => item.fontStyle !== 'italic');if (!state || (JSON.stringify(state) === '{}' && activeTxt['fontStyle'] === 'italic')) {activeTxt.setSelectionStyles({'fontStyle': 'normal'});} else {activeTxt.setSelectionStyles({'fontStyle': 'italic'});}} else {// 选择状态if (activeTxt['fontStyle'] === 'italic') {activeTxt.fontStyle = 'normal';let s = activeTxt.styles;for (let i in s) {for (let j in s[i]) {s[i][j].fontStyle = 'normal';}}} else {activeTxt.fontStyle = 'italic';let s = activeTxt.styles;for (let i in s) {for (let j in s[i]) {s[i][j].fontStyle = 'italic';}}}}canvas.renderAll();
}//文字对齐
function textalign(align_value) {canvas.getActiveObject().textAlign = align_value;canvas.renderAll();
}var imageSaver = document.getElementById('lnkDownload');
imageSaver.addEventListener('click', saveImage, false);function saveImage(e) {console.log('toJSON==', canvas.toJSON());console.log('toObject==', canvas.toObject()); // 输出序列化的内容this.href = canvas.toDataURL({format: 'png',quality: 0.8});this.download = 'canvas.png';}

学习整理Fabric.js 实现文本文字加粗、下划线、斜体、竖排、字体对齐代码相关推荐

学习整理fabric.js更换画布文字元素字体样式
学习整理fabric.js更换画布文字元素字体样式原图效果图实现代码 index.html script.js 生成本地图原图效果图实现代码 index.html <!DOCTYPE ...
python3-xlwt-Excel设置表格基础(字体颜色背景颜色设置边框边框颜色冻结窗口字体大小字体高度字体加粗下划线斜体字单元格对齐方式自动换行删除线超链接插入公式)
文章目录引入xlwt和创建workboos对象初始化样式和创建设置字体,赋值给style 保存文件自定义样式字体颜色背景颜色设置边框边框颜色冻结窗口字体大小字体高度字体加粗下划 ...
php如何把文字加粗,HTML中如何将字体加粗
在HTML中要将字体加粗我们有两种方法,一种是利用b标签:另一种是利用strong标签,本篇文章我们就来介绍一下HTML中b标签和strong标签的用法. b标签和strong标签虽然都是可以让字体加 ...
Qt将选中的字体加粗下划线
QTextCharFormat fmt; //需要头文件 #include <QTextEdit>fmt=ui->txtEdit->currentCharFormat(); / ...
IOS 文本文字下面添加下划线
2019独角兽企业重金招聘Python工程师标准>>> UILabel *infolabel = [[UILabel alloc] initWithFrame:CGRectMake( ...
HTML文字加粗、下划线、倾斜、删除线：文本格式化标签
HTML 文本格式化标签需求:让文字加粗.下划线.倾斜.删除线等效果代码: 标签说明 b 加粗 u 下划线 i 倾斜 s 删除线标签说明 strong 加粗 ins 下划线 em 倾斜 d ...
css div里引用em字体会变斜体_CSS文字加粗斜体[解决代码]
CSS如何给文字加粗,这是小白常见的问题,今天俺跟大家总结分享. 标签解决办法一般老的浏览器可能会使用类似或来加粗文字用来设置斜体,例如以下代码: 加粗字体加粗字体斜体但是此办法语义化不是很好 ...
HTML常见的处理文本的标签，比如说加粗啦、斜体啦等等等。。。
HTML文本格式化标签一般情况下, 如果我们想给文本进行加粗处理,在html中,我们使用<b>标签. 如果我们想给文本进行斜体处理,在html中,我们使用<i>标签. 并且, ...
在php中如何打印粗体字,ps文字加粗在哪里
ps文字加粗的方法:1.可以选择浑厚和平滑加粗:2.仿粗体,点击"切换字符和段落面板",并点击第一个T:3.使用[图层样式-描边]来完成效果:4.使用滤镜来调整:5.使用编辑描边的 ...

学习整理Fabric.js 实现文本文字加粗、下划线、斜体、竖排、字体对齐代码

原图

效果图

代码

index.html

script.js 代码

学习整理Fabric.js 实现文本文字加粗、下划线、斜体、竖排、字体对齐代码相关推荐

最新文章

热门文章