2021 ソフトウェア設計及び演習用の班Wiki

メインモジュール【main.html】【浅沼】

• 図形追加モジュール【add.js】【浅沼、福田、山口】
  • addrect():処理を表す長方形を追加する関数。
    divを作成しクラス名はdrag-and-dropとする。
    svgを作成したdivの子要素とする。
    長方形の情報を作成したsvgとして登録する。
    作成したdiv要素にはクリックをイベントリスナとして登録する。
• 図形移動モジュール【add.js】【move.css】【浅沼、山口、福田】
  • drag-and-dropクラスを取得
  • mdown()
    ・図形の要素内でのみ動くよう指定
    ・クラスにdragを追加して要素の相対座標を取得
    ・mmove関数へコールバック
    
  • mmove()
    ・ドラッグしている要素を取得
    ・マウスとタッチの差異を考慮して要素のtop,leftに反映
    ・マウスボタンが離されたときにmup関数へコールバック
    
  • mup()
    ・ドラッグしていた要素のイベントmousemove,mouseupを削除しdragというクラス名も消去
• 図形保存モジュール【save.js】【木下、奈良岡】
  ・クリックをイベントリスナとして登録しaエレメントを作成。
  ・画像の保存形式はpngとする。
• 図形削除モジュール【add.js】【浅沼、奈良岡、福田】
• 文字追加モジュール【add.js】【木下、上野、福田】
  ・divを作成しクラス名はdrag-and-dropとする。
  　contenteditable=tureのdivを作成したdivの子要素とする。
  　作成したdiv要素にはクリックをイベントリスナとして登録する。

• 変更後