Networking)もどきのUIをHTML5のCanvasを利用してデモプログラムを作成してみることにしました。このシリーズは3回に分けて公開します。Serverならなんでも可)ブラウザはChrome作成する流れ固定の文字と画像をStage上に配置する配置した画像に対してEventListenerを定義する固定画像をmousedownイベントでコピーを作成し、clickイベント(マウスボタンアップ)時に有効範囲であれば図形を追加し、範囲外であればドラッグ中の図形を削除する緑のエリア内の図形をダブルクリックすることで、内部的に選択状態にし、もう一方の図形をダブルクリックで2画像間に連結線を描画する緑のエリア内の図形をDragする際に連結線が描画されている場合はマウスドラッグに合わせて連結線も再描画させるCANVASを作成し、固定の文字と画像をStage上に配置する1つのStageを2ペインに内部的に分割して、緑のエリアを機器構成定義エリア、右のエリアにはオリジナルを配置するエリアとして見立てます。400);stage.addChild(_line);次に固定の文字と画像を右側のエリアに配置してみます。Dragstart)と定義するようです。mousedownイベントでオリジナル画像の複製を作るDragstart関数の中で、オリジナル画像を選択した場合は、click開始と同時にcreateBitmap関数を呼び出して複製を作成し、mouseの動きに合わせて画像をDragさせる。});}ここまででこんな感じ2画像間に連結線を描画するダブルクリックイベントで取得した1つ目の画像オブジェクトの名前をlocalStorageへ保存しておき、2つ目の画像オブジェクトの名前と比較して同一でなければ1つ目の画像の中心座標から2つ目の画像の中心座標へlineToを使って線を描画します。//親子間の連結線状態をlocalstorageに保存しておく。true;}ここまででこんな感じ。それっぽく見えてきた感がありますね。マウスドラッグに合わせて画像と連結線を再描画させるcreateBitmapで複製された画像にはEventListenerが定義してあるので、今のままだと画像はドラッグ&ドロップはできますが、連結線は当然何も処理を入れていないので置き去りになります。(下記画像を参照)なので、画像ドラッグ時のpressmoveイベントの中に連結線の再描画処理を加えます。(素人なので、強引にlocalStorageをフル活用して対応しています。//ここから連結線の処理を追加する。//ここまで連結線の処理を追加する。});これで画像のドラッグに合わせて連結線も再描画され自由に移動させることができました。配置後の画像オブジェクトのドラッグ&ドロップ(連結線も連動)デモはこちら(完成度は低いです)シビアなイベントハンドリングをしていないので、やさしくゆっくりと動作させてくださいwまとめ次回はもう少し処理を追加したいと思います。552,956まだプロフィールが設定されていません。リモート】クラスメソッドの会社説明会を開催しますクラスメソッドでは、AWS・AI・ビッグデータ・モバイルなどの技術職や営業のメンバーとして一緒にお仕事をする仲間を大募集しています。#cmdevio新型コロナウイルスの感染拡大を受け、本イベントを延期させていただくことになりました(開催時期未定)。お申し込みいただいた皆様には大変申し訳ございませんが、何卒ご理解いただけますようよろしくお願いいたします。AWSについてライトに色んな情報交換をしましょう。クラスメソッド株式会社が運営するAWS・iOS・HTML5に関する技術情報サイトです。