C# と VB.NET の質問掲示板

ASP.NET、C++/CLI、Java 何でもどうぞ

C# と VB.NET の入門サイト

Re[41]: 拡縮した画像の上にRectangle


(過去ログ 50 を表示中)

[トピック内 54 記事 (1 - 20 表示)]  << 0 | 1 | 2 >>

■27272 / inTopicNo.1)  拡縮した画像の上にRectangle
  
□投稿者/ 猫 (23回)-(2008/11/01(Sat) 16:22:55)

分類:[C#] 

pictureBoxにpictureBoxサイズに拡縮した画像を表示させ、
表示させた画像の上に、Rectangleを(x = 0, y = 0, width = 100, heigut = 100)、
原点位置は(pictureBox1.Width / 2, pictureBox1.Height / 2)で、
描画させたいと思い、下記の様にコーディングしました。
無事、画像サイズはpictureBoxサイズに拡縮されていたのですが、
しかし、私の意図と違い表示されたRectangleのxとyはpictureBox1の真ん中にありませんでしたし、
WidthとHeightは等しいはずなのに長方形になりました。

Rectangleのx,yをpictureBox1のど真ん中にして、
Rectangleを正方形で表示するためにはどうすればよいのでしょうか?
全然が分からず、参っています。どなたかお助けください。
どうかよろしくお願いします。

コード
namespace test
{
    public partial class Form1 : Form
    {
        //表示する画像
        private Bitmap img;
        //画像を表示させる範囲
        private Rectangle imgRect;
        //表示させるレクタングルの表示範囲
        private Rectangle rectangle;

        public Form1()
        {
            InitializeComponent();
        }

        private void button1_Click(object sender, EventArgs e)
        {
            img = new Bitmap("表示させる画像のパス");
            float ratioW = (float)pictureBox1.Width / img.Width;
            float ratioH = (float)pictureBox1.Height / img.Height;
            int nw = Convert.ToInt32(img.Width * ratioW);
            int nh = Convert.ToInt32(img.Height * ratioH);
            imgRect = new Rectangle(0, 0, nw, nh);
            pictureBox1.Invalidate();

            Graphics graph = Graphics.FromImage(img);
            graph.TranslateTransform(pictureBox1.Width / 2, pictureBox1.Height / 2);
            rectangle = new Rectangle(0, 0, 100, 100);
            graph.DrawRectangle(Pens.Red, rectangle);
            graph.Dispose();
        }

        private void pictureBox1_Paint(object sender, PaintEventArgs e)
        {
            if (img != null)
            {
                e.Graphics.DrawImage(img, imgRect);
            }
        }
    }
}

引用返信 編集キー/
■27276 / inTopicNo.2)  Re[1]: 拡縮した画像の上にRectangle
□投稿者/ Jitta on the way (207回)-(2008/11/01(Sat) 20:39:49)
No27272 (猫 さん) に返信

画像の中央に描いてみましょう。picturebox ではなく、画像の中央に描くつもりで。


中央はそれでなんとかなるとして、正方形ですね。これも、画像をもとに考えます。縦も横も拡大または縮小されますから、それを考えて描きます。
引用返信 編集キー/
■27278 / inTopicNo.3)  Re[2]: 拡縮した画像の上にRectangle
□投稿者/ 猫 (24回)-(2008/11/01(Sat) 21:44:58)
No27276 (Jitta on the way さん) に返信

Jitta on the way さん ご返答ありがとうございます。
画像の中央に描画させようとは色々な値を掛けたりしてみたのですがどうにも上手くいかなくて;;
どうか、ご教授お願いできないでしょうか?


引用返信 編集キー/
■27279 / inTopicNo.4)  Re[3]: 拡縮した画像の上にRectangle
□投稿者/ Jitta (530回)-(2008/11/01(Sat) 22:06:23)
Jitta さんの Web サイト
No27278 (猫 さん) に返信
> ■No27276 (Jitta on the way さん) に返信
>
> Jitta on the way さん ご返答ありがとうございます。
> 画像の中央に描画させようとは色々な値を掛けたりしてみたのですがどうにも上手くいかなくて;;
> どうか、ご教授お願いできないでしょうか?
>
> 猫

