- ベストアンサー
ドラッグして矩形を描くには
JavaScriptを用いて開発を行っています。 行いたいことは、画像の上でマウスをドラッグすると矩形が表示されるというものです。 矩形を描くことによって、選択範囲を取得したいと考えています。 Flashを用いることも考えたのですが、できればjavascriptで対応できればと考えております。 よろしくお願いいたします。
- serine1
- お礼率40% (43/107)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
全体的には、マウスの位置が取れて、線が描ければできるでしょうから… 以下を参考にすればできるでしょう。 ◆とりあえず、結果的に、似た感じのサンプルのあるページ （マウスに応じて描画が反応する） 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
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
#1です。 矩形を描くだけなら、線を描画するよりも1px幅のボーダーのdivなど（矩形）を伸縮させるる方がはるかに簡単ですね。 扱うオブジェクトも1個で済むし、マウスをトレースしている間は点線で、確定したら実線とかも簡単にできるし… ということで、マウス位置を取得できればほぼOKなので、#1の後半はいらぬおせっかいでした。
関連するQ&A
- ドラッグ&ドロップについて
現在、Webブラウザ上でJavaScriptを使ったツリー表示をしており、 ツリー内のフォルダに対してドラッグ＆ドロップを実装したいと思っています。 そこで質問なのですが、マウスの座標を取得して実装する様な方法では無く、ドラッグ・ドロップ対象のIDを取得して実装する方法はあるのでしょうか？ ブラウザはIE6対応のみを想定しています。 ご存知でしたら、どうぞ宜しくお願いします。
- ベストアンサー
- JavaScript
- ドラッグできる画像
こんにちは。２回目の質問です。 またJavaScriptについての質問なんですが、 HTMLページに画像が複数あって、マウスで自由にドラッグして好きな場所に配置したいです。これはHPで解説してくれているページを見つけたんですが、ちょっと違います。 どこが違うかというと、画像の重なり具合が調節できないこと。参考までにつぎのHPをみてください。（注：ポップアップの広告が出ます） http://holden.hp.infoseek.co.jp/sample/c_img5.html ここのお地蔵さんは、招き猫の上に表示することはできません。ただしドラッグしている間は別ですが。 このお地蔵さんと招き猫のようにドラッグで移動できて、さらに画像の上下（前後）をマウスクリックで変えるようにするにはどうしたらいいでしょうか? また２つ以上の画像を配置したい場合はどうしたら良いですか? JavaScriptの記述は私が参考に出したHPのもの意外でもかまいません。できればJavaScriptの記述を書いてほしいです。 お願いします。
- 締切済み
- JavaScript
- Flashでのドラック＆ドロップと印刷について
Flashでの開発についての質問です。 ブラウザ上にA～Eの５つの画像があります。その内のB～Eは花、雪といった小さな画像で、Aの画像にそれらをドラック＆ドロップできるようにしました。 結果的にドラック＆ドロップはできるようになったのですが、B～EをAにドラック＆ドロップすると、Aが一番上に表示されてしまい、B～Eの画像がAの下に隠れてしまいます。これを解決したいと思っています。どうすれば解決できるかご教授ください。 さらに、Aの上にB～Eをドラック＆ドロップした画像のみ（Aも含み、Aの大きさで）を印刷させるような印刷ボタンを付けたいのですが、そのようなことは可能ですか？もし、可能であればその方法も合わせてご教授ください。 よろしくお願い致します。
- 締切済み
- Flash
- 矩形のホットスポットにマウス・オーバーしたときに
ある画像の矩形のホットスポットにマウス・オーバーしたときに、それにリンクされた別の画像をpopup表示させるやり方を教えてください。
- ベストアンサー
- HTML
- 矩形のホットスポットにマウス・オーバーしたときに
る画像の矩形のホットスポットにマウス・オーバーしたときに、それにリンクされた別の画像をpopup表示させるやり方を教えてください。
- 締切済み
- JavaScript
- (VC++2010)画像をドラッグしたいのですが
VC++初心者です。 学校の課題で、 Buttonを押して、画像ファイルを読み込みpictureBox1に表示 ↓ pictureBox1上でマウスドラッグをして、ドラッグで選択された長方形の部分の画像をコピーし、pictureBox2に表示 というプログラミングを書きたいのですが、ドラッグのところで詰まってしまっています。 ドラッグを開始した座標などをどう上手く使って行けばいいのかがわかりません… 初心者すぎて質問の仕方もイマイチわからないのですがどなたか教えて頂けると幸いです。
- 締切済み
- C・C++・C#
- VB6でマウスのドラッグで範囲を選択し画像を取得
こんかいVBを初めて扱っています。 マウスのドラッグで範囲を選択し画像を取得してPictureBox2 に表示 ということをＶＢ６で作成しようとしています。 参考になりそうなサイトは見つけたのですが、 http://hanatyan.sakura.ne.jp/dotnet/zu06.htm VBのバージョンが違うのでコンパイルは通りません。 関数の名前が変わっているから出来ないのか、 同じ機能は無いから違う方法を取らなければいけないのか？ わからないことだらけで、ハマっています。 もし、何でも良いのでご存知の方がいらっしゃいましたら、 何卒、ご教授宜しくお願い致します。
- ベストアンサー
- Visual Basic
- ＦＬＡＳＨのブラシで選択範囲を塗ると線が消える
ＦＬＡＳＨのブラシツールでブラシモードを「選択範囲をペイント」にして塗ると線が消えることがあります。 例えば、 １ 矩形ツールで線と塗りを設定して矩形を描く ２ 選択ツールで塗りの部分をクリックして選択 ３ ブラシツールを選び、ブラシモードを「選択範囲をペイント」にする。 ４ １で描いた矩形の外側から内側(塗りの部分）にかけてドラッグする。 (ブラシの太さは最大にしています） 私の理解では、線の部分は変化しないと考えるのですが、ドラッグした部分で線が消えてしまうところがあります。特に上線と左線(なぜか下線と右線は消えることがない）。 WindowsXPでＦＬＡＳＨ ＣＳ５ を使用しています。 よろしくお願いいたします。
- 締切済み
- グラフィックソフト
- iPhone 画像 矩形選択 目隠し
iPhone 画像 矩形選択 目隠し 画像の一例をご覧ください。 画像はWindowsにプリインストールされているアプリ＜ペイント＞で目隠ししたい部分を矩形選択し、deleteを押して消去したものです。 これと同様にiPhoneのアプリで、画像全体は残したままで一部分だけを目隠ししたいです。 営業で訪問先のお客様の個人情報が書かれた書類を撮影し、画像を会社のサーバーへ送る事があります。 お客様によってはカメラで撮影した時に、画像の中でプライバシーに該当し、かつ営業には関係がない部分を隠して送ってほしいと言われます。 その部分を自由な大きさの長方形で矩形選択（範囲選択・範囲指定）して、 黒や白で塗りつぶして（目隠しして）保存して送信したいです。 さらに画像を大きく拡大しながら範囲選択ができれば理想です。 App Storeを探してみましたが、目隠しアプリで顔を自動認識して隠すアプリは多々ありますが、私が望む編集作業ではありません。 質問のような操作ができるアプリをご存じの方よろしくお願い致します。
- ベストアンサー
- 画像・動画・音楽編集
お礼
ありがとうございました。 >矩形を描くだけなら、線を描画するよりも1px幅のボーダーのdivなど（矩 >形）を伸縮させるる方がはるかに簡単ですね。 >扱うオブジェクトも1個で済むし、マウスをトレースしている間は点線で、 >確定したら実線とかも簡単にできるし… こちらのご回答も参考にさせていただきまして、おかげさまで無事に矩形を描くことができました。 早速これをプログラムに反映したいと思います。