7

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

喜欢：

<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 在画布标签内绘制文本框吗？

4

4 回答 4

14

不，这是不可能的。

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

  1. 完全按照您展示的方式使用 CSS

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

与 CSS 相比，这是很多工作。

所以从技术上讲，是的，如果你愿意编写可能是数百行未压缩代码的东西，你可以做一个输入框之类的东西，做你画鼠标时会做的同样的事情/只使用 C++ 的空屏幕上的支持键盘的文本框...

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

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

于 2013-04-17T05:21:17.363 回答
3

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

于 2013-11-04T10:16:42.910 回答
1

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

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

于 2020-10-22T03:13:56.780 回答
-2

一种解决方法是...我认为以下解决方案效果很好，尽管您无法在 Canvas 内的文本框中键入内容，但您可以使用单独的文本框并将该文本应用于画布http://内的文本区域www.html5canvastutorials.com/tutorials/html5-canvas-wrap-text-tutorial/。

于 2016-12-05T23:29:35.107 回答