
Javascriptでcanvasを使用し、複数の画像を表示したり、消したり、一部の画像のみを表示させる処理を検討しています。
現在、画面を開いたときに複数の画像をロードし、画面に描画することはできたのですが、
今度は、その中から特定のひとつの画像をクリックした際に、他のすべての画像を削除(非表示)にし、その対象の画像のみを表示させたままにしたいのです。
調べると「ClearRect」というメソッドがあるそうなのですが、引数で座標を指定するようです。
考え方としては、この「ClearRect」を使い、画像ひとつひとつを削除していくという考えでいいのでしょうか?
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
え~~っと・・・
ご質問への回答からは少し外れているかもしれませんが、
「画像」とおっしゃっているものは、いわゆる<img src="~~">で表示するようなたぐいのものでしょうか。
それとも線や丸、四角などの描画図形でしょうか?
というのも、もしも前者であるのなら通常のHTML上で対応したほうが簡単そうに思えるからです。
canvasですと、表示された結果は全体で一つの画像のようになってしまいますので、ANo1様の回答にもありますように、クリックされた位置から対象となっている画像をスクリプトで算出・特定し、消去(または再描画)することになります。
画像がタイリングされているような場合は比較的簡単ですが、重なっていたり移動できたりすると、それなりに面倒な処理になると予想されます。
一方で、DOM要素であれば、そのまま個別のオブジェクトとして認識されていますので、クリックされた対象の特定も簡単ですし、個別に表示/非表示することも簡単だからです。
どうしてもcanvas上でないとならない理由があるのであれば、ANo1様の回答のような方法になろうかと思います。
なさりたいことの全体像がつかめていませんが、線や丸なども含めてオブジェクトとして扱えるSVGを利用するという方法もあるかもしれません。
http://ascii.jp/elem/000/000/585/585608/
No.1
- 回答日時:
……ふむ、その仕様なら1個1個消すよりも、クリックされた画像が何なのかを調べて画像全てを消した後にクリックされた画像を再描画する方が速そうだなぁ。
というか、画像と表示するか否かをセットにしたデータを持つようにして、何かアクションがあるたびに表示するか否かのデータを修正して canvas (再)描画をするようにし、canvas 描画時には画像描画を表示するとなっているもののみを描くように再描画したほうが、あとあと他の機能を追加するときに楽なような気がする。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Excel(エクセル) エクセル、画像ファイル名の書かれたセル(複数個所)に画像を一括で表示させる方法 1 2023/04/19 00:19
- モニター・ディスプレイ NVIDIA Geforce GT 710の解像度設定について教えて下さい 3 2022/06/19 13:00
- Excel(エクセル) EXCELのグラフを画像(JPG形式)で保存、通常実行がうまく行かない。ステップインはうまく行く 3 2022/08/30 12:06
- その他(プログラミング・Web制作) Leafletで画像をon、offさせる方法について 2 2022/11/01 15:34
- Visual Basic(VBA) エクセルマクロでアニメを作る方法を教えてください。 1 2023/02/07 14:27
- Windows 10 フォルダ内の全ての画像を矢印キーでスライドできるようにしたい 1 2022/10/21 12:53
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- Android(アンドロイド) AQUOS ZEROの使い方教えて下さい 2 2022/03/27 17:21
- フリーソフト 倍率自動調整して全画面表示できるフリーの画像ビューアー 1 2023/08/24 10:55
- pixiv pixivのマンガの検索結果はイラストに含まれますか? 1 2023/06/01 07:54
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
VB.NETのSendMessageを教えてく...
-
C# DataGridView のCellPaintin...
-
Javaで文字の角度を変えて表示...
-
Windows OS/Mozilla系ブラウザ...
-
Canvas等の図形を移動する時,直...
-
JAVAでの背景画像表示
-
VB.NET フォーム上に描いたグ...
-
requestanimationframeを一斉に...
-
Androidで画像の中で指定した範...
-
VS Treeview のデザイン変更
-
ドラッグして矩形を描くには
-
GDI+で描画した画像を消去する...
-
重なった要素上でのイベントで...
-
「タイプ初期化子が例外をスロ...
-
レコード件数の表示
-
変数名の付け方
-
private static という変数の修飾
-
エクセルVBAで、条件に一致する...
-
【JAVA】与えられた金額を貨幣...
-
生成したインスタンスを削除す...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
VB.NET フォーム上に描いたグ...
-
C# DataGridView のCellPaintin...
-
VB.NETのSendMessageを教えてく...
-
SwingとEDT(イベントディスパッ...
-
MFCでMSペイントみたいなツー...
-
C# リストビューの特定のセルの...
-
Labelコントロールの背景をグラ...
-
JPanel上での描画と各コンポー...
-
BMP画像を画像処理して連続に表...
-
C#のGraphicsクラスについてです。
-
Java、jPanelに描画する
-
Javaを使って、円を描きたい
-
GDI+で描画した画像を消去する...
-
javaアプレットでの文字化けと...
-
アクセスで他アプリから復帰し...
-
Hobbits PDF Libraryについて。
-
重なった要素上でのイベントで...
-
VS Treeview のデザイン変更
-
Javaで文字の角度を変えて表示...
-
画面のちらつきの原因が知りた...
おすすめ情報