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

21::gr07::進捗管理

archive mode

>>{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
「SVG画像の移動」((br))
https://www.codegrepper.com/code-examples/javascript/how+to+move+object+with+mouse+in+javascript
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
((br))
7/16((br))
図形を選択して削除することがまだです。((br))
ボタンでの削除は可能です。((br))

!! テキストの入力
6/25((br))
foreignObjectタグがhtmlにあってそれを使うっぽい。foreignObjectを調べると他の単語が芋づる式に出てくるので現段階では言うことはないです。((br))
7/2((br))
作成した図形ごとにforeignObjectタグが書かれている。
<foreignObject style = "overflow: visible; text-align: left;" pointer-events = "none" width = "100%" height = "100%">
これをすることで文字にかぶさった状態でクリックしても反応しないようになる。
ダブルクリックすると初めて文字情報の変更ができるようになっている。((br))
【方法１】contenteditable = "true"属性の追加によってdivのテキスト入力を受け付けるようになる。diagram.netはそんなことはしていない。属性の追加はid取得からsetAttributeによって実現する。((br))
7/09((br))
svgの要素に文字を書くことができるかもしれない。可能に思わせてくれるサイト。((br))
https://tarepan.hatenablog.com/entry/svgcontenteditable
div要素を追加することができる方法。((br))
http://itref.fc2web.com/javascript/document/createtextnode.html
テキスト入力に関してイタリック体にしたり文字色の変更したりできるサンプルが見つかったのでそれをフュージョンできなかったけど一応作りましたみたいな感じでかさ増し発表も検討してもよろしいかもしれません。サンプルは自分のlocalにおいてある。((br))
7/16((br))
・contenteditableを使うなら((br))
true,falseをボタンで切り替えられる例のサイト((br))
http://javascript123.seesaa.net/article/381247915.html

!! 保存
7/2((br))
①画像を作成→②画像を保存　の2段階で作成した((br))
gitのsaveにあるので試してみてください((br))
（他の保存の仕方は余裕があればやります）
((br))((br))
7/16((br))
１つのボタンで画像作成、保存できるようにしました

Tag:

Attachment

New: append-tag

(download: 575 bytes, at 2021/06/25 15:24:46 <frozen> )
(download: 617 bytes, at 2021/06/25 15:28:09 <frozen> )
(download: 730 bytes, at 2021/06/25 15:37:03 <frozen> )
(download: 964 bytes, at 2021/06/25 15:39:30 <frozen> )
(download: 970 bytes, at 2021/06/25 15:40:40 <frozen> )
(download: 976 bytes, at 2021/06/25 15:48:20 <frozen> )
(download: 989 bytes, at 2021/06/25 15:48:54 <frozen> )
(download: 1029 bytes, at 2021/06/25 15:51:01 <frozen> )
(download: 1221 bytes, at 2021/06/25 16:02:58 <frozen> )
(download: 1404 bytes, at 2021/06/25 16:06:13 <frozen> )
(download: 1410 bytes, at 2021/06/25 16:11:53 <frozen> )
(download: 1550 bytes, at 2021/07/02 16:03:48 <frozen> )
(download: 1627 bytes, at 2021/07/02 16:05:33 <frozen> )
(download: 3440 bytes, at 2021/07/02 16:21:05 <frozen> )
(download: 3448 bytes, at 2021/07/02 16:22:07 <frozen> )
(download: 3439 bytes, at 2021/07/09 13:01:27 <frozen> )
(download: 3635 bytes, at 2021/07/09 14:21:40 <frozen> )
(download: 3823 bytes, at 2021/07/09 16:47:58 <frozen> )
(download: 4174 bytes, at 2021/07/09 16:50:43 <frozen> )
(download: 4300 bytes, at 2021/07/09 16:52:19 <frozen> )
(download: 4422 bytes, at 2021/07/09 17:05:11 <frozen> )
(download: 4522 bytes, at 2021/07/16 13:24:28 <frozen> )
(download: 4708 bytes, at 2021/07/16 17:07:53 <frozen> )

Syntax Help

URL Link

[text|http://example.com//] http://example.com/to{text}

Page Link

[[PageName]] [[text|PageName]] >>{PageName} >>{PageName}{text}

Image or Attachment

<<{filename} <<{filename}{text}

Text Decoration

'' Italic '' ''' Bold ''' '''' Large-font '''' `` Typewriter `` `?` Preformatted `?` __ Underline __ == Strike == == DEL =={ INS } ((br)) line feed

Special Letter

((amp)) & ((bq)) ` ((lt)) < ((gt)) > ((lp)) ( ((rp)) ) ((lb)) [ ((rb)) ] ((ll)) (( ((rr)) ))

Headline

!!!! site-name !!! section-name !! subsection-name ! subsubsectino-name << section-name >> <<< subsection-name >>> <<<< subsubsection-name >>>> >> Centering and Large-font <<

Itemize

* item1 ** item1-1 ** item1-2

Enumerate

+ item1 + item2 ++ item2-1

Table

|| 1-1 | 1-2 | 1-3 || 2-1 | 2-2 | 2-3

Description

:item ::description

Quotation

6< quotation >9

Preformatted text

8< preformatted-text >8

Edit