「Paint」タグの記事が6件件あります

前回までのUIからは一旦離れて、PaintShopのエアーブラシみたいな機能のみのFlashを書いてみました。以下のページ上でマウスをドラッグをすると赤色の線が引けます。

今回はBitmapクラス周辺の使い方を練習してみましたが、結構知らないことがあり勉強になりました。今回のプログラムは結構雑な作りになってしまったので、後日手直ししてみよう。

今記事で4回目ですねー。デモは以下のページに用意しました。

今回の主な追加機能は、前回の改善点にも含まれていた (1)長方形と楕円描画ツールへの「塗りつぶし」機能 (2)各描画図形間のレイヤー（重なり具合）移動機能 です。あと少しインスタンスの生成を押さえた処理に変更したので若干パフォーマンスが上がっているかと思います（約1割弱）。 まず、(2)のオブジェクト間の階層（レイヤー）移動機能ですが、これは描画した図形上で右クリックを押すことで呼び出せるコンテキストメニューから使えます（下図）。 この機能で図形の重なり順序を調節することが出来ます。また、「配置」ツールで図形を選択するとその図形は自動的に最前面レイヤーに移動されます。これによって、マウスイベントの発生源を図形毎に持たせても、重なり具合によるイベントの取りこぼしか無くなる利点があります。結果、OOPにある程度沿ったプログラミングを行うことを可能にします。 ちなみにこのレイヤー移動アクションは履歴には記録せずundo、redoの対象にはしませんでした（このレベルのアプリに対しては必要ないかと思ったので）。もし貼り絵のように絵を描きたく、またundoを利用していきたい場合はPhotoshopやGIMP等の明確なレイヤー機構を実装したほうがすっきりすると思います。内部機能の実装の手間はさほど掛かりませんが、ツールボックスのようなUIを作らなくてはいけないのが今の私にとってメンドイところです。しかしFlexコンポーネントを学ぶ良い機会でもあるのでさわりだけでもやってみようかな。 こう機能が増えてくるとユーザインターフェース(UI)にもしっかり取り組まなければならないんですが、UIはリリースするプラットフォーム（PCデスクトップ上、PCブラウザ上、モバイル、スマートフォン）に依存する部分が大きいのでまだ取り掛かるのはいいかなと思ったり（ぉぃ）。 さて、今回で基本的なブラシツール（ベクター以外）は揃ったかと思いますので、そろそろテキスト系の機能を実装していきたいと思います。初回に「頭の中のアイディアを楽しくまとめられるツールを作ってみたい」とのたまっていたので、ちょっとチャレンジしてみます。合わせてベクターツールも追加してみます。

作り込んでいく内に、Flashのレイアウトとファイルサイズが大きくなったので、下記のページに用意しました。

今回追加した機能は大きく分けてタイトルに書かれている2つです。 描画できる図形の種類を直線、長方形、楕円に増やしました。また、描いた図形を任意の場所に移動することが出来ます（「配置」ボタンをクリック後、図形をドラッグ＆ドロップ）。そして、配置移動も履歴に残しているのでUndo、Redoの対象になります。 以下は作成後の反省点の一部の走り書き。

問題点や改善点​

• 図形の描画やオブジェクトのD&Dの際に、線分上に薄い青のエフェクトをかけると爽快感＋視認性が上がるかなぁと試してみたんですが、実装したら煩わしい感じになってしまいました。エフェクトのON/OFFのチェックボックスをつけておこう。
• 図形オブジェクトがD&Dでキャンバスのサイズ外に出てしまう。Flexコンポーネントの親子関係や背景色の設定し忘れ等からくる問題だと推測。
• 描画ツールのボタンは押し込み式にして、選択しているツールを分かりやすくしよう。レイアウトいじるのは後回しになりがちだなぁ。
• 長方形と楕円ツールは塗りつぶし設定の追加やShift+ドラッグ描画で正方形と円を作成できるようにしておこうかな。
• 複数の図形が重なった際のドロップ処理の再考。

undo、redoのボタンをFlexコンポーネントのButtonクラスを用いて作成してみました。

お絵かきと銘打っていますが絵がかけるのはあくまで一機能で、最終的には頭の中のアイディアを楽しくまとめられるツールを作ってみたいと今は考えています。 まぁ最初は単なるペイントツールの機能を実装していきます。 さて、1回目は定番というか基本というかUndo（元に戻す）とRedo（やり直し）機能を実装してみました。 以下のFlash上でドラッグ＆ドロップすると青い線を引けると思います。

以前、3D-MindMapみたいなソフトを作ろうと思ってJava3Dをかじったのですが、現在はAPIが標準ライブラリに含まれていないので、制作物の配布がやりずらそうだなぁと、それじゃDirectXかOpneGLあたりでゴリゴリ書こうかなと当初は思っていました。

しかし、AS3になって実行速度がある程度改善されたのと、文法がすっきり（Javaに似てる）しているのでとっつき易そうだなと思い、AS3を始めました。それに、ブラウザというある種の共通の環境で動作すのが良いかと考えました。

さて手始めに早速一つ、マウスでドラックしている間、線を描くFlashです。