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

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

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

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

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

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

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

suika 图形编辑器 github 地址:

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

线上体验:

f-star.github.io/suika/

还是来看看交互效果吧。

效果演示

输入文本以及回车:

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

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

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

结尾

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

相关推荐
崔庆才丨静觅16 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby606117 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了17 小时前
「2025 年终总结」在所有失去的人中,我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅17 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅17 小时前
5分钟快速搭建 AI 平台并用它赚钱!
前端
崔庆才丨静觅18 小时前
比官方便宜一半以上!Midjourney API 申请及使用
前端
Moment18 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅18 小时前
刷屏全网的“nano-banana”API接入指南!0.1元/张量产高清创意图,开发者必藏
前端
剪刀石头布啊18 小时前
jwt介绍
前端
爱敲代码的小鱼18 小时前
AJAX(异步交互的技术来实现从服务端中获取数据):
前端·javascript·ajax