画面上に出力されたNode同士を、線を描画して繋ぐ方法について【HTML・JavaScript】

#実現したいこと
以下のことを実現したいと思います:

「画面上に、イベントドリブン的に『線』を描画し、画面に出力済みのNode同士を繋ぐ」

各Nodeの条件は以下の通りです：
・中にテキストを入力することを想定している
・Nodeもイベントドリブン的に生成される

#手段について
手段について自分なりの考えとしては以下の通りです：

・線の描画にはcanvas APIなどの使用が考えられる
・JavaScriptを使って、線の描画を制御する

問題なのは、
・「Node同士を結ぶように線を描画する制御」はどのようにするか
・それを実現するには何の技術・APIを使えばよいか。なんの勉強が必要か
ということです。

少し考えてみると、
「Nodeの相対的な位置情報の動的な制御」
「それに合わせた線の描画開始位置終了位置の動的な制御」
が必要と思いますが、
自分は、HTMLのスタイルや位置情報の制御周りのノウハウを知らないので、
具体的な方法が思いつきません。

そのままの解答でなくても、
「なんの勉強が必要か」「このサンプルコードが参考になる」等ありましたら、教えて頂きたいです。
また、これに関して「古典的・標準的な方法」があるならば、それに準拠したいと思います。

ご回答宜しくお願いします。
#追記
リサーチの結果、
Nodeの位置情報の取得・操作、の方法の一つとして、DOMRectオブジェクトを利用する方法を見つけました。

・DOMRectオブジェクトは、長方形のエレメントの原点x,y、top,left,bottom,right,width,heightの8つのプロパティを格納したオブジェクト
・getBoundingClientRect()メソッドによって、指定したエレメントのDOMRectオブジェクトを戻り値として取得することができる

これをcanvasのmoveTo()やlineTo()と組み合わせることで、可能性が見えてきました。

引き続きご回答お待ちしております。

退会済みユーザー

2019/04/27 13:04

私は新参ものだけれど、これまでに回答者が提示したコードを見て、尊敬に値する人がいることがわかりました。ググれば見つかるような如何にも専門用語的な事柄を並べて質問するより、あなたの書き上げるプログラムの片鱗をちょっと見せてくださいよ。（個人的に非常に興味あがあります）きっとそのレベルにあった回答が得られると思いますよ。あなたに比喩が通じるのかわからないが、絵に描いた餅の批評はできても、その味は誰にもわからない。

s8_chu

2019/04/27 19:14

質問文の手段を実際にコードとして記述したものはありますか？もしあるのであれば、質問文に追記していただけませんか？

WeilSpinor

2019/05/04 07:54

現在上の機能を搭載したアプリの設計段階でして、まだ形にはしていません。今回の質問はuiに関する部分の設計ですが、全体としてはデータベースと連携についても方愛菜毛っr場ならず、少し説明に時間がかかります。自分なりの設計をかけたら再度追記しようと思います。

行動規範の内容に同意します

回答1件

要素の位置がわかるのなら、あとは簡単でしょう！

html
1<html lang="ja">
2<meta charset="utf-8">
3<title></title>
4<style>
5#HOGE,#FUGA {
6  position: absolute;
7  top: 0;
8  left: 0;
9  width: 700px;
10  height: 700px;
11}
12#HOGE span {
13  position: absolute;
14}
15</style>
16
17<body>
18<div id="HOGE"></div>
19<canvas id="FUGA" width="700" height="700"></canvas>
20
21<script>
22const str = '絵に描いた餅の絵の味は、誰にもわからない。　';
23
24function demo () {
25  let ary = Array.from (str), p = [];
26  ary.forEach ((s,i, e)=> {
27    (e = HOGE.appendChild (document.createElement('span'))).textContent = s;
28    let
29      k = i * Math.PI / ary.length * 2,
30      x = (350 - Math.sin (k) * 300 |0),
31      y = (350 - Math.cos (k) * 300 |0);
32    p.push ([x,y]);
33    e.style.top = (y - 10) + 'px';
34    e.style.left = (x - 10) + 'px';
35  });
36
37  let ctx = FUGA.getContext('2d');
38  ctx.strokeStyle = 'rgba(255,0,0,.4)';
39  ctx.beginPath();
40  p.forEach (a=> p.forEach (b => (ctx.moveTo(...a), ctx.lineTo(...b))));
41  ctx.stroke();
42}
43demo ();
44</script>
45

投稿2019/04/27 13:41

退会済みユーザー

総合スコア0

WeilSpinor

2019/04/27 19:07

ご回答ありがとうございます。す、、、すごい……！！！書いていただいたコードをjsfiddleで走らせたら、なんかすごい幾何学的模様みたいなのが浮かび上がってきました…！！超絶技巧ですね…。申し訳ないのですが、書いていただいたコードは、私には難しすぎて何が起きているのかよくわかりませんでした。今回の件については、もう少し簡単な方法で実装することにして、もう少し腕前が上がってから、また戻ってきて見直そうと思います。

退会済みユーザー

2019/04/27 22:09

えっ！？　とても残念に思います。（恐らくですが）これは基礎を学んだ人が次のステップに移行するころには書けるようになっている簡単なコードです。WEBアプリを作る以前に学ぶことが多そうですね。質問する時間があるならのならば、沢山のプログラムを（基礎から）書くところから始めましょう。 >もう少し簡単な方法で実装するそれが出来るのなら、公開してみましょう！私にはそうやって貴方が逃げているようにしか思えない。 ”人に教えを乞う”というのは、先達の方々の貴重な時間を割いて戴く（頂戴する）ことになります。規約さえ守れば問題がない！というのではなく、礼意をもって答えましょう。それは薄っぺらな感謝の言葉ではなく、自分の質問に対して付いた回答を下に改良したプログラムで見せて返すことだ。あなたはそのプログラムさえ見せない。多くの方々から教わってきた私からすると、過去のこれまでの質問の結果をみるに、あなたの礼意は見えない。

WeilSpinor

2019/04/28 02:20

そうですか。勉強不足ですみません。シンプルに書かれているのは分かりましたが、私にはこれを理解するのが簡単とは思えませんでした。ということは、私は、”基礎”の習得段階にある、といえるでしょう。基礎の習得とは往々にして簡単にはゆかぬものですね。引き続き、基礎習得トレーニング『基礎技術搭載WEBアプリ制作』を続け、基礎技術の習得に努めようと思います。 >>もう少し簡単な方法で実装するそれが出来るのなら、公開してみましょう！私にはそうやって… 近いうちに公開しようと思います。

退会済みユーザー

2019/04/28 02:37

がんばれ～！

行動規範の内容に同意します