イメージのマウス座標に描画したい

環境/言語:[Windows7　C#　VisualStudio10]
分類:[.NET]

2012/06/10(Sun) 12:56:33 編集(投稿者)
2012/06/10(Sun) 12:56:26 編集(投稿者)

現在、C#でお絵かきソフトを作っているのですが、
マウスで描きこまれる位置がずれてしまいます。

描画先を
bmp = new Bitmap(480, 320);
とした場合は、うまくいくのですが、

下敷き画像の上に描画させたいため、以下のように、画像指定したところ、
マウスと描画ラインの位置がずれてしまいました。
bmp = new Bitmap("画像アドレス.bmp");

スクリーン座標やクライアント座標に変換してもずれてしまいます。

何か方法がありましたら、ご教授お願いします。


/////////////以下ソースです。
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 WindowsFormsApplication1
{
    public partial class Form1 : Form
    {
        int beforeX, beforeY;
        Bitmap bmp;
        Brush b;
        Pen p;
        int strokeWidth;

        public Form1()
        {
            InitializeComponent();
            this.DoubleBuffered = true;
            this.Paint += new PaintEventHandler(Form1_Paint);
            this.ClientSizeChanged += new EventHandler(Form1_ClientSizeChanged);
            this.MouseDown += new MouseEventHandler(Form1_MouseDown);
            this.MouseMove += new MouseEventHandler(Form1_MouseMove);
            this.MouseUp += new MouseEventHandler(Form1_MouseUp);

            SetClientSizeCore(600, 480);

            //bmp = new Bitmap(480, 320);
            // ★マウス描画がずれる
            bmp = new Bitmap("C:\\Users\\PC\\Desktop\\test.bmp");
            Graphics g = Graphics.FromImage(bmp);
            g.FillRectangle(new SolidBrush(Color.White), 0, 0, bmp.Width, bmp.Height);

            b = new SolidBrush(Color.Black);
            p = new Pen(Color.Black);
            strokeWidth = 10;
        }
        void Form1_Paint(object sender, PaintEventArgs e)
        {
            Graphics g = e.Graphics;
            g.DrawImage(bmp, 0, 0);
        }
        void Form1_ClientSizeChanged(object sender, EventArgs e)
        {
            Invalidate();
        }

        //マウスイベント
        void Form1_MouseDown(object sender, MouseEventArgs e)
        {
            //マウスを押した時の処理
            if (e.Button == MouseButtons.Left)
            {
                Graphics g = Graphics.FromImage(bmp);

                Point point;
                point = e.Location;

                //マウスの位置に丸を描画
                g.FillEllipse(b, point.X - strokeWidth / 2, point.Y - strokeWidth / 2, strokeWidth, strokeWidth);

                //マウスの位置を保存
                beforeX = point.X;
                beforeY = point.Y;
                Invalidate();
            }
        }
        void Form1_MouseMove(object sender, System.Windows.Forms.MouseEventArgs e)
        {
            //マウスを動かした時の処理
            if (e.Button == MouseButtons.Left)
            {
                //クリックボタンが押されていれば

                Graphics g = Graphics.FromImage(bmp);

                Point point;
                point = e.Location;

                //マウスの位置に丸を描画
                g.FillEllipse(b, point.X - strokeWidth / 2, point.Y - strokeWidth / 2, strokeWidth, strokeWidth);

                //前の位置から現在の位置まで線を描画
                p.Width = strokeWidth;
                g.DrawLine(p, beforeX, beforeY, point.X, point.Y);

                //マウスの位置を保存
                beforeX = point.X;
                beforeY = point.Y;

                Invalidate();
            }
        }
        void Form1_MouseUp(object sender, System.Windows.Forms.MouseEventArgs e)
        {
            //マウスを離した時の処理
            if (e.Button == MouseButtons.Left)
            {
                Graphics g = Graphics.FromImage(bmp);

                Point point;
                point = e.Location;

                //マウスの位置に丸を描画
                p.Width = strokeWidth;
                g.FillEllipse(b, point.X - strokeWidth / 2, point.Y - strokeWidth / 2, strokeWidth, strokeWidth);

                //前の位置から現在の位置まで線を描画
                g.DrawLine(p, beforeX, beforeY, point.X, point.Y);

                Invalidate();
            }
        }

        void Form1_Load(object sender, EventArgs e)
        {
        }
    }
}

自己解決いたしました。
ソースの★部分を以下のように変更するとうまくいきました。
                Image image = image = new Bitmap(@"C:\Users\PC\Desktop\test.bmp");
                bmp = new Bitmap(image,600,400);

■No30556に返信(kintonさんの記事)
> 自己解決いたしました。

解決されたようですが、元画像のサイズを変更してしまうのは
お絵かきソフトとしてはいまひとつかと思います。
描画するときの拡縮率を考慮してマウス座標から元画像の座標への
変換を行うと良いかと思います。

元画像: w1 x h1
描画領域： w2 x h2

縦横比固定でなく、描画領域いっぱいに描画するなら
横倍率:w2/w1、縦倍率:h2/h1
で描画されるので
マウス座標(x1,y1)は元画像の(x1*w1/w2, y1*h1/h2)
に相当する。

縦横比固定なら
倍率:z
として
マウス座標(x1,y1)は元画像の(x1/z, y1/z)
に相当する。

ということを考慮されるとよいかと思います。

shu様

ありがとうございます。
教えていただいた方が汎用性がありますね。
参考にさせていただきます！