jQuery 如何在画布内绘制文本框

how to draw text box inside the canvas

提问by Arunkumar

i need text box inside the canvas. is it possible to draw textbox inside the canvas??

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

like:

喜欢：

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

i dont want answer like this:

我不想要这样的答案：

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

is possible to draw textbox inside the canvas tag using javascript?

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

回答by Norguard

No. It's not possible.

不，这是不可能的。

If you want text-boxes like this, then your answers are:

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

1. use CSS exactly the way you show

2. • make a text-box class, which draws a rectangle and a blinking cursor
   • keeps track of when it's clicked, using hand-written collision-detection
   • registers and unregisters keyboard-events when a collision is detected
   • draws and clears text, based on input
   • creates a rate-limiter, so that keys don't fire too quickly
   • listens for "enter" or "backspace" keys, on keyupto add another line, or erase the current text
   • add an additional click-listener inside the box, when it already has "focus", to try to figure out where the "cursor" (which you invent) should be, in terms of the string, based on the click's detected position within the canvas, compared to the rectangle's position in the canvas, plus the "padding" between the rectangle's starting point and the text's starting point, plus the string's calculated-width
   • and if the click's X and Y are higher than the rectangle's X, plus the padding before the text starts, but lower than the rectangle's X, plus padding, plus text-width, then you need to loop through and measure the text, character by character, until you find the "best-fit" for where to consider the "cursor" to be, for the next round of editing... which has to function using mouse and keyboard as inputs, of which you have to create and register the events yourself...

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

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

That's a LOT of work, compared to CSS.

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

So technically, yes, you can make something that's likean input box, if you're willing to write what might be hundreds of lines of unminified code, to do the same sort of thing you'd do if you were drawing a mouse/keyboard capable text-box on an empty screen using nothing but C++...

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

But you can not add DOM elements and make them a part of the canvas, complete with all of their events and natural behaviours.

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

There are some libraries out there which might help, but I'm not understanding why you'd want to go through all of this work, without a good reason.

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

回答by Vikas_web

Try this site to draw text box component on canvas. Its not CSS or HTML, little javascript. It explains all about text in canvas. CanvasInput - HTML5 Canvas Text Input

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

回答by Christopher Grigg

I think the following solution works well, although you can't type in the text box inside the Canvas you could use a separate text box and apply that text to the text area within the canvas http://www.html5canvastutorials.com/tutorials/html5-canvas-wrap-text-tutorial/.

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