Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What are the problem?

Flash Advent Calendar 13日目 - テキスト入力の再現方法 -

Flashでは任意の箇所にテキスト入力ができます。
ただ、Canvasは画像なので、テキスト入力には対応していません。
なので、HTMLのTextAreaを駆使して再現する必要があります。

方法を記載すれば、なんだ、そんな事かとなるのですが
派手な実装ではないのと意外と管理が面倒なので、後回しにされがちです。

目次

  • テキストエリアにヒットした時にマウスのカーソルを変化させる
  • 発火するイベントは全て移植する

テキストエリアにヒットした時にマウスのカーソルを変化させる

スマホでは見れないのですが、PCだとここが記入エリアだよって事が分かりやすので
意外と必要な機能でした。

  1. MOUSE_MOVEで座標情報取得して、エリア内の座標が入ったらカーソルを変えて
  2. MOUSE_DOWNでTextAreaをCanvasの上に透過して設置して文字の入力を行えるようにする
  3. エリアから外れると、TextAreaを削除してカーソルを元に戻します。

2020-12-16-224830.gif

発火するイベントは全て移植する

FlashでTextFieldクラスに定義されてるイベントは全て移植してcanvasに反映する
文字制限などあれば入力のイベントの度に文字データを受け取り処理を行い、またTextAreaに結果を反映していく

例)入力制限a-zのみ入力可能

textField.restrict = "a-z";

2020-12-16-230014.gif

便利な機能なのですが、意外と日の目をみない機能なので
せめてここで披露したいと思い記事にしました。

明日はWebSocketのハンドシェイクをエミュレートした話を書こうと思います。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
0
Help us understand the problem. What are the problem?