元の画像の大きさを、ow, oh とします。それが、PictureBox (w, h) の大きさにまで拡大、または縮小されているのですから、元の画像が (w/ow, h/oh) 倍されているわけです。従って、四角形の大きさは、(100 * w/ow, 100 * h/oh) の式で表されます。

中央については、どれだけ拡縮しようが中央は中央です。(ow/2, oh/2) で、左上の点を中央にした四角形が描画されていると思いますけど?
引用返信 編集キー/
■27281 / inTopicNo.5)  Re[4]: 拡縮した画像の上にRectangle
□投稿者/ 猫 (25回)-(2008/11/01(Sat) 22:25:52)
No27279 (Jitta さん) に返信

Jitta さん 返信ありがとうございます
教えていただいた通り、
rectangle = new Rectangle(img.Width / 2, img.Height / 2, (int)Math.Round(100 * ratioW), (int)Math.Round(100 * ratioH));
としてみましたが、表示されたRectangleは、
正方形でもなければ中央に表示されることもありませんでした;;
上の式は間違っていますでしょうか?





引用返信 編集キー/
■27282 / inTopicNo.6)  Re[5]: 拡縮した画像の上にRectangle
□投稿者/ 倉田 有大 (306回)-(2008/11/01(Sat) 23:18:46)
No27281 (猫 さん) に返信
> ■No27279 (Jitta さん) に返信
>
> Jitta さん 返信ありがとうございます
> 教えていただいた通り、
> rectangle = new Rectangle(img.Width / 2, img.Height / 2, (int)Math.Round(100 * ratioW), (int)Math.Round(100 * ratioH));
> としてみましたが、表示されたRectangleは、
> 正方形でもなければ中央に表示されることもありませんでした;;
> 上の式は間違っていますでしょうか?
>
> 猫
>
ひょっとして中央より右したに描画されれます?
左のざひょうはpictureboxのよこはばから四角型のよこはばを引いて2でわるということじゃないのかな。
ソースためしてないので憶測ですいません。

#Wiiからなのでひらがなおいいなー
引用返信 編集キー/
■27283 / inTopicNo.7)  Re[6]: 拡縮した画像の上にRectangle
□投稿者/ 猫 (27回)-(2008/11/01(Sat) 23:55:15)
No27282 (倉田 有大 さん) に返信

倉田さん、返信ありがとうございます。
教えていただいた通り次のように訂正しましたがダメでした。
rectangle.Width = (int)Math.Round((100 * ratioW));
rectangle.Height = (int)Math.Round((100 * ratioH));
rectangle.X = (int)(pictureBox1.Width - rectangle.Width) / 2;
rectangle.Y = (int)(pictureBox1.Height - rectangle.Height) / 2;
どこがダメなんでしょうか?


引用返信 編集キー/
■27284 / inTopicNo.8)  Re[7]: 拡縮した画像の上にRectangle
□投稿者/ ま (151回)-(2008/11/02(Sun) 01:27:55)
No27283 (猫 さん) に返信
> ■No27282 (倉田 有大 さん) に返信

        private void button1_Click(object sender, EventArgs e)
        {
            Bitmap img = new Bitmap(@"C:\Documents and Settings\xxx\My Documents\My Pictures\DSCF0062BMP.BMP");
            pictureBox1.BackgroundImage = img;
            int x = pictureBox1.Width;
            int y = pictureBox1.Height;
            int w = 100;
            int h = 100;
            Bitmap bmp = new Bitmap(x, y);
            using (Graphics graph = Graphics.FromImage(bmp))
            {
                graph.DrawRectangle(Pens.Red, new Rectangle((x-100)/2, (y-100)/2, w, h));

                pictureBox1.Image = bmp;

            }
        }

からかっているとしか見えない・・・


