如何在画布内绘制文本框

how to draw text box inside the canvas

本文关键字：绘制 文本 布内      更新时间：2023-09-26

我需要画布内的文本框。是否有可能在画布内绘制文本框??

: 

<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?

No。这是不可能的。

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

  1. 按照你显示的方式使用CSS

    • 创建一个文本框类，它绘制一个矩形和一个闪烁的光标
    • 记录点击的时间，使用手写的碰撞检测
    • 在检测到碰撞时注册和取消注册键盘事件
    • 根据输入
      • 绘制和清除文本
    • 创建一个速率限制器，这样键就不会触发得太快
    • 监听"enter"或"backspace"键，在keyup上添加另一行，或擦除当前文本
    • 在框内添加一个额外的点击监听器，当它已经有"焦点"时，试图找出"光标"(你发明的)应该在哪里，就字符串而言，基于点击在画布中检测到的位置，与矩形在画布中的位置相比，加上矩形起点和文本起点之间的"填充"，再加上字符串的计算宽度
    • ，如果点击的X和Y高于矩形的X，加上文本开始前的填充，但低于矩形的X，加上填充，加上文本宽度，那么你需要循环并测量文本，一个字符一个字符，直到你找到"最适合"的地方考虑"光标"，为下一轮编辑……它必须使用鼠标和键盘作为输入，你必须自己创建和注册事件…

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

所以从技术上讲，是的，如果你愿意写几百行未简化的代码，你可以让像这样的东西成为一个输入框，就像你在空白的屏幕上只用c++绘制一个具有鼠标/键盘功能的文本框一样。

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

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

尝试在画布上绘制文本框组件。它不是CSS或HTML，一点javascript。它解释了关于canvas中的文本的所有内容。Canvas - HTML5 Canvas Text Input

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

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

一个解决方法是…我认为下面的解决方案工作得很好，虽然你不能在画布内的文本框中输入，但你可以使用一个单独的文本框，并将该文本应用到画布内的文本区域http://www.html5canvastutorials.com/tutorials/html5-canvas-wrap-text-tutorial/.

相关文章：