>>{21::gr07}{班のページに戻る} !!! 分担 : mainの記述・テスト・進捗管理 :: 浅沼　福田 : 移動・大きさ変更・作成画面ズーム :: 福田　山口 : 図形の追加・図形の削除 :: 浅沼　奈良岡　山口 : テキストの入力・テキストボックスの追加 :: 上野　木下　福田 : 保存 :: 木下　奈良岡 !!! 進捗報告 必要に応じて進捗状況を記入してください((br)) 日付や具体的な実装方法を分かる範囲でいいので書いてください((br)) 助けを求める場合は早めにすること!!((br)) 参考URL乗せるだけでもいいしコード解読丸投げでもよか((br)) !! mainの記述・テスト・進捗管理 参考サイト((br)) https://app.diagrams.net/ 7/2((br)) 図形の上にカーソルが乗ったときその図形を選んでいると分かるようにするにはid取得からaddEventlistener('mouseover', () => {　色の変更を記述}, false);からのmouseleaveでもとの色に戻すのをできる。取得したIDを格納した変数.style.background = '色の値';で変更可((br)) !! 移動・大きさ変更・作成画面ズーム 06/25((br)) 「svg画像のドラッグに関するライブラリ」((br)) ̶h̶t̶t̶p̶s̶:̶/̶/̶g̶i̶t̶h̶u̶b̶.̶c̶o̶m̶/̶s̶v̶g̶d̶o̶t̶j̶s̶/̶s̶v̶g̶.̶d̶r̶a̶g̶g̶a̶b̶l̶e̶.̶j̶s̶?̶f̶i̶l̶e̶s̶=̶1̶ 7/9((br)) 「SVG画像のドラッグ」((br)) https://www.gesource.jp/weblog/?p=7629 7/2((br)) 拡大縮小の方策の一つはid取得からそれぞれの図形のwidth,height,cx,cyだのなんだのの値を動かしたらどのように変化するかを計算してdocument.setAttributeをjsに記述して強引に変更する仕方。図形ごとに値を変更する関数を作るしかないかなぁと思っておる。setAttributeする要素はそれぞれの図形で異なるので。setAttributeには色の変更もできるので背景色くらいは変更できる。ボタン押したとき的なやつは。((br)) 【カーソルが要素内に侵入するときに実現される関数】((br)) pointerover　addEventlistener('pointerover', (event) => {});を使ってやる((br)) onpointerover document.onpointerover = (event) => { }; !! 図形の追加・図形の削除 参考サイト((br)) svg要素の基本的な使い方まとめ((br)) http://defghi1977.html.xdomain.jp/tech/svgMemo/svgMemo.htm !! テキストの入力 6/25((br)) foreignObjectタグがhtmlにあってそれを使うっぽい。foreignObjectを調べると他の単語が芋づる式に出てくるので現段階では言うことはないです。((br)) 7/2((br)) 作成した図形ごとにforeignObjectタグが書かれている。 これをすることで文字にかぶさった状態でクリックしても反応しないようになる。 ダブルクリックすると初めて文字情報の変更ができるようになっている。((br)) 【方法１】contenteditable = "true"属性の追加によってdivのテキスト入力を受け付けるようになる。diagram.netはそんなことはしていない。属性の追加はid取得からsetAttributeによって実現する。((br)) 7/09((br)) svgの要素に文字を書くことができるかもしれない。可能に思わせてくれるサイト。((br)) https://tarepan.hatenablog.com/entry/svgcontenteditable テキスト入力に関してイタリック体にしたり文字色の変更したりできるサンプルが見つかったのでそれをフュージョンできなかったけど一応作りましたみたいな感じでかさ増し発表も検討してもよろしいかもしれません。サンプルは自分のlocalにおいてある。 !! 保存 7/2((br)) ①画像を作成→②画像を保存　の2段階で作成した((br)) gitのsaveにあるので試してみてください((br)) （他の保存の仕方は余裕があればやります）