canvas画布上文字输入如何控制输入到画布边缘自动换行

Question

需求: 在canvas上实现文字输入

实现想法: 在 canvas 上有一个绝对定位的 input, 在鼠标点击设置 input 的 left, top, width; 开始文字输入, 在 input blur 事件读取 input 的值, 把文字画在canvas相同的位置上。

问题: input是固定宽的，可以一直录入超过原本input的宽度的文字长度。那么，该如何处理文字输入到画布边缘自动换行？

Answer 1

需要做一个模型。
根据文字的长度自动断开为数组，然后创建新的文字行，进行错位渲染。

Answer 2

const text = ctx.measureText("Hello world")
console.log(text.width);

宽度自己算一算

也可以去 GitHub 找找相关的库, 例如:

• https://github.com/geongeorge...
• https://github.com/namniak/ca...