引用返信 編集キー/
■27285 / inTopicNo.9)  Re[8]: 拡縮した画像の上にRectangle
□投稿者/ ま (152回)-(2008/11/02(Sun) 01:38:00)
最初のコードが画像が縮小表示するかと期待していたのに
縮小しませんけど。

コピペで画像ファイルの場所だけ差し替えれば実行できる
形式でコード載せてくれると嬉しいですね。

例えば、こんな風に。
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;

namespace WindowsFormsApplication2
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        PictureBox pic;
        Button btn;
        private void Form1_Load(object sender, EventArgs e)
        {
            pic = new PictureBox();
            btn = new Button();

            pic.Dock = DockStyle.Fill;
            btn.Dock = DockStyle.Bottom;
            this.Controls.Add(pic);
            this.Controls.Add(btn);
            btn.Click += button1_Click;

        }

        private void button1_Click(object sender, EventArgs e)
        {
            Bitmap img = new Bitmap(@"C:\Documents and Settings\xxx\My Documents\My Pictures\DSCF0062BMP.BMP");
            pic.BackgroundImage = img;
            int x = pic.Width;
            int y = pic.Height;
            int w = 100;
            int h = 100;
            Bitmap bmp = new Bitmap(x, y);
            using (Graphics graph = Graphics.FromImage(bmp))
            {
                graph.DrawRectangle(Pens.Red, new Rectangle((x-100)/2, (y-100)/2, w, h));

                pic.Image = bmp;

            }
        }
    }
}

こうすれば、デザイナで変な設定しておいたのを忘れて
書き漏らしたりしないで済むので。



引用返信 編集キー/
■27286 / inTopicNo.10)  Re[9]: 拡縮した画像の上にRectangle
□投稿者/ 猫 (28回)-(2008/11/02(Sun) 02:06:40)
No27285 (ま さん) に返信

ま さん返信ありがとうございます。
教えていただいた通りのソースコードを実行すると、
画像サイズがForm一杯に表示されてしまいました;;
しかも、画像サイズは、Formサイズに拡縮されていませんでした。
そして、実行中にFormのサイズを変更すると、
画像の見えなかった部分が表示され、
さらに、それより更にFormのサイズをでかくすると、画像が2つ3つ表示されていきます、、。

私の意図している画像サイズは、pictureboxサイズに拡縮することです。
あでも、Rectangleは正方形で、真ん中に表示されていました。
どうなっているのでしょうか??


引用返信 編集キー/
■27289 / inTopicNo.11)  Re[10]: 拡縮した画像の上にRectangle
□投稿者/ 倉田 有大 (307回)-(2008/11/02(Sun) 14:03:40)
2008/11/02(Sun) 14:11:44 編集(投稿者)

No27286 (猫 さん) に返信
> ■No27285 (ま さん) に返信
>
> ま さん返信ありがとうございます。
> 教えていただいた通りのソースコードを実行すると、
> 画像サイズがForm一杯に表示されてしまいました;;
> しかも、画像サイズは、Formサイズに拡縮されていませんでした。
> そして、実行中にFormのサイズを変更すると、
> 画像の見えなかった部分が表示され、
> さらに、それより更にFormのサイズをでかくすると、画像が2つ3つ表示されていきます、、。
>
> 私の意図している画像サイズは、pictureboxサイズに拡縮することです。
> あでも、Rectangleは正方形で、真ん中に表示されていました。
> どうなっているのでしょうか??
>
> 猫

