如何在画布内绘制文本框答案

【问题标题】：how to draw text box inside the canvas如何在画布内绘制文本框
【发布时间】：2013-04-17 05:13:44
【问题描述】：

我需要画布内的文本框。是否可以在画布内绘制文本框？？

喜欢：

<canvas>
<input type="text">
</canvas>

我不想这样回答：

<canvas style="background-color:blue;height:100px;width:100px">
</canvas>
<input type="text" style="z-index:101; position:absolute; top:10px; left:10px;"/>

可以使用javascript在canvas标签内绘制文本框吗？

【问题讨论】：

你可以看看raphaeljs.com
后面的代码是你的做法。你能具体说明你不想使用它的原因吗？
我检查了raphaeljs.com，但我找不到更合适的。如果您已经使用过。请指定函数名称。
参考这个stackoverflow.com/questions/9778314/…
参考此链接获取帮助stackoverflow.com/questions/9778314/…

标签： javascript jquery html canvas

【解决方案1】：

没有。这是不可能的。

如果你想要这样的文本框，那么你的答案是：

完全按照你展示的方式使用 CSS
- 创建一个文本框类，绘制一个矩形和一个闪烁的光标
- 使用手写碰撞检测来跟踪它的点击时间
- 检测到冲突时注册和取消注册键盘事件
- 根据输入绘制和清除文本
- 创建一个速率限制器，以便按键不会触发太快
- 在keyup 上监听“回车”或“退格”键以添加另一行，或删除当前文本
- 在框内添加一个额外的点击侦听器，当它已经有“焦点”时，尝试根据检测到的点击确定“光标”（您发明的）在字符串方面的位置画布中的位置，与矩形在画布中的位置相比，加上矩形起点和文本起点之间的“填充”，加上字符串的计算宽度
- 如果点击的X和Y高于矩形的X，加上文本开始前的padding，但低于矩形的X，加上padding，加上文本宽度，那么你需要循环遍历并测量文本，一个字符一个字符，直到你找到“最适合”考虑“光标”的位置，进行下一轮编辑......它必须使用鼠标和键盘作为输入，你必须自己创建和注册活动...

与 CSS 相比，这需要大量工作。

所以从技术上讲，是的，如果你愿意编写可能是数百行未压缩代码的东西，你可以制作类似于的输入框，来做与你相同的事情'如果你只使用 C++ 在空屏幕上绘制支持鼠标/键盘的文本框...

但是你不能添加 DOM 元素并让它们成为画布的一部分，包括它们的所有事件和自然行为。

那里有一些库可能会有所帮助，但我不明白您为什么要在没有充分理由的情况下完成所有这些工作。

【讨论】：

只是添加到您选择 nr 时必须实施的列表中。 2：处理delete、end、home、在行尾按delete、在行首按退格、使用半透明方块和shift+箭头高亮、ctrl+c、ctrl+v、shift+home、shift+结尾。这真的是很多工作。
方法 2 的一个非常可靠的实现是 Google Docs。最快的方法是观察斜体插入符号是倾斜的，这在 CSS 中是不可能的。另一个效果是，如果您使用触控板快速缩放，文档中的文本会在一瞬间变得模糊。您还可以检查 DOM 以查看它是否是 Canvas，并且在隐藏 Canvas 时内容会消失。这是一部了不起的作品。

【解决方案2】：

试试这个网站在画布上绘制文本框组件。它不是 CSS 或 HTML，小 javascript。它解释了所有关于画布中的文本。 CanvasInput - HTML5 Canvas Text Input

【讨论】：

【解决方案3】：

您可以使用此库在画布中创建输入文本字段。它不像 html/css 文本框那样锐利，但它是一个好的开始。

https://goldfirestudios.com/canvasinput-html5-canvas-text-input

【讨论】：

【解决方案4】：

一种解决方法是...我认为以下解决方案效果很好，尽管您无法在 Canvas 内的文本框中键入内容，但您可以使用单独的文本框并将该文本应用于画布内的文本区域 @ 987654321@.

【讨论】：

这只会呈现静态文本，无法输入或编辑任何内容。
@JanBrus 这正是我在评论中所说的“您可以使用单独的文本框并将该文本应用到画布内的文本区域”