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

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

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

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

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

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

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

suika 图形编辑器 github 地址:

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

线上体验:

f-star.github.io/suika/

还是来看看交互效果吧。

效果演示

输入文本以及回车:

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

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

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

结尾

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

相关推荐
+VX:Fegn08956 小时前
计算机毕业设计|基于springboot + vue蛋糕店管理系统(源码+数据库+文档)
前端·数据库·vue.js·spring boot·课程设计
Nicander7 小时前
我给 Excalidraw 做了一个本地工作区:DrawSpace
前端·开源
linux_cfan9 小时前
17 · 引擎适配器全景:HLS/DASH/Vimeo/Mux/Cast
前端·javascript·音视频
计算机魔术师10 小时前
烧掉2780亿美元还不够?OpenAI的资本豪赌让人头皮发麻
前端
IT_陈寒10 小时前
Java线程池用错参数,我的服务居然悄悄崩溃了
前端·人工智能·后端
卡布鲁11 小时前
React useMemo 与 useCallback 完全指南:原理、场景与避坑
前端·react.js
碳基修炼11 小时前
排查记:本地 devServer 是 http,浏览器却把 302 重定向升级成了 https
前端·http
步行cgn11 小时前
Spring p 命名空间注入详解
java·前端·spring
何何____11 小时前
Vue 生命周期详解
前端·javascript
江米小枣tonylua11 小时前
TypeScript 全面の拥抱 !Prisma 8 + Electron 升级实战
前端