- PR -

ASP.netで座標を指定してコントロールの再配置を行いたい。

1
投稿者投稿内容
会議室デビュー日: 2007/10/24
投稿数: 3
投稿日時: 2007-10-24 01:01
初めての投稿をさせていただきます。
VS2005でAsp.net2.0開発をしております。
言語はVB.netを使用しております。

まず行いたいこととしては、ImageButton等をクリックした際に、クリックイベントを取得し、そこでx軸y軸の座標を取得し、同コントロール内に印をつけたいという内容です。(クリックした位置にマーキングしたい。)

そこで、最初はsystem.drowingクラスから、座標を指定し「○」や「×」といった文字を入力することで実現可能だと思い挑戦しましたが、実現できませんでした。

次に試したのは、イベント発生時にパネルや、ラベル、image等のオブジェクトに対し座標を指定してやれば実現可能だと思い試しましたが、できませんでした。(感覚としてはwindowsアプリケーションで実装したことがあるからできるだろうという安易なかんがえでした。)

そこで、調べてみたところ、開発経験のあるwindows アプリと違いwebアプリケーションでは、ブラウザで表示させるための情報がユーザに送られているだけで、動的な配置に関して、実装が複雑であるようなわかり、そこで迷宮にまよってしまいました。

ASP.net AJAX といった動的配置に優れた(?)ツール等も調査しましたが、自力ではこれ以上の情報が見つからず、投稿させていただきました。

サンプルソースまたは、情報が載っているサイト、ヒントとなるような類似案件を経験何でもかまいませんので、情報をいただけたらと思います。
以上よろしくお願いします。
Jitta
ぬし
会議室デビュー日: 2002/07/05
投稿数: 6267
お住まい・勤務地: 兵庫県・海手
投稿日時: 2007-10-24 07:42
サンプルより先に、HTMLを知ることが必要かと思います

クリックの座標が拾えるかどうかは、私はわかりませんが、クライアントで拾ったそれをサーバーへ通知します
その情報をもとに表示するべき座標を計算します
べる
ぬし
会議室デビュー日: 2003/09/20
投稿数: 1093
投稿日時: 2007-10-24 11:39
引用:
そこで、調べてみたところ、開発経験のあるwindows アプリと違いwebアプリケーションでは、ブラウザで表示させるための情報がユーザに送られているだけで、動的な配置に関して、実装が複雑であるようなわかり、そこで迷宮にまよってしまいました。

まったくそのとおりなのですが、今回の要件に限って言えばできないことではない気がします。

引用:
まず行いたいこととしては、ImageButton等をクリックした際に、クリックイベントを取得し、そこでx軸y軸の座標を取得し、同コントロール内に印をつけたいという内容です。(クリックした位置にマーキングしたい。)

そこで、最初はsystem.drowingクラスから、座標を指定し「○」や「×」といった文字を入力することで実現可能だと思い挑戦しましたが、実現できませんでした。

スタンスはあっていると思います。ImageButton(htmlで言うと<input type="image")にはまさに、
クリック座標をサーバに通知する機能があります。
クリックイベントハンドラの引数ImageClickEventArgsに設定されているXとYというプロパティが座標です。
(それとも座標を取得すること自体には成功しているということですか?)

次の問題は、直後にブラウザが参照しに来るであろう画像を、加工するというところですね。
これは複数の方法が考えられます。印がついた画像を、保存しておきたい(何回か参照する)なら
実際の画像ファイルに印を付けちゃった方がいいかもしれないし、
基本的にその1回しか参照されない(次はまた別の場所に印がついてるとか)なら、
「(座標とかの)引数を伴ってアクセスされると、動的にファイルから画像を読み取って、
印を付けた画像データをブラウザに返す」ようなものを作ることも可能です。
GENZO
大ベテラン
会議室デビュー日: 2003/11/26
投稿数: 111
お住まい・勤務地: 名古屋
投稿日時: 2007-10-24 12:08
HTML的な話であれば、以下のサイトが参考になるとおもいます。
http://www.tagindex.com/html_tag/form/input_image.html
todo
ぬし
会議室デビュー日: 2003/07/23
投稿数: 682
投稿日時: 2007-10-24 12:40
http://www.atmarkit.co.jp/bbs/phpBB/viewtopic.php?mode=viewtopic&topic=26032&forum=7&start=0
会議室デビュー日: 2007/10/24
投稿数: 3
投稿日時: 2007-10-24 13:04
Jittaさん>言葉足らずで、すみませんでした。座標は取得していて、その座標に対応したオブジェクトの配置の実装方法がわからず、質問を行っていました。計算式で、配置させたい座標までは求めていた。しかし、勉強不足のせいか、HTML表現で座標を指定する方法が、CSSぐらいしか思いつかず、最初は、イベントによってCSS自体を書き換えようとも考えましたが、それでは競合した場合うまくいかないような気がしてまして、迷っておりました。

