線を引く

質問

http://tohoho.wakusei.ne.jp/wwwxx002.htm
のように
ドラッグで自由に画像をうごかして
かつその画像同士を相関図のように
線で結びたいのですが
どうやったらできるでしょうか？

回答No.3

hrm_mmm

＞No.２への補足です。
昨日は画像ファイルの条件判定で力尽きてたようで
width,heightへ代入時の場合分けを忘れておりました。

＞ obj.style.width = dx;
＞ obj.style.height= dy;
この２行を以下のように書き換えてください。

obj.style.width = (dx==0) ? 2:Math.abs(dx) ;
obj.style.height= (dy==0) ? 2:Math.abs(dy) ;

お礼

回答ありがとうございます
やはり線の太さが変わってしまうのが難点ですね

回答No.2

hrm_mmm

線を描くのは、以下のサイトのアナログクロックを応用するとできるかも。
http://www.hiyoko3.com/index.html

線画を４種類（右上がり線、右下がり線、水平線、垂直線）用意して
結びたい位置から、画像のheight,width,top,leftを割り出して、
さらに、どの画像を表示するかを割り出して、画像切り替えをする。

ie5.5以降netscape７以降対応で以下のようなのでどうでしょう？
function Line(img_id, x1,y1, x2,y2){
// img_id:線画用imgタグのid名；　x1,y1:開始点；　x2,y2:終点
dx = x2-x1;
dy = y2-y1;
if(! document.getElementById ) return;
obj= document.getElementById(img_id);

if( dx==0 ){
obj.src="vertical.gif";
}else{
if( dy==0){
obj.src="horizontal.gif";
}else if( dx*dy<0 ){
obj.src="r-up.gif";
}else if( dx*dy>0 ){
obj.src="r-down.gif";
}
}
obj.style.width = dx;
obj.style.height= dy;
obj.style.left = (dx>=0) ? x1 : x2 ;
obj.style.top = (dy>=0) ? y1 : y2 ;
}

画像の拡大縮小をしているので、距離が変わると線の太さも変わるのが難点かも。

参考URL：

http://www.hiyoko3.com/index.html

回答No.1

BLUEPIXY

javascriptを使って画面に任意の座標の線を描画することはできません。
javaのアプレット上ならできると思いますが。

お礼

回答ありがとうございます
Javaアプレットには手軽さにかけますねぇ