之前引入了 opentype.js 库做字体解析,有了这个打底的话,就可以快乐地做一些简单文字排版功能了。
周末努了把力,给 Suika 图形编辑器加上了 手动回车换行 的支持。
解除了之前只能输入一行的限制,现在可以输入多行了。
渲染上是根据换行符\n,将内容字符串切割成多个子字符串,解析成多组的 glyph,然后每一行都 y 方向上偏移行高的距离。
数据结构上抽象了一个 Paragraph 段落类,维护好 glyphs 字形数组,二维的,并提供各种 API,比如根据选区起始和结束索引值,返回选区矩形数组。
交互上改造是有点大,定位要考虑 y 方向的影响,加上了上下方向键的处理。
suika 图形编辑器 github 地址:
线上体验:
还是来看看交互效果吧。
效果演示
输入文本以及回车:

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

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

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

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