ベルさん>なるほど!座標は取得できていましたので、それに対応するように画像事態を加工すればいいわけですね。逆に座標をDB等に登録していれば、読み込み時に画像に印をつけた状態(加工した状態で)ユーザに表示することも可能な気がします。
少し光が見えてきました。ありがとうございます。試してみます。

GENZOさん>情報ありがとうございます。せっかく情報を頂いて大変恐縮なんですが、静的なページで、オブジェトを配置するための、情報のような気がしました。(間違っていたらすみません)また何か情報がございましたら。ご協力お願いいたします。

todoさん>以前の似たような案件についての情報ですね。ありがとうございます。是非参考にしてみます。
べる
ぬし
会議室デビュー日: 2003/09/20
投稿数: 1093
投稿日時: 2007-10-24 15:17
引用:
Jittaさん>言葉足らずで、すみませんでした。座標は取得していて、その座標に対応したオブジェクトの配置の実装方法がわからず、質問を行っていました。計算式で、配置させたい座標までは求めていた。しかし、勉強不足のせいか、HTML表現で座標を指定する方法が、CSSぐらいしか思いつかず、最初は、イベントによってCSS自体を書き換えようとも考えましたが、それでは競合した場合うまくいかないような気がしてまして、迷っておりました。

あくまで画像そのものを加工するのであればCSS等はあまり関係ないですが、
加工するのでなくImageButtonに画像を「重ねて見せる」のでよければCSSが関係してきますね。
<asp:Image style="left: 300px; position: absolute; top: 200px"
みたいな書き方をすれば確かに、好きな位置に画像を表示できますし、
「印」を透過gifで用意すれば、それなりに見た目も悪くないものができるかもしれません。

引用:
ベルさん>なるほど!座標は取得できていましたので、それに対応するように画像事態を加工すればいいわけですね。逆に座標をDB等に登録していれば、読み込み時に画像に印をつけた状態(加工した状態で)ユーザに表示することも可能な気がします。
少し光が見えてきました。ありがとうございます。試してみます。

ということで、私が「画像加工」しか見えていなかったため、難しい方向にアシストしてしまった
可能性があるので(汗)、冒頭の方法も紹介しておきました。

引用:
GENZOさん>情報ありがとうございます。せっかく情報を頂いて大変恐縮なんですが、静的なページで、オブジェトを配置するための、情報のような気がしました。(間違っていたらすみません)また何か情報がございましたら。ご協力お願いいたします。

確かに、座標を取得できているのであれば直接関係ない内容です。
しかし、これは本来htmlでどうやって座標を渡しているかの説明であって、
asp.netがこの方法で取得して、XとYのプロパティに設定するということを自動的にやってくれています。
会議室デビュー日: 2007/10/24
投稿数: 3
投稿日時: 2007-10-26 02:24
大変お世話になりました。todoさんのご紹介していただいた方法と、べるさんのアドバイスを組み合わせて何とか実現できました。

完成系?としては、このような形になりました。
Protected Sub ImageButton1_Click(ByVal sender As System.Object, ByVal e As System.Web.UI.ImageClickEventArgs) Handles ImageButton1.Click
Dim x_int As Integer
Dim y_int As Integer
Dim image_a As System.Drawing.Bitmap
Dim image_b As System.Drawing.Graphics
Dim font_a As System.Drawing.Font

'座標取得
x_int = e.X
y_int = e.Y

'クラス変数に値を挿入(string_time)
Me.string_time = "test"
Me.string_time &= CType(Date.Now.Year, String)
Me.string_time &= CType(Date.Now.Month, String)
Me.string_time &= CType(Date.Now.Day, String)
Me.string_time &= CType(Date.Now.Hour, String)
Me.string_time &= CType(Date.Now.Minute, String)
Me.string_time &= CType(Date.Now.Second, String)

image_a = New System.Drawing.Bitmap(Me.string_bit)
image_b = System.Drawing.Graphics.FromImage(image_a)
font_a = New System.Drawing.Font("HGS創英角ポップ体", 20, Drawing.FontStyle.Bold)

image_b.DrawString(STRING, font_a, Drawing.Brushes.Crimson, x_int - 12, y_int -

'画像に名前を付与して保存
image_a.Save("E:\image\temp\" + Me.string_time + ".jpg")
Me.ImageButton1.ImageUrl = "http://localhost/image/temp/" + Me.string_time + ".jpg"

image_a.Dispose()
image_b.Dispose()
End Sub

汚いソースだとは思いますが実現しました。方法としてはクリックイベント毎に
画像を生成。それをimageButtonに貼り付けることで、動的な操作(?)を実現することができました。
ありがとうございました。
また、余談ですが生成されたイメージファイルは容量と使用ユーザ数等を計算したところ、サーバのHDDに対して余力があったので、一定時刻毎にバッチを起動させて消すという運用対処でいくことになりました。

今回は本当にありがとうございました。
1

スキルアップ/キャリアアップ(JOB@IT)