C# 画像について

[33tree]

http://note.chiebukuro.yahoo.co.jp/detail/n84480
での背景画像を
http://homepage2.nifty.com/nonnon/SoftS ... itmap.html
を使って回転させようと考えているのですがどのようにすればよいでしょうか？

[asd]

http://note.chiebukuro.yahoo.co.jp/detail/n84480
での背景画像を
http://homepage2.nifty.com/nonnon/SoftS ... itmap.html
を使って回転させようと考えているのですがどのようにすればよいでしょうか？

サンプルをそのまま使えばいいだけのような気がしますが、何がわかりませんか？

・C#プログラムの実行方法
・サンプルを実行してみたけど、思う通りに動かない
　→開発環境や実行した手順の説明と、エラーが出る場合はエラーの内容、意図しない動作になる場合はどうなると考えていて実際はどうなっているのかを詳しく
・画像を差し替えてサンプルを動かす方法がわからない

何でつまずいているのかを書いておけばアドバイスがつきやすくなりますよ。

[33tree]

この2つのサンプルは動くのですが、どのように組み合わせればいいのかわからないのです。

[33tree]

このようにしたのですが背景が変です。

コード:

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 ComposePNGImage
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();           
        }
        
        private float ang = 180;

        //============
        // 初期化処理
        private void Form1_Load(object sender, EventArgs e)
        {
            button1.Text = "画像表示";
        }

        //============
        // 背景画像の上にキャラクター画像が合成された画像を表示
        private void button1_Click_1(object sender, EventArgs e)
        {
            ang++;
            // グラフィック用オブジェクトを生成
            Graphics gr = pictureBox1.CreateGraphics();
            // 画像指定
            Bitmap BackgroundImg = new Bitmap("C:\\背景.jpg"); // 背景画像
            Bitmap CharacterImg = new Bitmap("C:\\キャラクター.png"); // ｷｬﾗｸﾀｰ画像
            // ｷｬﾗｸﾀｰ位置指定
            Point CharaPosition = new Point(); // ｷｬﾗｸﾀｰ位置
            CharaPosition.X = 0;
            CharaPosition.Y = 0;
            // 背景画像の描画
            gr.DrawImage(RotateBitmap(BackgroundImg, ang, 110, 70), new Rectangle(new Point(0, 0), pictureBox1.Size));
            // ｷｬﾗｸﾀｰ画像の描画
            gr.DrawImage(CharacterImg, new Rectangle(CharaPosition, CharacterImg.Size), 0, 0, CharacterImg.Width, CharacterImg.Height, GraphicsUnit.Pixel);
        }

        /// <summary>
        /// ビットマップ(Bitmap)を回転する
        /// </summary>
        /// <param name="bmp">ビットマップ</param>
        /// <param name="angle">回転角度</param>
        /// <param name="x">中心点Ｘ</param>
        /// <param name="y">中心点Ｙ</param>
        /// <returns></returns>
        public Bitmap RotateBitmap(Bitmap bmp, float angle, int x, int y)
        {
            Bitmap bmp2 = new Bitmap((int)bmp.Width, (int)bmp.Height);
            Graphics g = Graphics.FromImage(bmp2);
            g.Clear(Color.Black);

            g.TranslateTransform(-x, -y);
            g.RotateTransform(angle, System.Drawing.Drawing2D.MatrixOrder.Append);
            g.TranslateTransform(x, y, System.Drawing.Drawing2D.MatrixOrder.Append);

            g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBilinear;

            g.DrawImageUnscaled(bmp, 0, 0);
            g.Dispose();

            return bmp2;
        }

    }
}

[softya（ソフト屋)]

ＸＮＡを使ったほうが合成や回転は楽だと思いますが、そちらは選択肢にはないのでしょうか？

「回転軸を指定してスプライトを回転させる - XNA - ソーサリーフォース」
http://sorceryforce.com/xna/tips_setori ... prite.html

[33tree]

XNAを使わない方向で考えたいです。
上に書いたプログラムではなんか画像が変になってしますのですが何がおかしいのでしょうか？

[softya（ソフト屋)]

