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

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

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

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

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

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

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

suika 图形编辑器 github 地址:

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

线上体验:

f-star.github.io/suika/

还是来看看交互效果吧。

效果演示

输入文本以及回车:

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

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

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

结尾

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

相关推荐
2401_878454532 分钟前
HTML和CSS的复习2
前端·css·html
We་ct10 分钟前
吃透现代CSS全技术体系
前端·css·css3·sass·postcss·预处理器
ZC跨境爬虫10 分钟前
跟着 MDN 学 HTML day_11:(语义化容器全站重构+独立CSS拆分+字体合规引入)
前端·css·ui·重构·html·edge浏览器
ZC跨境爬虫13 分钟前
跟着 MDN 学 HTML day_10:(超链接核心语法+路径规则)
前端·css·笔记·ui·html·edge浏览器
GISer_Jing16 分钟前
AI原生前端工程化进阶实践:从流式交互架构到端云协同全链路落地
前端·人工智能·后端·学习
被考核重击19 分钟前
Vue响应式原理(下)
前端·javascript·vue.js
ZC跨境爬虫9 小时前
跟着 MDN 学 HTML day_9:(信件语义标记)
前端·css·笔记·ui·html
前端老石人9 小时前
HTML 字符引用完全指南
开发语言·前端·html
幼儿园技术家9 小时前
前端如何设计权限系统(RBAC / ABAC)?
前端
前端摸鱼匠11 小时前
Vue 3 的v-bind合并行为:讲解v-bind与普通属性合并的规则
前端·javascript·vue.js·前端框架·ecmascript