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 に答える
-2

1 つの回避策はこれです...次の解決策はうまくいくと思いますが、キャンバス内のテキスト ボックスに入力することはできませんが、別のテキスト ボックスを使用してそのテキストをキャンバス内のテキスト領域に適用することができますhttp:// www.html5canvastutorials.com/tutorials/html5-canvas-wrap-text-tutorial/ .

于 2016-12-05T23:29:35.107 に答える