当前位置:网站首页>Fabric.js 动态设置字号大小
Fabric.js 动态设置字号大小
2022-07-02 11:08:00 【德育处主任】
本文简介
点赞 + 关注 + 收藏 = 学会了
<br>
本文使用 Fabric.js
的 IText
演示。如果你还不懂 Fabric.js
,我墙裂推荐你阅读 《Fabric.js从入门到精通》。
<br>
一图胜千言,先看看图我们再写作文~
<br>
<br>
分析
需求
从上图可以看出以下功能需求:
- 文本被选中后才能修改字号
- 整体修改字号
- 修改被选中的几个字的字号,没被选中的不进行修改
<br>
解决思路
- 获取被选中的文字:
canvas.getActiveObject()
。 - 是否只选中一部分文字:
- 我通过编辑状态来判断是否只选中一部分文字:
isEditing
。 - 修改被选中文字的样式:
setSelectionStyles({...})
。
- 我通过编辑状态来判断是否只选中一部分文字:
- 修改
fontSize
属性。 - 如果是全文修改,还要判断是否有些字符在自身设置了
fontSize
,如果文字自己设置了fontSize
,那全文设置的权重没独立设置的那么高。
<br>
<br>
编码
<input type="range" min="5" max="150" value="40" id="size" onchange="changeSize(value)"><canvas id="c" width="300" height="300" style="border: 1px solid #ccc"></canvas><script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/521/fabric.js"></script><script> const canvas = new fabric.Canvas('c') const iText = new fabric.IText('hello world') canvas.add(iText) function changeSize(value) { let activeTxt = canvas.getActiveObject() if (!activeTxt) return if (activeTxt.isEditing) { // 编辑状态 activeTxt.setSelectionStyles({ 'fontSize': value}) } else { activeTxt.fontSize = value let s = activeTxt.styles // 遍历行和列 for(let i in s) { for (let j in s[i]) { s[i][j].fontSize = value // 针对每个字设置字号 } } activeTxt.dirty = true } canvas.renderAll() }</script>
使用 isEditing
判断当前是否进入编辑状态,我是根据编辑状态下是否有选中文字来修改字号大小的。
最后有2层循环:
for(let i in s) { for (let j in s[i]) { s[i][j].fontSize = value }}
第一层循环 i
是行数的遍历;第二层循环 j
是当前行的文字的遍历。
这么做是因为如果只使用 setSelectionStyles
设置字号大小是无法覆盖每个字本身被设置的 fontSize
。所以还是需要循环一遍,保证每个字都修改到位。
<br>
设置字号大小的例子还可以用在上标和下标里,比如 《Fabric.js 上标和下标的使用偏方》 一文中的用法。上标和小标适应用在合在数学公式和化学符号等场景。
<br>
<br>
代码仓库
<br>
<br>
推荐阅读
《Fabric.js 锁定背景图,不受缩放和拖拽的影响》点赞 + 关注 + 收藏 = 学会了
边栏推荐
- < schematic diagram of oral arithmetic exercise machine program development> oral arithmetic exercise machine / oral arithmetic treasure / children's math treasure / children's calculator LCD LCD driv
- 无主灯设计:如何让智能照明更加「智能」?
- Certik released the defi security report in 2021, disclosing key data of industry development (PDF download link attached)
- 由粒子加速器产生的反中子形成的白洞
- C语言高级用法--函数指针:回调函数;转换表
- Getting started with QT - making a simple calculator
- [to be continued] [UE4 notes] l5ue4 model import
- 你知道Oracle的数据文件大小有上限么?
- The evolution process of the correct implementation principle of redis distributed lock and the summary of redison's actual combat
- Just 1000 fans, record it
猜你喜欢
The conference on the growth of all things was held in Hangzhou, and dangbei was selected into the top 100 list of future unicorns in China in 2022
测试框架TestNG的使用(二):testNG xml的使用
Origin plots thermogravimetric TG and differential thermogravimetric DTG curves
BeanUtils -- shallow copy -- example / principle
STM32-DAC实验&高频DAC输出测试
php链表创建和遍历
Analysis of CPU surge in production environment service
In 2021, the global TCB adapter revenue was about $93 million, and it is expected to reach $315.5 million in 2028
你知道Oracle的数据文件大小有上限么?
Selenium, element operation and browser operation methods
随机推荐
Using computed in uni app solves the abnormal display of data () value in tab switching
默认插槽,具名插槽,作用域插槽
Story points vs. human days
Golang quickly generates model and queryset of database tables
Available solution development oral arithmetic training machine / math treasure / children's oral arithmetic treasure / intelligent math treasure LCD LCD driver ic-vk1622 (lqfp64 package), original te
Development skills of rxjs observable custom operator
c# 水晶报表打印
Systemserver process
Everyone believes that the one-stop credit platform makes the credit scenario "useful"
<口算練習機 方案開發原理圖>口算練習機/口算寶/兒童數學寶/兒童計算器 LCD液晶顯示驅動IC-VK1621B,提供技術支持
腾讯云 TStor 统一存储通过信通院首批文件存储基础能力评测
2022 home projector preferred! Dangbei F5 brings the ultimate audio-visual experience with its powerful audio-visual effect
没有从远程服务器‘‘映射到本地用户‘(null)/sa‘的远程用户‘sa‘及服务主密码解密错误的解决办法
uniapp自动化测试学习
Mysql5.7 installation super easy tutorial
PHP linked list creation and traversal
PyQt5_QScrollArea内容保存成图片
联合搜索:搜索中的所有需求
Codeforces Round #803 (Div. 2)(A~D)
Quick analysis: easy to share the Internet