HTML中でjavascriptで接続線を描く方法

2023/09/05 19:57

このQ&Aのポイント

HTML中でjavascriptを使用して接続線を描く方法について調べています。図形オブジェクトを接続する方法や、接続線を自動的に追随させる方法が知りたいです。また、ライブラリや具体的なコードのサンプルページがあれば教えてほしいです。
HTMLでjavascriptを利用して接続線を描く方法についての情報を探しています。図形オブジェクトを接続する方法や、動的に追随する接続線を実現する方法に興味があります。プロトタイプやjQueryなどのライブラリも使用可能ですが、自分でコードを書けるサンプルページがあると嬉しいです。
HTML中でjavascriptを使って接続線を描く方法について知りたいです。図形オブジェクトを接続し、四角形の移動に合わせて接続線を自動的に追随させる方法を探しています。具体的なコードのサンプルページや、既にコードを書いている方からのアドバイスをお待ちしています。

ベストアンサー

HTML中で、javascript で接続線を描く

2014/05/01 11:19

excel で図形オブジェクトを接続線で接続することが出来ます下図の四角Ａ、Ｂを動かしても自動で着いていく接続線 ―――――　　　　　　　　　――――― ｜　　　　　｜　　　　　　　　｜　　　　　｜｜四角Ａ　｜―――――｜四角Ｂ　｜｜　　　　　｜　接続線　　｜　　　　　｜ ―――――　　　　　　　　――――― prototype,jquery 等のライブラリで、できるものはあると思いますがあくまで自分の勉強として使いたいので具体的なコードがあるサイトを探しています ------------------------------ （DIVタグで四角Ａ、Ｂは作成） 1.<button>　などで接続線描ける状態にする、十字カーソル等 2.四角Ａで、mousedown 3.mousemove で四角Ｂに、マウス移動 4.mouseup で、四角Ａ、Ｂを接着する接続線を描く ------------------------------ 接続線はSVG のＬＩＮＥなどを使いたいと思いますが今回は勉強なので、接続線はHTMLのタグでもかまいません四角の接続部分を認識して、別の四角の接続部分に接続線を描く、コードを知りたいと思いますこのようなコードのサンプルページを知っている方既に自分でjavascriptのコードを書いた方は教えてくださいよろしく、お願いします

neko-007
お礼率51% (28/54)

その他(ソフトウェア)
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/05/01 11:54 回答No.1

