Suika图形编辑器的文字支持手动换行了

之前引入了 opentype.js 库做字体解析,有了这个打底的话,就可以快乐地做一些简单文字排版功能了。

周末努了把力,给 Suika 图形编辑器加上了 手动回车换行 的支持。

解除了之前只能输入一行的限制,现在可以输入多行了。

渲染上是根据换行符\n,将内容字符串切割成多个子字符串,解析成多组的 glyph,然后每一行都 y 方向上偏移行高的距离。

数据结构上抽象了一个 Paragraph 段落类,维护好 glyphs 字形数组,二维的,并提供各种 API,比如根据选区起始和结束索引值,返回选区矩形数组。

交互上改造是有点大,定位要考虑 y 方向的影响,加上了上下方向键的处理。

suika 图形编辑器 github 地址:

github.com/F-star/suik...

线上体验:

f-star.github.io/suika/

还是来看看交互效果吧。

效果演示

输入文本以及回车:

按住鼠标拖拽选中多个连续文字:

按下方向键改变光标的位置:

按住 shift 键,再按下方向键,可以实现字符连选。

结尾

目前还比较简单,之后有空再加上自动换行、设置字距、行高、对齐等功能。

相关推荐
Hilaku2 小时前
我用 Gemini 3 Pro 手搓了一个并发邮件群发神器(附源码)
前端·javascript·github
IT_陈寒2 小时前
Java性能调优实战:5个被低估却提升30%效率的JVM参数
前端·人工智能·后端
快手技术3 小时前
AAAI 2026|全面发力!快手斩获 3 篇 Oral,12 篇论文入选!
前端·后端·算法
颜酱3 小时前
前端算法必备:滑动窗口从入门到很熟练(最长/最短/计数三大类型)
前端·后端·算法
全栈前端老曹3 小时前
【包管理】npm init 项目名后底层发生了什么的完整逻辑
前端·javascript·npm·node.js·json·包管理·底层原理
HHHHHY3 小时前
mathjs简单实现一个数学计算公式及校验组件
前端·javascript·vue.js
boooooooom3 小时前
Vue3 provide/inject 跨层级通信:最佳实践与避坑指南
前端·vue.js
一颗烂土豆3 小时前
Vue 3 + Three.js 打造轻量级 3D 图表库 —— chart3
前端·vue.js·数据可视化
青莲8433 小时前
Android 动画机制完整详解
android·前端·面试
iReachers3 小时前
HTML打包APK(安卓APP)中下载功能常见问题和详细介绍
前端·javascript·html·html打包apk·网页打包app·下载功能