XNAを使わない方向で考えたいです。
上に書いたプログラムではなんか画像が変になってしますのですが何がおかしいのでしょうか？

画像が縮小されているみたいですね。
少し調べてみます。

[33tree]

こんなプログラムを書いてみましたが同じように画像が縮小されてしまいます。

コード:

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 ComposePNGImage
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }
        private float ang = -1;
        //============
        // 初期化処理
        private void Form1_Load(object sender, EventArgs e)
        {
            button1.Text = "画像表示";
        }

        //============
        // 背景画像の上にキャラクター画像が合成された画像を表示
        private void button1_Click_1(object sender, EventArgs e)
        {
            ang++;
            Bitmap pic1 = new Bitmap(@"c:\\背景.jpg");
            Bitmap pic2 = new Bitmap(@"c:\\キャラクター.png");
            Bitmap resultPic = new Bitmap(RotateBitmap(pic1, ang, 0, 0));
            Graphics g = Graphics.FromImage(resultPic);
            g.DrawImage(pic2, 0, 0, pic2.Width, pic2.Height);
            g.Dispose();
            pic1.Dispose();
            pic2.Dispose();
            pictureBox1.Image = resultPic;
        }

        /// <summary>
        /// ビットマップ(Bitmap)を回転する
        /// </summary>
        /// <param name="bmp">ビットマップ</param>
        /// <param name="angle">回転角度</param>
        /// <param name="x">中心点Ｘ</param>
        /// <param name="y">中心点Ｙ</param>
        /// <returns></returns>
        public Bitmap RotateBitmap(Bitmap bmp, float angle, int x, int y)
        {
            Bitmap bmp2 = new Bitmap((int)bmp.Width, (int)bmp.Height);
            Graphics g = Graphics.FromImage(bmp2);
            g.Clear(Color.Black);

            g.TranslateTransform(-x, -y);
            g.RotateTransform(angle, System.Drawing.Drawing2D.MatrixOrder.Append);
            g.TranslateTransform(x, y, System.Drawing.Drawing2D.MatrixOrder.Append);

            g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBilinear;

            g.DrawImageUnscaled(bmp, 0, 0);
            g.Dispose();

            return bmp2;
        }

    }
}

[softya（ソフト屋)]

縮小はRotateBitmap内で発生しているのでRotateBitmapを使う限り同じです。
.NETを日頃使わないので調べ中です。

[softya（ソフト屋)]

こうすれば縮小されなくなります。
.NETに詳しくないので、DrawImageUnscaledの問題点は不明です。DPIとかそちらの絡みだとは思いますが。

コード:

		/// <summary>
		/// ビットマップ(Bitmap)を回転する
		/// </summary>
		/// <param name="bmp">ビットマップ</param>
		/// <param name="angle">回転角度</param>
		/// <param name="x">中心点Ｘ</param>
		/// <param name="y">中心点Ｙ</param>
		/// <returns></returns>
		public Bitmap RotateBitmap( Bitmap bmp, float angle, int x, int y ) {
			Bitmap bmp2 = new Bitmap( ( int )bmp.Width, ( int )bmp.Height );
			Graphics g = Graphics.FromImage( bmp2 );
			g.Clear( Color.Black );

			g.ResetTransform();
			g.TranslateTransform( -x, -y );
			g.RotateTransform( angle, System.Drawing.Drawing2D.MatrixOrder.Append );
			g.TranslateTransform( x, y, System.Drawing.Drawing2D.MatrixOrder.Append );

			g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBilinear;


			//画像を描画
			g.DrawImage( bmp, new Rectangle(0, 0, bmp.Width, bmp.Height));
//			g.DrawImageUnscaled( bmp, 0, 0 );
			g.Dispose();

			return bmp2;
		}

[asd]

こんなプログラムを書いてみましたが同じように画像が縮小されてしまいます。

おかしくなるだけじゃわからないとツッコミを入れようと思ったら詳細が出てましたね。
軽く調べてみたところ、ピクセル等倍で描画するにはちょっとコツがいるようです。

