- PR -

描画に関するWebユーザーコントロールについて

«前のページへ 1|2|3
投稿者投稿内容
alf
常連さん
会議室デビュー日: 2005/11/15
投稿数: 22
お住まい・勤務地: 岐阜県・愛知県
投稿日時: 2005-11-21 10:40
todoさん,囚人さん,きくちゃんさん,Jittaさん、皆さん有難うござ
います。
あまりにもの皆さんのレスポンスの速さに感謝感激しております。
皆さんのアドバイスを参考に次のように作り直しましたので以下に
簡単に説明します。


メインとなるフォーム側：WebForm1
グラフィックオブジェクト(メモリ)側：WebForm2
とします。

// WebForm2(メモリ側)
private void Page_Load(object sender, System.EventArgs e)
{
string image = "zaseki.jpeg";
Bitmap bitmap = new Bitmap(Server.MapPath(image));
MemoryStream memStream = new MemoryStream();

Graphics g = Graphics.FromImage(bitmap);
g.SmoothingMode = SmoothingMode.AntiAlias;

// Send the bitmap to the output stream
bitmap.Save(Response.OutputStream,ImageFormat.Jpeg);

memStream.Close();
Response.End();

// Cleanup
g.Dispose();
bitmap.Dispose();
}

WebForm1(フォーム側)のImageコントロールプロパティ
　ImageUrl = WebForm2.aspx;
とします。

この状態で実行するとWebForm1のImageコントロール上にWebForm2の
ページが表示されます。

問題はここからでして、このグラフィックオブジェクト(レスポンス)
の"コピー"に対してWebForm1内にて描画を行い、最後に
　ImageUrl = ????
とすれば当初の目的が達成されると思われますが、皆さんの意見と自
分なりに調べて従来のプログラムを下記のように書き直してみました
がダメでした。


// ■座席表に対する描画(WebForm1(フォーム側))
string image = "http://localhost/Delivery_Sample/WebForm2.aspx";
WebClient wc = new WebClient();
Stream st = wc.OpenRead(image);
Bitmap bitmap = new Bitmap(st);　←ここで落ちる
st.Close();

Graphics g = Graphics.FromImage(bitmap);
g.SmoothingMode = SmoothingMode.AntiAlias;
g.DrawRectangle(Pens.Red,0,0,400,400);

Zaseki.ImageUrl = image;

g.Dispose();
bitmap.Dispose();

重ね重ねよろしくお願いします。
alf
常連さん
会議室デビュー日: 2005/11/15
投稿数: 22
お住まい・勤務地: 岐阜県・愛知県
投稿日時: 2005-11-21 19:53

　スミマセン、勘違いしてました。
　　メインとなるフォーム側：WebForm1
　　グラフィックオブジェクト(メモリ)側：WebForm2
　とした場合、

　WebForm2側で全て描画
　　　　　↓
　WebForm1側のイメージのImageUrlをWebForm2.aspxに指定

　でよかったです。
　折角教えて頂いたのに間違った解釈をしていました。

　で、Image上をマウスでクリックした位置の周りを描画させるために
　ImageではなくImageButton上に画像を張り付け、

　①WebForm1側：マウスクリックした位置をSessionに代入
　　↓
　②WebForm2側：マウスクリックされた位置をSessionから取得して
　　周りを描画
　　↓
　③WebForm1側：ImageUrl = WebForm2.aspx

　とさせるべく、①はボタン押下ハンドラ内で、②はPage_Load内に記述
　させましたが③をどのタイミングで行ったらいいのかどうしても分かり
　ません。

　このレスで紹介して頂いた『どっとねっとふぁん』や『AI-Light』の
　サイトを参考に②は作ったのですが今回のようにイベントを契機とし
　ている場合、③はどのタイミングで行ったらよいのでしょうか？
　②のPage_Load後にImageButtonのハンドラ内でできるのが理想なので
　すがなかなかそんなに上手くはいかなかったので。

todo
ぬし
会議室デビュー日: 2003/07/23
投稿数: 682
投稿日時: 2005-11-21 20:25
WebForm1側
マウスクリックした位置をImageUrlのQueryStringに渡す
　.ImageUrl = "WebForm2.aspx?x=400&y=400"

WebForm2側
QueryStringからマウスクリックされた位置を取得して描画
alf
常連さん
会議室デビュー日: 2005/11/15
投稿数: 22
お住まい・勤務地: 岐阜県・愛知県
投稿日時: 2005-11-22 13:21

todoさん、レスポンス有難うございます。


> WebForm1側
>マウスクリックした位置をImageUrlのQueryStringに渡す
>　.ImageUrl = "WebForm2.aspx?x=400&y=400"
>WebForm2側
>QueryStringからマウスクリックされた位置を取得して描画


ご指摘どおりWebForm1側のボタン押下ハンドラ内の最後に、

.ImageUrl = "WebForm2.aspx?x=400&y=400";
Response.Redirect(.ImageUrl);

と記載しましたが、WebForm2内のPage_Load()において描画完了後
URLが
　http://･･･/WebForm2.aspx?x=400&y=400
のままになってしまいます。(これは当然ですが)
あとこの状態で、
　http://･･･/WebForm1.aspx
にアクセスしても先程のWebForm2側の描画結果がWebForm1のImage側には
反映されませんでした。


↓の『AI-Light』の時計みたいに処理的にはページ遷移はするが見た目は
元のページのままというふうなことは今回のような仕様で実現するには
やはり難しいのでしょうか？
それともソフトの組み方がどこか拙いのでしょうか？
http://www.ailight.jp/ASPGraph_Test.aspx
http://www.ailight.jp/ASPGraph.aspx

念のために以下に、マウスでクリックされた位置を取得して描画するソース
(WebForm2)を記載しておきます。

private void Page_Load(object sender, System.EventArgs e)
{
　　string image = "zaseki.jpeg";
　　Bitmap bitmap = new Bitmap(Server.MapPath(image));

　　Graphics g = Graphics.FromImage(bitmap);

　　if(Request.QueryString["x"] != null && Request.QueryString["y"] != null)
　　{
// WebForm1内にてマウスでクリックされた位置に□を描画
int x = System.Int32.Parse(Request.QueryString["x"]);
int y = System.Int32.Parse(Request.QueryString["y"]);
g.DrawRectangle(Pens.Red,x - 5,y - 5,10,10);
　　}

　　Response.ContentType="image/jpeg";
　　bitmap.Save(Response.OutputStream,ImageFormat.Jpeg);
}
alf
常連さん
会議室デビュー日: 2005/11/15
投稿数: 22
お住まい・勤務地: 岐阜県・愛知県
投稿日時: 2005-11-23 13:05

　無事解決しました。
　今回の場合はページ遷移するわけではないのでResponse云々は不要でした。
　ここに至るまで長い道のりでしたが、皆さん今までお付き合いしてください
　まして有難うございました。

todo
ぬし
会議室デビュー日: 2003/07/23
投稿数: 682
投稿日時: 2005-11-24 13:08
別解でクライアントイベントで処理する方法を考えてみました。

webform1.aspx
コード:
void Page_Load(Object sender, EventArgs e) 
{
	ImageButton1.ImageUrl = "webform2.aspx";
	ImageButton1.Attributes["onclick"] 
		= "this.src='webform2.aspx?x=' + event.offsetX + '&y=' + event.offsetY;"
		+ "return false;";
}


クライアントのonclickイベントで

webform2.aspx?x=**&y=**

をサーバにリクエストし、画像部分のみを入れ替えます。

流行りのAjaxという手法です。
«前のページへ 1|2|3

スキルアップ／キャリアアップ（JOB@IT）