如何在画布内绘制文本框 [英] how to draw text box inside the canvas

问题描述

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

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

喜欢:

<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标签内绘制文本框?

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

推荐答案

否.这是不可能的.

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

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

1. 完全按照显示方式使用CSS

1. use CSS exactly the way you show

• 制作一个文本框类，它绘制一个矩形和一个闪烁的光标
• 使用手写的碰撞检测功能来跟踪单击的时间
• 在检测到冲突时注册和注销键盘事件
• 根据输入内容绘制和清除文本
• 创建一个速率限制器，以使键不会很快触发
• 在keyup上侦听"enter"或"backspace"键以添加另一行或删除当前文本
• 在已具有焦点"的框内添加一个额外的单击侦听器，以根据检测到的单击来根据字符串确定光标"(您发明的)应位于的位置与矩形在画布中的位置相比，在画布中的位置，再加上矩形的起点和文本的起点之间的填充"，再加上字符串的计算宽度，
• ，如果点击的X和Y高于矩形的X，加上文本开始之前的填充，但低于矩形的X，加上填充，加上文本宽度，则您需要遍历并测量文本，一个字符接一个字符，直到找到游标"所在位置的最佳匹配"，然后进行下一轮编辑……这必须使用鼠标和键盘作为输入，而您必须自己创建和注册事件...

• 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 keyup to 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...

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

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

因此，从技术上讲，是的，如果您愿意编写可能包含数百行未精简代码的代码，则可以制作类似于 的输入框，以执行与您相同的操作如果您是在空屏幕上使用C ++而不是其他任何东西来绘制具有鼠标/键盘功能的文本框，那该怎么办?

So technically, yes, you can make something that's like an 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++...

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

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

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

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.

这篇关于如何在画布内绘制文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！