コード:

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 ComposePNGImage
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }
        private float ang = -1;
        //============
        // 初期化処理
        private void Form1_Load(object sender, EventArgs e)
        {
            button1.Text = "画像表示";
        }

        //============
        // 背景画像の上にキャラクター画像が合成された画像を表示
        private void button1_Click(object sender, EventArgs e)
        {
            ang++;
            Bitmap pic1 = new Bitmap(@"c:\\背景.jpg");
            Bitmap pic2 = new Bitmap(@"c:\\キャラクター.png");
            Bitmap resultPic = new Bitmap(RotateBitmap(pic1, ang, 210, 129));//背景.jpgの中心座標を指定
            Graphics g = Graphics.FromImage(resultPic);
            g.DrawImage(pic2, 0, 0, pic2.Width, pic2.Height);
            g.Dispose();
            pic1.Dispose();
            pic2.Dispose();
            pictureBox1.Image = resultPic;
        }

        /// <summary>
        /// ビットマップ(Bitmap)を回転する
        /// </summary>
        /// <param name="bmp">ビットマップ</param>
        /// <param name="angle">回転角度</param>
        /// <param name="x">中心点Ｘ</param>
        /// <param name="y">中心点Ｙ</param>
        /// <returns></returns>
        public Bitmap RotateBitmap(Bitmap bmp, float angle, int x, int y)
        {
            Bitmap bmp2 = new Bitmap((int)bmp.Width, (int)bmp.Height);
            Graphics g = Graphics.FromImage(bmp2);
            g.Clear(Color.Black);

            g.TranslateTransform(-x, -y);
            g.RotateTransform(angle, System.Drawing.Drawing2D.MatrixOrder.Append);
            g.TranslateTransform(x, y, System.Drawing.Drawing2D.MatrixOrder.Append);

            g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBilinear;
            
            Rectangle targetRect = new Rectangle(0, 0, bmp.Width, bmp.Height);//ピクセル等倍で描画するための四角形領域作成
            //g.DrawImageUnscaled(bmp, 0, 0);
            g.DrawImage(bmp, targetRect, targetRect, GraphicsUnit.Pixel);//元の画像サイズと同じサイズの四角形領域に合わせて描画する
            g.Dispose();
            
            return bmp2;
        }

    }
}

回転した画像を描画する際に、元の画像サイズと同じ大きさのRectangleを指定して、元の画像と同じサイズで描画させることで
縮小を防げるようです。
画像が持つ解像度情報と実際に表示する画面の解像度を一致させた結果、縮小されるようです。
(画像が300dpi、表示する画面が72dpiの場合、画像の解像度を落として72dpiにしようとするために縮小されるということみたいです)

DrawImageUnscaledといいつつも、上記の画像情報と表示画面の解像度のスケーリングは行われるみたいですね。

(参考)
http://mag.autumn.org/Content.modf?id=20050508151130

これでうまく縮小されなくなるとよいのですが(*´ヮ｀)

#わわっ、softyaさんと被ってしまった(ノ∀｀)

[33tree]

お二方ともありがとうございます。
もう一つ問題点があったのですが
ピクチャーボックスのプロパティーでCenterImageに設定するとキャラクターが変なところにあって真ん中に来ません。

[33tree]

間違えました。
ちょっと待っててください。

[33tree]

背景の画像を上下（0度の回転で）に動かしたいです。その時、回転の中心がピクチャーボックスの中央に来るようにしたいです。
文字で表現しづらいのですが、わかりますか？

これでしょうか？

コード:

			// 背景画像の描画
			gr.DrawImage( RotateBitmap( BackgroundImg, ang, ( int )BackgroundImg.Width/2, ( int )BackgroundImg.Height/2 ), new Rectangle( new Point( 0, 0 ), pictureBox1.Size ) );

[asd]

背景の画像を上下（0度の回転で）に動かしたいです。その時、回転の中心がピクチャーボックスの中央に来るようにしたいです。
文字で表現しづらいのですが、わかりますか？

これでしょうか？

