Picturebox中的绘图矩形未按鼠标比例缩放 [英] Drawing rect in picturebox not done to right scale for mouse

问题描述

我目前有一个图片框，用户将在其中单击并拖动以在图像上绘制一个矩形(可以定期更改该矩形).完成后(mouse_up)，我将在文本框中显示矩形相对于分辨率的相对点.

I currently have a picture box where the user will click and drag to draw a rectangle over an image (one that can be changed regularly). When they're done (mouse_up), I will display the relative points of the rect in a text box to the resolution.

因此，例如，用户从1920 x 680图像(picturebox.right，picturebox.bottom)的左上角(0,0)绘制到右下角，文本框将显示(1920,680 )作为终点.那主要是比率的东西.

So, for example, the user draws from top left (0,0) to bottom right of a 1920 x 680 image (picturebox.right, picturebox.bottom) for a rect, the text box will show (1920,680) for the end point. That's mostly just ratio stuff.

我正在使用我以前的问题的答案中的代码(在画框中绘制简单矩形时遇到麻烦)来绘制它.

I am using the code from an answer of a previous question of mine (Having trouble drawing simple rectangle in picturebox) to draw it.

问题:由于图像必须在拉伸模式下完成，因此该框没有跟随鼠标.它们通常非常大(例如1920 x 680)，不适合常规gui.有多种分辨率，因此必须随比率动态变化.如果不进行编辑，则此代码在正常模式下效果很好，但是对于可用性而言却无效.因此，当您绘制框时，它确实很小，并且与鼠标无关(因此我无法在文本框上显示终点).

The Problem: The box doesn't follow the mouse since the images have to be done in stretch mode. They're usually pretty large (like 1920 x 680) and can't fit in a regular gui. There are multiple resolutions, so got to go dynamic with the ratios. Without editing, this code works great in normal mode, but that doesn't work for usability. So, when you draw the box, it's really small and not relative to the mouse (so I can't display the end point on the textboxes).

这是我的意思的一个例子.我将鼠标拖到图像的一半:

Here's an example of what I mean. I've dragged my mouse halfway across the image:

我尝试过的操作:我尝试通过比例来抵消它，但是它仍然不能解决显示终点问题，或者它确实很好地跟随了鼠标.通常它至少向左偏移10个左右像素.这是我为此调整的代码:

What I've tried: I've attempted to counter act it by ratios, but it still doesn't fix the displaying the end point issue, or does it really follow the mouse that well. It's usually off by at least 10 or so pixels to the left. Here's my adjusted code for that:

    Private Sub DrawRectangle(ByVal pnt As Point)

    Try
        Dim g As Graphics

        g = Graphics.FromImage(img)

        g.DrawImage(imgClone, 0, 0) 'we are clearing img with imgClone. imgClone contains the original image without the rectangles

        Dim w_ratio As Integer = Math.Floor(img.Width / pbZoneImage.Width)
        Dim h_ratio As Integer = Math.Floor(img.Height / pbZoneImage.Height)
        Dim customPen As New Pen(currentColor, 5)

        'If pnt.X = mouse_Down.X Or pnt.Y = mouse_Down.Y Then
        '    g.DrawLine(customPen, mouse_Down.X, mouse_Down.Y, pnt.X * w_ratio, pnt.Y * h_ratio)

        'Else
        theRectangle = New Rectangle(Math.Min(mouse_Down.X, pnt.X * w_ratio), Math.Min(mouse_Down.Y, pnt.Y * h_ratio),
                    Math.Abs(mouse_Down.X - pnt.X * w_ratio), Math.Abs(mouse_Down.Y - pnt.Y * h_ratio))

        g.DrawRectangle(customPen, theRectangle)

        'End If

        g.Dispose()

        pbZoneImage.Invalidate() 'draw img to picturebox


    Catch ex As Exception

    End Try

End Sub

我也尝试过仅使终点显示点(x，y)匹配矩形的相对终点，但是同样，它与比率不兼容.

I've also tried just getting the end display point (x,y) to match the relative end of the rectangle, but again it isn't working with the ratios.

关于如何使这项工作以及在正常模式下以及在拉伸时的工作方式的想法?我也愿意接受其他控件或一般性的技巧.谢谢！

Any ideas on how to make this work as well as it does in normal mode as it does in stretch? I'm also open to different controls or just any tips in general. Thanks!

推荐答案

这可以通过多种方式完成，但最简单的方法是将图片框与 SizeMode = Normal 一起使用.加载图片:

This can be done with many ways but the easiest is to use a picturebox with SizeMode = Normal. Load your images:

img = New Bitmap(pbZoneImage.Width, pbZoneImage.Height)

imgClone = My.Resources.... 'real dimensions

Dim g As Graphics = Graphics.FromImage(img)

'it will scale the image, no need for stretch mode
g.DrawImage(imgClone, 0, 0, pbZoneImage.Width, pbZoneImage.Height)

g.Dispose()

pbZoneImage.Image = img

然后正常抽奖:

Private Sub DrawRectangle(ByVal pnt As Point)

Try
    Dim g As Graphics

    g = Graphics.FromImage(img)

    g.DrawImage(imgClone, 0, 0, pbZoneImage.Width, pbZoneImage.Height) 'we are clearing img with imgClone. imgClone contains the original image without the rectangles

    Dim customPen As New Pen(currentColor, 5)

    'If pnt.X = mouse_Down.X Or pnt.Y = mouse_Down.Y Then
    '    g.DrawLine(customPen, mouse_Down.X, mouse_Down.Y, pnt.X * w_ratio, pnt.Y * h_ratio)

    'Else
    theRectangle = New Rectangle(Math.Min(mouse_Down.X, pnt.X), Math.Min(mouse_Down.Y, pnt.Y),
                Math.Abs(mouse_Down.X - pnt.X), Math.Abs(mouse_Down.Y - pnt.Y))

    g.DrawRectangle(customPen, theRectangle)

    'End If

    g.Dispose()

    pbZoneImage.Invalidate() 'draw img to picturebox


    Catch ex As Exception

    End Try

End Sub

在mouse up event比例尺中获得正确的结果:

In mouse up event scale to get the correct result:

Private Sub pbZoneImage_MouseUp(sender As System.Object, e As System.Windows.Forms.MouseEventArgs) Handles pbZoneImage.MouseUp
    Dim width, height As Integer

    width = CInt(Math.Abs(mouse_Down.X - e.X) * (imgClone.Width / pbZoneImage.Width))
    height = CInt(Math.Abs(mouse_Down.Y - e.Y) * (imgClone.Height / pbZoneImage.Height))

    TextBox1.Text = width.ToString + " " + height.ToString
End Sub

这篇关于Picturebox中的绘图矩形未按鼠标比例缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！