通常はjava,Flash,Silverlightを使うところでしたが、今後はHTML5のcanvasを使うことが主流になるでしょう。現在の最新ブラウザはどれも対応しているはずです。＞接続線はSVG のＬＩＮＥなどを使いたいと思いますが　こちらは、ベクターになります。canvasはビットマップです。　cnvas要素内にjavascriptで絵を描いていく。　ユーザー側の入力・操作をjavascriptで取得して書き直すと言う流れになるでしょう。　⇒html5 canvas お絵かき - Google 検索( https://www.google.co.jp/search?q=html5%20canvas%20%E3%81%8A%E7%B5%B5%E3%81%8B%E3%81%8D )

関連するQ&A

HTMLからHTMLへ「データを送りつけ表示させる」といったことは可能
HTMLからHTMLへ「データを送りつけ表示させる」といったことは可能でしょうか？うまく表現が出来ないのですが・・・ご理解いただけるとうれしいです。私がWEBサーバ２台を管理しています。 A：http://hogehogehoge.net/AAA.html B：http://pogepogepoge.net/BBB.html Aのページは動的にjQueryなどを使ったページです。 Bは生粋のHTMLです。このサーバには出来ればライブラリなどは入れたくありません。変更するとしたらHTMLページのソースだけという条件にさせてください。 AAA.ｈｔｍｌのタグ内のデータが変わったらBBB.ｈｔｍｌの<div>タグ内にデータを送りつけて表示させるなんて方法は出来ないものでしょうか？
- ベストアンサー
- AJAX
外部SVGファイルを指定時のJavaScript
外部SVGファイルを指定している場合のJavaScriptの書き方はじめまして。SVGを勉強中のとりがらと申します。以下のような構成でHTML・SVGを作成しています。（添付した図の通りです）　　【XXX.html】　　・embedタグでroot.svgを埋め込み。　　【root.svg】　　・ellipseオブジェクト　　・useタグのchild.svgオブジェクト1 　　・useタグのchild.svgオブジェクト2 　　【child.svg】　　・circleオブジェクト　　・rectオブジェクトこのような場合、XXX.htmlに記述したJavaScriptにて、『root.svg』内『useタグのchildオブジェクト1』の『rectオブジェクト』の色を変えたいと考えております。そこで、XXX.htmlに下記のようなJavaScriptを書いたのですが、 child.svg内の四角の要素を取得する時点で、エラーが発生してしまいました。 > svgSub2.getElementById is not a function このような場合、どのようにJavaScriptを書けばよいのでしょうか？ SVGの記述の方がおかしいのでしょうか？どなたか解決策のご教示の程、よろしくお願いいたします。 +============================== + 環境 +------------------------------ ・WindowsXP ・Firefox 19.0 +============================== + 呼び出しhtml +------------------------------ <!DOCTYPE HTML> <html> <head> 　　<script language="javascript" type="text/javascript"> 　　　　function OnButtonClick(){ 　　　　　　 　　　　　　var svgdocMain = document.getElementById("idRoot").getSVGDocument(); 　　　　　　var svgMainDaen = svgdocMain.getElementById("idRootObj0"); 　　　　　　svgMainDaen.setAttribute("fill", "#00FFFF"); 　　　　　　 　　　　　　var svgSub1 = svgdocMain.getElementById("idRootObj1"); 　　　　　　svgSub1.setAttribute("display", "none"); 　　　　　　 　　　　　　var svgSub2 = svgdocMain.getElementById("idRootObj2"); 　　　　　　var svgSubRect = svgSub2.getElementById("idChildObj1");　 　　　　　 svgSubRect.setAttribute("fill", "#FFFFCC"); 　　　　} 　　</script> </head> <body> 　　<form><input type="button" value="テスト" onclick="OnButtonClick();"/></form> 　　<embed id="idRoot" type="image/svg+xml" src="root.svg" /> </body> </html> +============================== + root.svg +------------------------------ <?xml version="1.0" encoding="utf-8"?>  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" 　　y="0px" width="800px" height="800px" viewBox="0 0 800 800" enable-background="new 0 0 800 800" xml:space="preserve" 　　id="svg_root" > 　　 　　<ellipse fill="#00FF00" cx="20" cy="40" rx="15" ry="25" id="idRootObj0"> 　　</ellipse> 　　 　　<use xlink:href="child.svg#svg_child_g" x="0" y="100" id="idRootObj1" /> 　　 　　<use xlink:href="child.svg#svg_child_g" x="0" y="200" id="idRootObj2" /> </svg> +============================== + child.svg +------------------------------ <?xml version="1.0" encoding="utf-8"?>  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" 　　height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve" 　　id="svg_child"> 　　<g id="svg_child_g"> 　　　　 　　　　<rect fill="#FF00FF" x="50" y="50" width="40" height="40" id="idChildObj1"> 　　　　</rect> 　　　　 　　　　<circle fill="#00FF00" cx="50" cy="100" r="26.5" id="idChildObj2"> 　　　　</circle> 　　</g> </svg>
- ベストアンサー
- HTML
JavaScriptのエラーの原因
あるコードでエラーがでて原因がさっぱり解りません。下記コードは、そのエラーが消えないように最小限のコードにそぎ落としたものです。四角が大きくなったり小さくなったりするだけのアニメーションです。buttonを押すとエラーになります。consoleに赤色で0と表示されるだけのエラーです。かれこれ1ヶ月くらい解決できません。これはいったい何のエラーなのでしょうか？ <html> <body> <button>button</button> <div id='example'></div> <script src="https://d3js.org/d3.v5.min.js"></script> <script> const svg =d3.select("#example") .append("svg") .attr("width",300) .attr("height",150) let path = svg.selectAll("path") .data([0]) .join("path") .attr("d","M0,0 L300,0 300,150 0,150") async function plot(){ let b=0; try{ while(true){ await path .data([0]) .transition() .delay(1000) .duration(1500) .attr("d",b?"M0,0 L300,0 300,150 0,150":"M0,0 L30,0 30,15 0,15") .end(); b=!b } }catch(e){// このcatchがないと Uncaught (in promise) と表示される console.error(e); } } d3.select("button") .on("click",() => { path.interrupt() ; plot(); }) plot(); </script> </body> </html>
- ベストアンサー
- JavaScript
エクセル2010のコマンドボタンついて
MouseDownイベントでループ（Doなど）をさせた後 MouseUpイベントでStopさせるコードを作りましたが MouseUpイベントまで行かずずっとループしてしまいます（押されている間はボタンが凹んでいますがこのコードにすると凹まず中断しないと動かせないようになってしまいます）何が原因がわからないので回答お願いします下はコードです Private Sub CommandButton1_MouseDown(ByVal Button As Integer, ByVal Shift As Integer, ByVal x As Single, ByVal y As Single) Select Case Button Case 1 Range("A1") = 1 Case 2 Range("A1") = 3 End Select Do Range("A1") = Range("A1") + Range("A1") Loop End Sub Private Sub CommandButton1_MouseUp(ByVal Button As Integer, ByVal Shift As Integer, ByVal x As Single, ByVal y As Single) Stop End Sub （Select Case Button Case 1...にしても変わりませんでした）
- ベストアンサー
- その他MS Office製品
HTMLのinputタグ数が変わる場合のjavascript処理
パターンＡ～HTML～ <input type='text' name='a[]'> <input type='text' name='a[]'> ～JavaScript～ var n = document.form1.elements["a"][0].value ; var n = document.form1.elements["a"][1].value ; パターンＢ～HTML～ <input type='text' name='a[]'> ～JavaScript～ var n = document.form1.elements["a"][0].value ;　---(1) パターンＡではエラーが出ないのですが、パターンＢでは(1)のところでエラーになってしまいます。【elements["a"][0]】の部分を【elements["a"]】とすればエラーは出ません。どうやら、inputタグが1つしかない場合は、Javascriptでは配列として認識しないようです。できれば、inputタグが1つの場合でも複数の場合でも、同じJavascriptコードを使いたいのですが、何か良い方法はありますか？
- ベストアンサー
- JavaScript
JQueryを使用して、画像をドラッグで拡大・縮小できるボタンを画像右
JQueryを使用して、画像をドラッグで拡大・縮小できるボタンを画像右下に配置しようと考えています。以下のようなコードを作成したのですが、firefox(3.6.3)だとmouseupによるmousemoveのunbindがうまくいかず、mousemoveが維持されます。 IE8、chrom、operaでは考えたとおりの動きをしますが、ときたまchromでfirefoxと同様の不具合がおきます。どのようにコードを修正すればよいでしょうか？ ------------------------ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css">  </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript">  </script> <title>zoom</title> </head> <body> <div id="frame1"> <img id="handle" src="image.bmp" alt="画像"/> </div> </body> </html>
- ベストアンサー
- JavaScript
JavaScriptのイベントの付加で悩んでいます
すいません、分からないので教えてください。IEの場合です。 var Test = function() {}; Test.prototype = { 　　a_method: function() { 　　　　var self = this; 　　　　for (var i=1; i<=10; i++) { 　　　　　　$('nantoka' + i).attachEvent('onclick', function(event) { self.b_method(i); }); 　　　　} 　　}, 　　b_method: function(i) { 　　　　alert(i); 　　} }; 例えば上のようなコードがあり、bodyの中には<img id="nantoka1" />のようなimgタグがnantoka1からnantoka10まであるとします。この状態でnantoka1～nantoka10をクリックすると、それぞれに対応した画像の番号(1～10)を表示したいのですが、上に示したコードだと、どれをクリックしても番号が10になってしまいます。イベントの設定が上手くいってないのは自分でも分かるのですが、具体的にどう書けばいいのかわかりません。アドバイスお願いします。 _(._.)_
- ベストアンサー
- JavaScript
正しいHTML表現に変えたい
wikipedia http://ja.wikipedia.org/wiki/%E6%97%A5%E6%9C%AC%E3%81%AE%E3%82%B5%E3%83%83%E3%82%AB%E3%83%BC%E9%81%B8%E6%89%8B%E4%B8%80%E8%A6%A7 http://ja.wikipedia.org/w/index.php?title=%E6%97%A5%E6%9C%AC%E3%81%AE%E3%82%B5%E3%83%83%E3%82%AB%E3%83%BC%E9%81%B8%E6%89%8B%E4%B8%80%E8%A6%A7&action=edit 編集画面に<table>の開始タグを記していないにも関わらず、表示上はちゃんと<table>開始タグが記されるようになっています。同じ事をしたいのですが、どういうコードを書けば実現出来るでしょうか？対象となる文字列には他のタグもあったり、タグが入れ子構造であったりする場合もあります。 strpos()を利用して位置関係を調べて整形するやり方やPEAR::XML_HTMLSaxを利用してみたりなどしてみましたが、実現出来ません。どなたかご教示下さい。
- 締切済み
- PHP
JavaScriptでループできない
let target = document.getElementById('create_new_user'); let name = document.getElementById('i_new_uname'); let pass = document.getElementById('i_new_passwd'); let pass2 = document.getElementById('i_new_passwd2'); let sakusei = document.getElementById('b_create_user'); let a = new Event('mousedown'); let e = new Event('mouseup'); for (let step = 0; step < 10; step++) { target.dispatchEvent(a); target.dispatchEvent(e); name.value = 'らき⭐︎すた' + Math.random(); pass.value = 'bbbb2' pass2.value = 'bbbb2' sakusei.dispatchEvent(a); sakusei.dispatchEvent(e); } これでループしても一回しか繰り返えされません。なぜでしょうか？ちなみにforの処理の中に他の処理も混ぜたら他の処理はちゃんと動きました。なぜこれだけ一回しかできないのでしょうか？
- ベストアンサー
- JavaScript
エクセル2010のvbaについて
押されたコマンドボタンの名前を取得したいです（調べてみましたがエラーになり取得できませんでした）後コマンドボタンがたくさんあり、コードも長くとても邪魔なので省略したいのですができますか？（左クリックと右クリックで違う処理をした後　　　　　　　MouseDown コマンドボタンの名前で少し処理を変えるコードです）　MouseUp （下のコードのような感じです）回答お願いします Private Sub CommandButton1_MouseDown(ByVal Button As Integer, ByVal Shift As Integer, ByVal x As Single, ByVal y As Single) Select Case Button Case 1 Range("A1") = 1 Case 2 Range("A1") = 2 End Select End Sub Private Sub CommandButton1_MouseUp(ByVal Button As Integer, ByVal Shift As Integer, ByVal x As Single, ByVal y As Single) If （コマンドボタンの名前を取得） = "aaa" Then Range("A1") = Range("A1") + 1 Else Range("A1") = Range("A1") - 1 End If End Sub
- 締切済み
- その他MS Office製品