コード:

			// 背景画像の描画
			gr.DrawImage( RotateBitmap( BackgroundImg, ang, ( int )BackgroundImg.Width/2, ( int )BackgroundImg.Height/2 ), new Rectangle( new Point( 0, 0 ), pictureBox1.Size ) );

文面からすると、
・0度の回転で(=回転せずに)画像を上下に動かしい　のか
・回転の中心をピクチャーボックスの中心にしたい　のか
どちらでしょう？

画像を移動するだけであれば、TranslateTransformを行えばいいはずです。
(RotateTransformをしなければ回転はしません)

回転の中心座標をピクチャーボックスの中心にしたいのであれば、BackgroundImgのサイズではなく、PictureBoxのサイズを利用する必要がありますね。
(pictureBox1.WidthとpictureBox1.Heightを半分にしたものを使えばOKなはずです)
そんな単純じゃなさそうなので削除

SizeModeをCenterImageにすると、回転された画像がピクチャーボックスの中心に表示されますが、どうなってくれればOKなんでしょうか？

[33tree]

画像を回転させた方向にnだけ動かしたいのです。

いい例えが見つかりました！
飛行機の指定を表示する計器のような感じです。

キャラクター画像はこれを使ってください
http://cdn.uploda.cc/img/img500a70913da3d.png

コード:

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 ComposePNGImage
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }
        private float ang = -1;
        //============
        // 初期化処理
        private void Form1_Load(object sender, EventArgs e)
        {
            pictureBox1.SizeMode = PictureBoxSizeMode.CenterImage;
            button1.Text = "画像表示";
        }

        //============
        // 背景画像の上にキャラクター画像が合成された画像を表示
        private void button1_Click_1(object sender, EventArgs e)
        {
            ang++;
            Bitmap pic1 = new Bitmap(@"c:\\背景.jpg");
            Bitmap pic2 = new Bitmap(@"c:\\キャラクター.png");
            Bitmap resultPic = new Bitmap(RotateBitmap(pic1, ang, (int)pic1.Width / 2, (int)pic1.Height / 2));//背景.jpgの中心座標を指定
            Graphics g = Graphics.FromImage(resultPic);
            g.DrawImage(pic2, 136, 55, pic2.Width, pic2.Height);
            g.Dispose();
            pic1.Dispose();
            pic2.Dispose();
            pictureBox1.Image = resultPic;
        }

        /// <summary>
        /// ビットマップ(Bitmap)を回転する
        /// </summary>
        /// <param name="bmp">ビットマップ</param>
        /// <param name="angle">回転角度</param>
        /// <param name="x">中心点Ｘ</param>
        /// <param name="y">中心点Ｙ</param>
        /// <returns></returns>
        public Bitmap RotateBitmap(Bitmap bmp, float angle, int x, int y)
        {
            Bitmap bmp2 = new Bitmap((int)bmp.Width, (int)bmp.Height);
            Graphics g = Graphics.FromImage(bmp2);
            g.Clear(Color.Black);

            g.TranslateTransform(-x, -y);
            g.RotateTransform(angle, System.Drawing.Drawing2D.MatrixOrder.Append);
            g.TranslateTransform(x, y, System.Drawing.Drawing2D.MatrixOrder.Append);

            g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBilinear;

            Rectangle targetRect = new Rectangle(0, 0, bmp.Width, bmp.Height);//ピクセル等倍で描画するための四角形領域作成
            //g.DrawImageUnscaled(bmp, 0, 0);
            g.DrawImage(bmp, targetRect, targetRect, GraphicsUnit.Pixel);//元の画像サイズと同じサイズの四角形領域に合わせて描画する
            g.Dispose();

            return bmp2;
        }

    }
}

[softya（ソフト屋)]

えーと、このまま行くとすごく重そうなのですが、どうしても.NETなのでしょうか？
DirectXでビデオカードの機能を使うXNAと違って.NETはＣＰＵで基本処理するので回転その他すべての処理が重いです。
画像サイズが小さい内は良いですが大きくなると重いですよ。

さらにコレに色々付け加えるんですよね？

【補足】
あと丸投げっぽくなってきたので、ご自分でも考えてみて下さい。

[33tree]