間違えました。失礼、消去消去。
引用返信 編集キー/
■27290 / inTopicNo.12)  Re[11]: 拡縮した画像の上にRectangle
□投稿者/ 倉田 有大 (308回)-(2008/11/02(Sun) 14:14:49)
No27289 (倉田 有大 さん) に返信
> 2008/11/02(Sun) 14:11:44 編集(投稿者)
>
> ■No27286 (猫 さん) に返信
>>■No27285 (ま さん) に返信
>>
>>ま さん返信ありがとうございます。
>>教えていただいた通りのソースコードを実行すると、
>>画像サイズがForm一杯に表示されてしまいました;;
>>しかも、画像サイズは、Formサイズに拡縮されていませんでした。
>>そして、実行中にFormのサイズを変更すると、
>>画像の見えなかった部分が表示され、
>>さらに、それより更にFormのサイズをでかくすると、画像が2つ3つ表示されていきます、、。
>>
>>私の意図している画像サイズは、pictureboxサイズに拡縮することです。
>>あでも、Rectangleは正方形で、真ん中に表示されていました。
>>どうなっているのでしょうか??
>>
>>猫
>
まさんのはフォームいっぱいにpicturrboxつかってるから、そうみえるだけです。
imageプロパティーじゃだめだっけ?
引用返信 編集キー/
■27291 / inTopicNo.13)  Re[12]: 拡縮した画像の上にRectangle
□投稿者/ 猫 (29回)-(2008/11/02(Sun) 14:37:01)
No27290 (倉田 有大 さん) に返信

倉田さん返信ありがとうございます。
imageプロパティーとは、どこでどのように使えばいいんですか?

まさんのコードの話ですが、
画像が拡縮されない問題と、画像が2枚3枚つながって表示される問題
はどのようにクリアすればよいのでしょうか?

また、もしこのコードに画像ズーム機能をつけたら
画像拡大に伴って、Rectangleも拡大してくれますでしょうか?

質問ばかりで恐縮ですが、ご教授いただけると幸いです。


引用返信 編集キー/
■27292 / inTopicNo.14)  Re[13]: 拡縮した画像の上にRectangle
□投稿者/ 倉田 有大 (309回)-(2008/11/02(Sun) 14:59:52)

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;

namespace WindowsFormsApplication2
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        PictureBox pic;
        Button btn;
        private void Form1_Load(object sender, EventArgs e)
        {
            pic = new PictureBox();
            btn = new Button();
            pic.SizeMode = PictureBoxSizeMode.StretchImage;
            pic.Paint += new PaintEventHandler(PicPaint);
            pic.Dock = DockStyle.Fill;
            btn.Dock = DockStyle.Bottom;
            
            this.Controls.Add(pic);
            this.Controls.Add(btn);
            btn.Click += button1_Click;

        }

        private void button1_Click(object sender, EventArgs e)
        {
            Bitmap img = new Bitmap(@"c:\test.jpg");
            pic.Image = img;
        
        }

        void PicPaint(object o, PaintEventArgs e)
        {
            int x = pic.Width;
            int y = pic.Height;
            int w = 100;
            int h = 100;
            e.Graphics.DrawRectangle(Pens.Red, new Rectangle((x - 100) / 2, (y - 100) / 2, w, h));
        }
    }
}

ま さんのソースを改良。
これでいいの?

引用返信 編集キー/
■27293 / inTopicNo.15)  Re[13]: 拡縮した画像の上にRectangle
□投稿者/ 倉田 有大 (310回)-(2008/11/02(Sun) 15:05:29)
>また、もしこのコードに画像ズーム機能をつけたら
>画像拡大に伴って、Rectangleも拡大してくれますでしょうか?

そういうの全部考えてプログラム組んでいくんですよ〜
拡大してくれないのなら拡大してくれるようにソースを記述するだけです。
まずは、ズーム機能つけてから考えていけばいいと思います。
引用返信 編集キー/
■27296 / inTopicNo.16)  Re[14]: 拡縮した画像の上にRectangle
□投稿者/ 倉田 有大 (311回)-(2008/11/03(Mon) 00:03:29)
No27293 (倉田 有大 さん) に返信
> >また、もしこのコードに画像ズーム機能をつけたら
> >画像拡大に伴って、Rectangleも拡大してくれますでしょうか?

追記〜
ズーム機能を追加したいのなら、imageプロパティーは使えないかと。
さいしょの猫さんのソースのようにpictureboxにがりがり書いていくしかないです。
もちろん、画像のどこからどこまでを表示するか計算するんですよ〜
スクロール機能も必要になるんではないでしょうか?
覚えないといけないことが結構あります。
引用返信 編集キー/
■27297 / inTopicNo.17)  Re[15]: 拡縮した画像の上にRectangle
□投稿者/ 猫 (30回)-(2008/11/03(Mon) 01:30:51)
No27296 (倉田 有大 さん) に返信

