You can use the DrawToBitmap method of the PictureBox to save anything you have drawn at the displayed size. And a Bitmap is an Image.
There are various ways to provide zooming an panning. One of the simplest ways to do it is to host the PictureBox in a panel. You would typically set the SizeMode to zoom, so the image will have the correct proportions. You do user zooming by changing the size of the PictureBox, panning by using the panel's scroll bars.
For a completely different approach, you may like to take a look at the ZoomPictureBox in the CodeBank. See my signature below.
hey boops,
I've try ur sample and modified in my application. So far i use 2 picturebox (picturebox and ZoomPictrueBox).
I drawing a line on picturebox, after drawing process has finished, i set an Image to ZoomPicturebox.
It's Work. But when i try to zoom in, a ZoomPictureBox don't Renew a Resolution.
My question: How can i get new resolution when i zoom a image?
can u describe a simple logic to do this ?
Thanks in advance.
Try putting all the code with bmp in a button click sub. It looks like it should work, but it certainly doesn't belong in the Paint event handler. You can't tell a painter what colour you want your house painted and photograph the results at the same time!
If you are using this for zooming/panning then you are going about it in the wrong way. They have to be controlled by the user, so the code should be called from event handlers like Button.Click, Trackbar.ValueChanged or MouseMove, depending on how the user is supposed to control panning or zooming. Even then, trying to save a bitmap to a file at the same time will be too slow and it is unnecessary. Instead you should assign bmp as the PictureBox image (pbMain.Image = bmp) and not dispose of bmp. If you do need to save the bitmap at some time, do it with a separate button click or a menu.
hey boops,
I've try ur sample and modified in my application. So far i use 2 picturebox (picturebox and ZoomPictrueBox).
I drawing a line on picturebox, after drawing process has finished, i set an Image to ZoomPicturebox.
It's Work. But when i try to zoom in, a ZoomPictureBox don't Renew a Resolution.
My question: How can i get new resolution when i zoom a image?
can u describe a simple logic to do this ?
Thanks in advance.
I don't know what you mean by "Renew a Resolution". Resolution of what?
EDIT: on second thoughts, are you just referring to the zooming? If so, try clicking on the ZoomPictureBox before using the mouse wheel.
BB
Last edited by boops boops; Aug 3rd, 2014 at 02:40 AM.
Technically, you can't see the lines drawn earlier in the Picturebox paint event at a new scale.
The lines drawn with the graphics object provided by the Paint Event, are drawn to a buffer, which is then flushed to the screen at the end of the paint event. Those lines are not part of the Picturebox's image, and the Picturebox has no built in persistence of anything drawn on it.
To draw the lines at a new scale, you have two options, the first being in the paint event, you change the scaling by doing ScaleTransform (and possibly a TranslateTransform if you need to Pan), and redraw the lines.
The second option, is to maintain persistence by not drawing the lines in the Paint event, but draw them into a bitmap.
Once you've drawn them in the bitmap, you won't have to redraw them again.
In the Paint event, instead of drawing the lines you draw the bitmap containing the lines.
If you had an image loaded in the Picturebox, then this bitmap would be drawn on top of the image.
You can also draw multiple layers of bitmaps on the Picturebox in the paint event, if you wanted.
I can post a stripped down example I did for someone else some time back.
He wanted to update a background image periodically to show the passage of night/day on a map, but also overlay some other values dynamically over top of the background image.
He also wanted the image and overlay to scale up or down as the windows was resized.
So, this example just draws a static background image in the paint event which would be the bitmap he should update periodically.
And then draws another bitmap, which in the example, is just lines that are drawn by dragging with the left mouse button on the picturebox. When you resize the form, both images are redrawn, but because the ScaleTransform is changed, the images fill the picturebox so everything is drawn larger or smaller.
This may not be specifically what you are looking for, but may be another tool in your arsenal of graphical knowledge.
Thanks for posting the screen shot. It's always useful to have something to look at when you are talking about graphics.
Let's forget about DrawToBitmap. It wasn't a good idea after all. I only suggested it as a direct answer to your question in Post#1. You can't get a higher resolution with DrawToBitmap anyway, because it just copies the pixels of the control. So the resolution is limited to the present size of the control.
Instead, I suggest you follow the second option Passel mentioned: do your drawing on a Bitmap. People (or maybe it's just JMC) often say consider the PictureBox as the frame, not the picture. And the same applies to the ZoomPictureBox. PictureBox provides simple viewing options like SizeMode = Zoom or Stretch, and ZoomPictureBox provides user control over zooming and panning. But neither of them changes the image itself, just the view of it you have at the moment.
Here's a quick code example of drawing to a bitmap ("canvas") and then showing it in the boxes.
Code:
'at form level:
Private canvas As New Bitmap(1024, 768)
'in the Form Load sub:
PictureBox1.SizeMode = PictureBoxSizeMode.None
PictureBox1.Image = canvas
ZoomPictureBox1.Image = canvas
'in a button Click or a mouse event handler, depending on where you define the lines:
Using g As Graphics = Graphics.FromImage(canvas)
DrawLines(g)
End Using
PictureBox1.Invalidate
ZoomPictureBox1.Invalidate
I'm not even sure if the last 2 lines are necessary but they can't do any harm. They just make sure the controls are updated. Note that I made the canvas the size you mentioned. Drawing programs usually let the user choose the canvas size before drawing, and that is what determines the resolution limit.
I don't have time to look at Passel's code now, but I hope it provides a better example of this approach.
BB
Last edited by boops boops; Aug 4th, 2014 at 01:57 AM.
You didn't say anything about image position. Which image position? In the PictureBox or in the ZoomPictureBox? If it's the PictureBox, try setting the SizeMode to Zoom or Center instead of None.
I'll give an example of the other method for scaling I mentioned, and that is to redraw the lines using a different ScaleTransform.
This example uses a pen with a width of 0, so the lines will be drawn using 1 pixel width, regardless of the Scale. If you use a pen with a width of 1 (the default width for pens), then scale of 2.0 would draw the lines 2 pixels wide, and 3.0 would draw the lines 3 pixels wide.
If you don't want the lines to get thicker with zooming, then setting the width to 0 prevents that.
You will need to add three controls to support the example,
a checkbox named chkPanZoom : optional, I changed the text to read Pan Zoom Mode
a Picturebox (default name Picturebox1)
and a button (default name) Button1 : optional, I changed the text to read "Reset"
The checkbox will switch from the "drawing" mode, to the Pan and Zoom mode.
The button will reset the Pan and Zoom values back to the initial (0,0) offset and 1.0 zoom.
So, to have some lines to zoom, the example allows you to click and drag with the left mouse then release to create a line. You should do this multiple times to create a number of lines to serve as your "drawing".
You can then click on the checkbox to switch to Pan/Zoom mode.
To pan the line drawing around click and drag with the Left mouse button.
To Zoom the image Click and drag left or right with the Right mouse button.
The image will Zoom around the point where you initially click the Right mouse button.
Since this is a quick, thrown together example, I didn't try to add code to allow drawing properly when the image is panned and/or Zoomed. To do this you would have to convert mouse location into drawing location, which I didn't want to work our again for this simple example. You already have lines you want to draw, so drawing new lines in a zoomed or panned image is not a stated need at this time.
Code:
Public Class Form1
Structure LineType
Public startPoint As Point
Public endPoint As Point
End Structure
Private Lines As New List(Of LineType)
Private aLine As LineType
Private Drawing As Boolean
Private Offset As Point
Private dScale As Single = 1.0
Private cp As Point
Private dcp As PointF
Private Sub PictureBox1_MouseDown(sender As Object, e As System.Windows.Forms.MouseEventArgs) Handles PictureBox1.MouseDown
If e.Button = Windows.Forms.MouseButtons.Left Then
If chkPanZoom.Checked = False Then 'we're drawing, not panning or zooming
Drawing = True
aLine.startPoint = e.Location
End If
ElseIf e.Button = Windows.Forms.MouseButtons.Right Then
If chkPanZoom.Checked Then
cp = e.Location 'Save the point clicked on
dcp.X = (cp.X - Offset.X) / dScale 'And the current delta from that position to the 0,0
dcp.Y = (cp.Y - Offset.Y) / dScale 'position of the drawing in the current scale
End If
End If
End Sub
Private Sub PictureBox1_MouseMove(sender As Object, e As System.Windows.Forms.MouseEventArgs) Handles PictureBox1.MouseMove
Static LPos As Point
If chkPanZoom.Checked = True Then
If e.Button = Windows.Forms.MouseButtons.Left Then
Offset.X += e.X - LPos.X
Offset.Y += e.Y - LPos.Y
PictureBox1.Invalidate()
ElseIf e.Button = Windows.Forms.MouseButtons.Right Then
If e.X > LPos.X Then
dScale *= 1.05!
PictureBox1.Invalidate()
Else
If dScale > 0.05 Then
dScale *= 0.95!
PictureBox1.Invalidate()
End If
End If
'So that we zoom "around" the initial point the right button clicked on
'use the delta ratios associated with the initial point clicked and the initial scale
'to recalculate the Offset of the (0,0) point of the drawing at the current scale
Offset.X = CInt(-((dcp.X * dScale) - cp.X))
Offset.Y = CInt(-((dcp.Y * dScale) - cp.Y))
End If
Else
If e.Button = Windows.Forms.MouseButtons.Left Then
aLine.endPoint = e.Location
PictureBox1.Invalidate()
End If
End If
LPos = e.Location
End Sub
Private Sub PictureBox1_MouseUp(sender As Object, e As System.Windows.Forms.MouseEventArgs) Handles PictureBox1.MouseUp
If e.Button = Windows.Forms.MouseButtons.Left Then
If chkPanZoom.Checked = False Then 'we're drawing, not panning or zooming
Drawing = False
aLine.endPoint = e.Location
Lines.Add(aLine)
End If
End If
End Sub
Private Sub PictureBox1_Paint(sender As Object, e As System.Windows.Forms.PaintEventArgs) Handles PictureBox1.Paint
Dim aPen As Pen = New Pen(Brushes.Black, 0)
Dim cx, cy As Single
cx = 761 - (761.0!) / dScale
cy = 626 - (626.0!) / dScale
e.Graphics.TranslateTransform(Offset.X, Offset.Y)
e.Graphics.ScaleTransform(dScale, dScale)
For Each line As LineType In Lines
e.Graphics.DrawLine(aPen, line.startPoint, line.endPoint)
Next
If Drawing Then
e.Graphics.DrawLine(aPen, aLine.startPoint, aLine.endPoint)
End If
aPen.Dispose()
End Sub
Private Sub Button1_Click(sender As System.Object, e As System.EventArgs) Handles Button1.Click
dScale = 1.0
Offset = New Point(0, 0)
PictureBox1.Invalidate()
End Sub
End Class
Hi Passel,
Thank you very much for the provided solution. This is EXACTLY the functionality that I was looking for.
Now i know i can't get a high resolution because i'm drawing on Bitmap. In ur sample code, u draw direct into PictureBox without canvas(New Bitmap). In ur sample too i found this trick to draw unlimited size of line. I can't drawing Unlimited size because the Size is defined. This is give me a right solution.
Cheers.
Hi Passel.
How can i do Zooming with Mouse Scroll?
Boops have example to do that. But the Example must be have an Image. In my case, a line just drawn on picturebox.
Can u give me sample?
Thanks in advance.
If you look, those cx and cy values are not used so those three lines of code should have been removed.
They were literal constants for Picturebox1.ClientSize.Width (761) and Picturebox1.ClientSize.Height (626).
It took me several tries to figure out how to zoom around a point, rather than the upper left corner of the picturebox, so I was using the literal numbers in various attempts because it was shorter to type when working things out.
After I figured out what I needed to do (recalculated the Offsets where the zoom value was modified), I didn't need to calculate a bias in the paint event, but forgot to remove those lines.
If you always wanted to zoom around the center of the picturebox (which if you're using the mouse scrollwheel I would think you might) you would change this line:
cp = e.Location
to
cp = New Point(PictureBox1.ClientSize.Width \ 2, PictureBox1.ClientSize.Height \ 2)
If your picturebox isn't going to change size, you could probably just set that once in the form load, but if there is the possibility the picturebox will be resized (e.g. if it resized with the form), you would probably want to recalculate the center point at the beginning of any zoom action.
I haven't looked at boops boops code where he reads the mousewheel, but in theory it should be easy to use.
When you move the mousewheel you just need to adjust the value of dScale (1.0 would be normal scale), and then recalculate what the Offset should be to keep the center point in the center of the window.
To test this, I removed the calculation done in the mousedown event when the Right button is pressed and moved it to the mouseMove in front of the modification of the dScale. The application still worked the same, so you should be able to put the code in the same manner wherever you process the mousewheel.
So, the process looks like:
1. Determine the center of the picturebox.
2. Calculate the deltas to current x,y offset at the current scale
3. Change the scale (from mousewheel input)
4. Recalculate the x,y offset from the previous deltas and new scale.
That code looks like this, as modified in the existing MouseMove event for the Right mouse button. I'm assuming you can move that code and adapt it to the where you process the mousewheel.
Code:
ElseIf e.Button = Windows.Forms.MouseButtons.Right Then
'The following code would be moved out of the Mouse Move event for the right mouse button
'to where ever the mousewheel event would be processed.
cp = New Point(PictureBox1.ClientSize.Width \ 2, PictureBox1.ClientSize.Height \ 2) 'zoom around center of picturebox
dcp.X = (cp.X - Offset.X) / dScale 'And the current delta from that position to the 0,0
dcp.Y = (cp.Y - Offset.Y) / dScale 'position of the drawing in the current scale
'Replace this block with code that modifies dScale based on MouseWheel inputs
If e.X > LPos.X Then
dScale *= 1.05!
PictureBox1.Invalidate()
Else
If dScale > 0.05 Then
dScale *= 0.95!
PictureBox1.Invalidate()
End If
End If
'use the delta ratios associated with the previous offset and scale
'to recalculate the Offset of the (0,0) point of the drawing at the current scale
Offset.X = CInt(-((dcp.X * dScale) - cp.X))
Offset.Y = CInt(-((dcp.Y * dScale) - cp.Y))
End If
Now I had a new problem, if the size of the line is exceed than picturebox size.
A lines is drawn on Form Load with default size and the line can be changed by textbox control (accordance with user choice).
I want to automatic zoom out when a size of line is exceed than picturebox size, so the lines are not clipped when drawn. Can u give me a simple logic to do this? Where a zoom can determine a line size.
Anyway I am very grateful to you Passel. You are really helped me in completing the task of my college.
Last edited by jimzarthur; Sep 9th, 2014 at 05:25 AM.
Out of curiosity, I went ahead and modified the example to use the scroll wheel to zoom.
Since that controls the zoom, I used the Right Mouse button for panning, and got rid of the checkbox since we didn't need a pan/zoom mode.
So now, for the example, you need a picturebox and a button (for resetting drawing back to normal scale and position).
You use the left mouse drag to add lines.
You use the right mouse drag to pan arround and
you use the mousewheel to zoom in and out.
The example still does not attempt to account for drawing properly if you are panned or zoomed.
You need to hit the button (to zero out the offsets and set the zoom to 1.0) to add additional lines to the drawing properly.
Code:
Public Class Form1
Structure LineType
Public startPoint As Point
Public endPoint As Point
End Structure
Private Lines As New List(Of LineType)
Private aLine As LineType
Private Drawing As Boolean
Private Offset As Point
Private dScale As Single = 1.0
Private cp As Point
Private dcp As PointF
Private Sub PictureBox1_MouseDown(sender As Object, e As System.Windows.Forms.MouseEventArgs) Handles PictureBox1.MouseDown
If e.Button = Windows.Forms.MouseButtons.Left Then
Drawing = True
aLine.startPoint = e.Location
End If
End Sub
Private Sub PictureBox1_MouseMove(sender As Object, e As System.Windows.Forms.MouseEventArgs) Handles PictureBox1.MouseMove
Static LPos As Point
If e.Button = Windows.Forms.MouseButtons.Left Then
aLine.endPoint = e.Location
PictureBox1.Invalidate()
ElseIf e.Button = Windows.Forms.MouseButtons.Right Then
Offset.X += e.X - LPos.X
Offset.Y += e.Y - LPos.Y
PictureBox1.Invalidate()
End If
LPos = e.Location
End Sub
Private Sub PictureBox1_MouseUp(sender As Object, e As System.Windows.Forms.MouseEventArgs) Handles PictureBox1.MouseUp
If e.Button = Windows.Forms.MouseButtons.Left Then
Drawing = False
aLine.endPoint = e.Location
Lines.Add(aLine)
End If
End Sub
Private Sub PictureBox1_MouseEnter(sender As Object, e As System.EventArgs) Handles PictureBox1.MouseEnter
PictureBox1.Focus() 'so MouseWheel will send events to the picturebox
End Sub
Private Sub PictureBox1_MouseWheel(sender As Object, e As System.Windows.Forms.MouseEventArgs) Handles PictureBox1.MouseWheel
cp = New Point(PictureBox1.ClientSize.Width \ 2, PictureBox1.ClientSize.Height \ 2) 'zoom around center of picturebox
dcp.X = (cp.X - Offset.X) / dScale 'And the current delta from that position to the 0,0
dcp.Y = (cp.Y - Offset.Y) / dScale 'position of the drawing in the current scale
' If e.X > LPos.X Then
If e.Delta > 0 Then
dScale *= 1.1!
PictureBox1.Invalidate()
Else
If dScale > 0.1 Then
If e.Delta < 0 Then
dScale *= 0.9!
PictureBox1.Invalidate()
End If
End If
End If
'use the delta ratios associated with the previous offset and scale
'to recalculate the Offset of the (0,0) point of the drawing at the current scale
Offset.X = CInt(-((dcp.X * dScale) - cp.X))
Offset.Y = CInt(-((dcp.Y * dScale) - cp.Y))
End Sub
Private Sub PictureBox1_Paint(sender As Object, e As System.Windows.Forms.PaintEventArgs) Handles PictureBox1.Paint
Dim aPen As Pen = New Pen(Brushes.Black, 0)
e.Graphics.TranslateTransform(Offset.X, Offset.Y)
e.Graphics.ScaleTransform(dScale, dScale)
For Each line As LineType In Lines
e.Graphics.DrawLine(aPen, line.startPoint, line.endPoint)
Next
If Drawing Then
e.Graphics.DrawLine(aPen, aLine.startPoint, aLine.endPoint)
End If
aPen.Dispose()
End Sub
Private Sub Button1_Click(sender As System.Object, e As System.EventArgs) Handles Button1.Click
dScale = 1.0
Offset = New Point(0, 0)
PictureBox1.Invalidate()
End Sub
End Class
Reply With Quote
Originally Posted by jimzarthur
) often say consider the PictureBox as the frame, not the picture. And the same applies to the ZoomPictureBox. PictureBox provides simple viewing options like SizeMode = Zoom or Stretch, and ZoomPictureBox provides user control over zooming and panning. But neither of them changes the image itself, just the view of it you have at the moment. 
