HOME

canvas 要素、テキストエリア作成テスト-A

{ svg, javascript で作成したプログラム一覧 }

推奨 ブラウザ : chrome

2017/07/16

2017/07/19

2017/07/21

canvas 要素にテキストデータを出力するテスト。
canvas 要素でテキストエリア(テキストエディタ)を作成するテストAです。

前回、canvas 要素上のマウス座標を取得して、描画するために作成した、
object の当たり判定などをやりました。
{ canvas 要素のマウス座標(位置)の取得 A }
そのプログラムを作成していて、文字情報を object に格納してしまえば、
canvas 要素で、テキストエリアが出来るのではないかと思い、試してみました。

このプログラムも、描画する際、なるべく最小範囲(矩形)を描画、再描画するようにしました。
文字を一文字入力すると、入力文字の位置から、改行、又は文末までを再描画。
文字列選択など、出来てないところもあります。。。
このプログラムでは、キャレットにテキストボックスの幅を 1px で配置して、
キャレット ( テキストボックス ) に入力された文字を canvas に出力しています。
ショートカットキー、日本語入力等、対応できていない箇所が沢山あったりします。。。_( _´ω`)_

2017/07/16
canvas 要素で作成したテキストエディタ ( テキストアリア ) 作成しました。
動作確認は chrome, 入力は半角英数字のみです。
これも、上と同じで、キャレットにテキストボックスを使用しています。
前回との違いは、 window のキーイベントを監視して、
値を出力しているところです。
テキストボックスで作成したキャレットを span に置き換えてみたところ、
ショートカットキー Ctrl + A のテキスト選択で、
canvas 要素外のテキストまで選択してしまうことが分かりました。
いくつか試したのですが、canvas 要素のテキストだけを
選択する方法が見つかりませんでした。
なので、キャレットにしたテキストボックスにフォーカスを当てることで、
canvas 内のテキストすべてを選択しています。
あと、前回のはショートカットキーの処理には手を付けていなかったので、
ショートカットキーの処理を追加しました。

2017/07/17
タブの処理追加、Firefox, IE, Edge でも動作するようにしました。

2017/07/19
入力した文字列の幅、高さが canvas 要素の幅、高さを超えた場合、
canvas 要素内に収まるようにしました。
スクロールバーが表示されている状態で、
フォーカスをキャレット(テキストボックス)に移すと、
スクロールバーの挙動がおかしくなったり、
キャレットの位置へcanvas要素が自動的にスクロールされることが分かりました。
なので、テキストボックスで作成したキャレットを span に置き換えました。

2017/07/22
テキストエディタでキャレットが複数出現するコマンド?
Ctrl + テキストエリアクリックで、複数行の編集が一度にできる機能。。。
マルチエディット?
マルチカーソル?
マルチキャレット!!を、
再現してみました。
おおまかな動作のみで、
対応できていないところが沢山あります。。。_( _´ω`)_

数学の勉強をやり直ししてたりします。_´ω`)_