倉田さん、返信ありがとうございます。
そうですね、倉田さんのおっしゃる通り、
倉田さんに改良していただいたまさんのコードでは、
画像を拡大した時Rectangleは一緒に拡大してくれませんでした。

やはり、私が最初に投稿したソースを大幅な変更をせずに、
改善していくのが一番の近道だと思うんです。

ので、もう一度お尋ねしたい内容を整理します。

仮に、pictureboxのサイズを(w=500, h=500)すると、
とりあえず、表示する画像は強制的に(w=500, h=500)に拡縮します。
(それは、最初の投稿のコードで実現出来ています。)
そして、その画像の上に、picturebox上の(x=250, y=250)の点を原点とした
Rectangleを原点(pictureboxにとっては(x=250, y=250), Rectangleにとっては(x=0, y=0))
にw=hの正方形を表示したいというただそれだけのことなんです。

それを実現するには、
graph.TranslateTransform(pictureBox1.Width / 2, pictureBox1.Height / 2);
に、重要なカギがありそうなのですがどうにも分からなくて;;

将来的には、ズーム機能をつけて画像とRectangleが同時に拡大するようにしたいと思いますので、
その点も考慮の上教えていただければ幸いです。
お手数をおかけしますが、どうかご教授ください。









引用返信 編集キー/
■27298 / inTopicNo.18)  Re[16]: 拡縮した画像の上にRectangle
□投稿者/ ま (153回)-(2008/11/03(Mon) 02:14:57)
http://www.pinvoke.net/default.aspx/gdi32/StretchBlt.html

http://d.hatena.ne.jp/haraguroblog/20070615/1181902963

http://m--takahashi.com/bbs/pastlog/12800/12740.html

とりあえず、なにかありそうだけど・・・拡大縮小。

サムネイル(全体画像)の上に十字カーソル置いて、そのカーソルの前後左右100ドット近辺を拡大する、
なんてな仕掛けなのかな?違う?
それとも、元の質問の100*100のエリアをマウス左で拡大・右で縮小とかやりたいのかな?
最終的には□は動かせるようにしたいんでしょう?マウスドラッグできるとか・・・



引用返信 編集キー/
■27299 / inTopicNo.19)  Re[17]: 拡縮した画像の上にRectangle
□投稿者/ ま (154回)-(2008/11/03(Mon) 02:22:31)
あ、忘れてた。

入力画像サイズってまさか、100万×100万ドットとかじゃないよね?

白黒255色の100万×100万ドットの画像ならやったことあるけどもう忘れちゃいました・・・

CPUウェハーの塵検出するとか・・・


引用返信 編集キー/
■27301 / inTopicNo.20)  Re[18]: 拡縮した画像の上にRectangle
 
□投稿者/ 猫 (31回)-(2008/11/03(Mon) 11:37:09)
No27299 (ま さん) に返信

まさん、返信ありがとうございます。

まさに、まさんのおっしゃる通り将来的には
『サムネイル(全体画像)の上に十字カーソル置いて、
そのカーソルの前後左右100ドット近辺を拡大する』
という仕掛けを作りたいと思っています。
それを実装するのはむずかしいでしょうか?

ま、そのためにもまず、picturebox上の好きな点に、
Rectangleを描画出来るようにして、
画像の拡大とRectangleの拡大の同期を早く実現したいのですが、、

どうしても、pictureboxのセンターを原点にしたRectangleを描画出来ないし、
WidthとHeightは同じ値にしたはずなのに正方形にならないんです。
(ちなみに、Rectangleにとっての原点をpictureboxのセンターにしたい理由は、
Rectangleでは、マイナスの値が入っても描画したいためです;;)

どうかお助けください。
お願いします。


引用返信 編集キー/

次の20件>
トピック内ページ移動 / << 0 | 1 | 2 >>

管理者用

- Child Tree -