如何在放大的图像上绘图？

Question

我的应用程序中有一个 Size 400X400 的图片框。图片框的SizeMode设置为Zoomed。我在图片框里加载了一张700X446的png图片。

我有以下问题，

尽管我是沿着红色路径画一条黑色直线，但实际上它是沿着加载的图像显示的，没有透视。

我该如何解决这个问题？

P.S. 我只想在图像上绘图，而不是整个图片框。

源代码：

 public partial class MainForm : Form
 {
    Bitmap _inputImage = null;
    //Graphics _imageGraphics = null;

    #region ctor
    public MainForm()
    {
        InitializeComponent();

        _inputImage = Bitmap.FromFile(@"E:\cracked.png") as Bitmap;

        this.inputImagePictureBox.Image = _inputImage;
    }
    #endregion

    #region Mouse Up and Down
    Point _startPoint = Point.Empty;

    private void left_MouseDown(object sender, MouseEventArgs e)
    {
        if (e.Button == System.Windows.Forms.MouseButtons.Left)
        {
            _startPoint = e.Location;

            Circle tempCircle = new Circle(_startPoint, 10);

            Bitmap tempImage = (Bitmap)_inputImage.Clone();

            Graphics g = Graphics.FromImage(tempImage);

            tempCircle.Draw(g);

            inputImagePictureBox.Image = tempImage;
        }
    }

    private void pressed_MouseMove(object sender, MouseEventArgs e)
    {
        if (e.Button == System.Windows.Forms.MouseButtons.Left)
        {
            if (_startPoint != e.Location)
            {
                Line tempLine = new Line(_startPoint, e.Location);

                Bitmap tempImage = (Bitmap)_inputImage.Clone();

                Graphics g = Graphics.FromImage(tempImage);

                tempLine.Draw(g);

                inputImagePictureBox.Image = tempImage;
            }
        }
    }

    Bitmap _savedImage;

    private void left__MouseUp(object sender, MouseEventArgs e)
    {
        if (e.Button == System.Windows.Forms.MouseButtons.Left)
        {
            if (_startPoint != e.Location)
            {
                Line tempLine = new Line(_startPoint, e.Location);

                Bitmap tempImage = (Bitmap)_inputImage.Clone();

                Graphics g = Graphics.FromImage(tempImage);

                tempLine.Draw(g);

                _savedImage = tempImage;

                inputImagePictureBox.Image = tempImage;
            }
            else
            {
                Bitmap tempImage = (Bitmap)_inputImage.Clone();
                Graphics g = Graphics.FromImage(tempImage);

                inputImagePictureBox.Image = tempImage;
            }
        }
    } 
}

Answer 1

您需要解决两个问题：

将 Graphics 区域剪辑到实际的 Image 而不是整个 PictureBox.ClientArea

Scale 接收和记录鼠标事件的坐标到实际图像，当你使用它们在 Paint 事件.

对于两者，我们需要知道 Image 的 zoom 因子；对于剪裁，我们还需要知道 ImageArea，对于绘图，我只存储两个鼠标位置。

这是我使用的 class 级别变量：

PointF mDown = Point.Empty; PointF mLast = Point.Empty; float zoom = 1f; RectangleF ImgArea = RectangleF.Empty;

请注意，我对所有人使用 floats，因为我们需要做一些除法..

首先我们将计算 zoom 和 ImageArea:

void GetImageScaleData(PictureBox pbox) { SizeF sp = pbox.ClientSize; SizeF si = pbox.Image.Size; float rp = 1f * sp.Width / sp.Height; // calculate the ratios of float ri = 1f * si.Width / si.Height; // pbox and image if (rp > ri) { zoom = sp.Height / si.Height; float width = si.Width * zoom; float left = (sp.Width - width) / 2; ImgArea = new RectangleF(left, 0, width, sp.Height); } else { zoom = sp.Width / si.Width; float height = si.Height * zoom; float top = (sp.Height - height) / 2; ImgArea = new RectangleF(0, top, sp.Width, height); } }

每次加载新的 Image 以及 PictureBox:
的任何 Resizing 时都应调用此例程
private void pictureBox1_Resize(object sender, EventArgs e) { GetImageScaleData(pictureBox1); }

现在需要存储鼠标位置。由于它们在调整大小后必须 可重复使用 我们需要将它们转换为图像坐标。这个例程可以做到这一点，也可以再次返回：

PointF scalePoint(PointF pt, bool scale) { return scale ? new PointF( (pt.X - ImgArea.X) / zoom, (pt.Y - ImgArea.Y) / zoom) : new PointF( pt.X * zoom + ImgArea.X, pt.Y * zoom + ImgArea.Y); }

最后我们可以编写 Paint 事件

private void pictureBox1_Paint(object sender, PaintEventArgs e) { using (Pen pen = new Pen(Color.Fuchsia, 2.5f) { DashStyle = DashStyle.Dot}) e.Graphics.DrawRectangle(pen, Rectangle.Round(ImgArea)); e.Graphics.SetClip(ImgArea); e.Graphics.DrawLine(Pens.Red, scalePoint(mDown, false), scalePoint(mLast, false)); }

..和鼠标事件：

private void pictureBox1_MouseDown(object sender, MouseEventArgs e) { mDown = scalePoint(e.Location, true); } private void pictureBox1_MouseMove(object sender, MouseEventArgs e) { if (e.Button == System.Windows.Forms.MouseButtons.Left) { mLast = scalePoint(e.Location, true); pictureBox1.Invalidate(); } }

对于更复杂的绘图，您可以将坐标存储在 List<PointF> 中并将它们转换回来，就像上面一样..:[=32=]
List<PointF> points = new List<PointF>();

然后：

e.Graphics.DrawCurve(Pens.Orange, points.Select(x => scalePoint(x, false)).ToArray());

如何在放大的图像上绘图？

How to draw on a zoomed image?

c#

winforms

bitmap

picturebox