あとは
http://dixq.net/forum/viewtopic.php?f=3&t=11111#p89509
だけです。

[asd]

いい例えが見つかりました！
飛行機の指定を表示する計器のような感じです。

とりあえず提示されたキャラクタ画像とコードを実行すると、私の環境ではこんな感じの表示になりますが、
計器と同じように中心で回転して計器枠(キャラクタ画像)も中央に表示されています。
この状態でnだけ移動するというのは、回転した後さらに画像を移動したいということでしょうか？
であればRotateTransformの後にTranslateTransformを実行すれば平行移動はできるはずです。

[softya（ソフト屋)]

こう書かせていただきましたが、

【補足】
あと丸投げっぽくなってきたので、ご自分でも考えてみて下さい。

まず、RotateBitmapを理解して下さい。
そうすれば、どうすれな良いか分かるはずです。
わからないところは質問して下さい。

[33tree]

ありがとうございました。解決しました。
sadさん　ソフト屋さんありがとうございました。

コード:

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 ComposePNGImage
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }
        private float ang = 89;
        //============
        // 初期化処理
        private void Form1_Load(object sender, EventArgs e)
        {
            pictureBox1.SizeMode = PictureBoxSizeMode.CenterImage;
            button1.Text = "画像表示";
        }

        //============
        // 背景画像の上にキャラクター画像が合成された画像を表示
        private void button1_Click_1(object sender, EventArgs e)
        {
            ang++;
            Bitmap pic1 = new Bitmap(@"c:\\背景.bmp");
            Bitmap pic2 = new Bitmap(@"c:\\キャラクター.png");
            Bitmap resultPic = new Bitmap(RotateBitmap(pic1, ang, (int)pic1.Width / 2, (int)pic1.Height / 2));//背景.jpgの中心座標を指定
            Graphics g = Graphics.FromImage(resultPic);
            g.DrawImage(pic2, 26, 306, pic2.Width, pic2.Height);
            g.Dispose();
            pic1.Dispose();
            pic2.Dispose();
            pictureBox1.Image = resultPic;
        }

        /// <summary>
        /// ビットマップ(Bitmap)を回転する
        /// </summary>
        /// <param name="bmp">ビットマップ</param>
        /// <param name="angle">回転角度</param>
        /// <param name="x">中心点Ｘ</param>
        /// <param name="y">中心点Ｙ</param>
        /// <returns></returns>
        public Bitmap RotateBitmap(Bitmap bmp, float angle, int x, int y)
        {
            Bitmap bmp2 = new Bitmap((int)bmp.Width, (int)bmp.Height);
            Graphics g = Graphics.FromImage(bmp2);
            g.Clear(Color.Black);

            g.TranslateTransform(-x, -y);
            g.RotateTransform(angle, System.Drawing.Drawing2D.MatrixOrder.Append);
            g.TranslateTransform(x, y, System.Drawing.Drawing2D.MatrixOrder.Append);
            g.TranslateTransform(0, 0);
            g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBilinear;

            Rectangle targetRect = new Rectangle(0, 0, bmp.Width, bmp.Height);//ピクセル等倍で描画するための四角形領域作成
            //g.DrawImageUnscaled(bmp, 0, 0);
            g.DrawImage(bmp, targetRect, targetRect, GraphicsUnit.Pixel);//元の画像サイズと同じサイズの四角形領域に合わせて描画する
            g.Dispose();

            return bmp2;
        }

    }
}

[asd]

ありがとうございました。解決しました。

提示されたコードを見ると、キャラクタ枠の表示位置を変えただけの見えますが、何が問題だったのでしょうね＾＾；
softyaさんの指摘にもありますが、自分の書いたコードが何をしているのかを理解しておくといいですよ(*´ヮ｀)

sadさん　ソフト屋さんありがとうございました。

解決したようでよかったです。
ちなみに私の名前はasdです(ノ∀｀)

[33tree]

画像の設定が間違っていただけでした。

[asd]

画像の設定が間違っていただけでした。

なるほど、プログラムに問題があったわけではなかったのですね。

オフトピック

名前を間違えている件についてはスルーですか、そうですかorz