ドラッグして矩形を描くには

質問

JavaScriptを用いて開発を行っています。
行いたいことは、画像の上でマウスをドラッグすると矩形が表示されるというものです。
矩形を描くことによって、選択範囲を取得したいと考えています。

Flashを用いることも考えたのですが、できればjavascriptで対応できればと考えております。

よろしくお願いいたします。

回答No.1

fujillin · ベストアンサー

全体的には、マウスの位置が取れて、線が描ければできるでしょうから…
以下を参考にすればできるでしょう。

◆とりあえず、結果的に、似た感じのサンプルのあるページ
　（マウスに応じて描画が反応する）
http://www.openspc2.org/reibun/JS_TipsAndTricks/image/006/index.html
http://f56.aaa.livedoor.jp/~tdnr/lab/drawingcanvas/

◆マウスの位置取得はこのあたりが、参考になるかと…
http://archiva.jp/web/javascript/get_mouse-position.html
http://www.keynavi.net/ja/tipsj/mouse.html
http://www.cocoaliz.com/ajax/index/26/

◆線の描画はいろいろありそうだが、
ちまちま引くなら
http://write-off.cside.com/scripts/scripts/drawline2.htm
Canvasなどを利用するか
http://www.html5.jp/canvas/what.html
http://www.thinkit.co.jp/article/60/1/
VMLを使うとか（IE専用？）
http://seoi.net/vector/
http://tohoho-web.com/wwwvml.htm
ライブラリを利用するとか…
http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm

お礼

ありがとうございました。

>矩形を描くだけなら、線を描画するよりも1px幅のボーダーのdivなど（矩
>形）を伸縮させるる方がはるかに簡単ですね。
>扱うオブジェクトも1個で済むし、マウスをトレースしている間は点線で、
>確定したら実線とかも簡単にできるし…

こちらのご回答も参考にさせていただきまして、おかげさまで無事に矩形を描くことができました。

早速これをプログラムに反映したいと思います。

回答No.2

fujillin

#1です。

矩形を描くだけなら、線を描画するよりも1px幅のボーダーのdivなど（矩形）を伸縮させるる方がはるかに簡単ですね。
扱うオブジェクトも1個で済むし、マウスをトレースしている間は点線で、確定したら実線とかも簡単にできるし…

ということで、マウス位置を取得できればほぼOKなので、#1の後半はいらぬおせっかいでした。