I have a Bitmap loaded in a picturebox. My problem is that I want it to move smoothly when using a mouse. Is there some super-duper function for moving and image by some pixels very fast?
Or do I have to repaint a picturebox completely every time I move by a single pixel (somehow with a LockBits method)?
I need it to run fast with no flickering.
Obviously you have to redraw the whole box every time you move, the trick is that you don't recalculate the whole area you see, you keep the whole (or at least a large chunk) of the picture loaded, and just specify wich part to draw.
An interesting concept is described here, and it might work for your needs - assumes your bitmap is not tiled, i.e. can be loaded all at once:
Put the PictureBox in a Panel, using the panel as your viewport.
Related
I am trying to do the following:
Open a new form and draw few lines and arcs (this is working well).
When an event occurs a new coordinate (x1,y1) is calculated, and a
small circle should be drawn at that coordinate.
When the next event occurs, a small circle should be drawn at
(x2,y2), and the first circle should disappear, while keeping the
lines and arcs that were drawn at step 1.
How do I delete the first circle while keeping all the rest?
Thank you
Once a circle has been drawn, there is no way to delete it. So, you need to clear the entire canvas with the background color and redraw everything.
So, you need to:
Come up with a bunch of "shape" classes for representing each line and each ark and each circle. They will probably all derive from some common base "Shape" class which offers methods that are common to all shapes, for example, a method to draw the shape on a canvas.
Instantiate objects from these classes to represent the shapes that are supposed drawn on the screen, and keep these objects in a list throughout the lifetime of your application.
When the event occurs, you make any changes to your shapes, (in your case, remove a circle and add another circle, or, more likely, change the coordinates of an existing circle without removing it and re-inserting it in the list,) and then you need to invalidate the canvas control that you presumably use for painting, (search for "Invalidate" for documentation,) so as to cause the canvas to repaint itself.
You override the paint method of the canvas control so as to do your painting: first you clear the control to its background color, and then you iterate through your list of shapes, calling each shape to draw itself on the canvas.
Of course this will cause flicker; if that's unacceptable, then you will need to read up on how to implement "double buffering" (look it up) to eliminate the flicker.
Another approach for flicker elimination is to only erase and repaint the area that has changed. In your case, that would be the smallest rectangle that contains both the circle in its old location, and the circle in its new location. So, instead of invalidating the entire canvas, you invalidate only that rectangle. The problem with this approach is that other shapes that cross the invalidated area might appear to be redrawn somewhat inaccurately. This may be unacceptable, or it may be acceptable, you will not know unless you try it.
You can't in the way you're thinking of, because the graphics works like MSPaint (a 2d array of pixels and when it's drawn, it's drawn) not Adobe Photoshop (layers or objects that can be moved independently)
The easiest thing to do is implement photoshop-like functionality yourself and keep eg a List of everything you want to draw, draw from the list (the list includes a circle) then later, remove that circle from the list, add another one and redraw the whole canvas from the list
I know it seems wasteful, and you probably could get into the mechanics of saving the pixels you drew over when you draw the first circle and restore them to erase the circle, but it's far more complex than just ditching it all and starting over every time
Specifically: I need to capture as a bitmap a specific region of what a picturebox is actually displaying. The coordinates of the region are specified by the bounds of a control that I have overlayed on top of the picturebox (but that belongs to the picturebox). The control is hidden when I make the "snapshot" of the region.
I tried using normal screen capture methods (CopyFromScreen), but you can't really control the timing there. So it was capturing "interstitial" states, like transitions between photos in my picturebox. Frequently it was only capturing purely black images (the background color of the picture box).
So I tried just converting the image (picturebox.image property) being displayed to a bitmap. The problem there is that the picture box is rarely showing exactly the image. It's displaying some PORTION of the image, scaled and clipped as appropriate to it's sizemode (which is zoom). So the I can't just take my control coordinates and clip them from the image as a whole.
So I tried to estimate what portion of the image was being displayed, and correcting my rectangle based on that. Turns out that I was basically re-creating the "zoom" code of the picturebox to do this (using aspect ratio of the picturebox, the aspect ratio of the image, guessing at what level of scaling is currently happening to the image if it's larger or smaller than the picturebox, etc). It was not pretty.
So: now I need a method of just capturing only the bitmap currently being displayed in the client area of the picturebox, including the photo and any black "letterboxing" currently being displayed around it. Anybody got one?
Remember that I can't rely on using CopyFromScreen. It's not reliable enough for my purposes. I think I need a method of getting picturebox to TELL me the bits it is displaying.
This will copy and save the currently shown content of the PictureBox including a BackgroundImage (if there is one and if it shines through) and also all Controls that belong to the PictureBox, like Labels etc.. Also included are elements drawn in the Paint event. Things drawn outside the Paint event are non-persistent and will not be included.
using (Bitmap bmp = new Bitmap(pictureBox1.ClientSize.Width,
pictureBox1.ClientSize.Height))
{
pictureBox1.DrawToBitmap(bmp, pictureBox1.ClientRectangle);
bmp.Save(yourfilename, ImageFormat.Png);
}
Note: On my test Form the PicureBox is sitting inside an AutoScroll Panel pan_PBscroll. The PictureBox is displaying pixels 1:1 and is therefore, with a photograph loaded, much bigger than the Panel, the Form or even the Screen. So to clip to the actually visible parts I could not use the pictureBox1.ClientSize and pictureBox1.ClientRectangle but used the dimensions of that Panel. This may well apply to you, too.
I'm not sure about your timing issues. But since you mentioned CopyFromScreen here are a few differences:
CopyFromScreen makes a 1:1 copy of each screen pixel
This includes non-persistent drawings and excludes anything covered or hidden
Control.DrawToBitmap makes the Control draw itself onto a Bitmap, just as it draws itself during Paint
This excludes anything that doesn't belong to the Control but includes all members of its Controls collection
This also excludes non-persistent drawings but includes the full Size of the Control, whether it fits on the Form or Screen or not and whether it is hidden or covered or not.
For Controls with active Scrollbars only the visible parts are copied. To copy all you need to resize it temporarily. Then you can get a complete image of a listbox even if it has a thousand items..
Since you're using a PictureBox I would say to take a look PictureBox.Image where you can get the Bitmap object.
Hope it helps.
I would like to know how to create an effect of a magnifying glass for a picturebox.
Not zooming the picturebox but magnifying a part of the the image in the PictureBox control (circle or rectangle) and setting the size of the glass and the magnification factor.
It may only work within the picturebox control.
Language: C#
Thanks in advance !
Basically, you'd need two pictureboxes. One for the whole image and another for the magnified section. Also, you have to place the magnified picturebox according to user's mouse position.
You'll find a good article about it at http://www.codeproject.com/Articles/21097/PictureBox-Zoom. Just change the source to show the second picturebox in appropriate place (under user's cursor position).
You need 2 picturebox objects, one for picture itself and second for magnified area.
Next load picture into memory, you haven't specified source of the picture but in any case I recommend using streams.
Then create bitmap image in memory.
Using Image method set property of a picturebox.
To create source image for magnifying picturebox you need to clone selected part (calculating dimensions of a new picture area). Whole thing is not as trivial as you may expect as clone method accepts Rectangle objects as an area selector and generally works on rectangles rather than circles to copy selection. I also recommend to Dispose() unused bitmap objects as soon as possible.
Hope this helps.
I have a picturebox with a fixed sized image (256x256) generated by the program. I have another smaller image as a resource. What I want to do is when my cursor is over the image and I hold down the mouse button, the smaller image "anchors" with the mouse pointer so it moves around with it. If I let go of the mouse button, the smaller image will stay in that position on top of the bigger image. The smaller image is basically a marker, something like an X or O.
I was thinking of having a second picturebox on top of the first picturebox but I can't make it transparent. Or redrawing the image with the smaller image on top of it and reloading the image into the picturebox, but I'm not sure how to do that and I think it's going to be pretty slow redrawing it each time I move the mouse.
So how can I have a marker image move around on top of a bigger image and have it stay there?
Create your control for this instead of using PictureBox. PictureBox should be used ONLY for fixed images on the form, nothing else.
Instead, derive your control from UserControl. Turn on double buffering for it. In OnPaint method, first draw your background picture, then your marker picture after it. Don't worry, it WON'T be slow and it WILL work as it should.
When you release the mouse, update background picture by drawing your marker picture on it.
Since every sentence here is a little discovery by itself, hope you'll have a good time coding your little game :)
Is there a preferred, fast method of scrolling within a user control in GDI+?
I've created a control that graphically renders a horizontally scrollable data plot.
Currently, my control operates by converting the position of a horizontal scroll bar into an offset into the data. The control then renders the data that exists between this starting point and an end point calculated based on the width of the control.
This method works, but is very slow. I do not wish to have to manually redraw the entire control surface upon each scroll event. Rather, I'd like to initialize the control by painting the entirety (or some portion) of the graphical data to an offscreen surface, and then virtually scroll the control surface by causing it to read the pre-rendered graphic data starting at the offset calculated by the position of the horizontal scroll bar.
Is BitBlt the only way to do this? Do I really have to manually copy graphics data from one surface to another? Can't I just take over the Paint event and cause it to read the data from the offscreen surface as it renders? This way, the copy and render action are one in the same.
Or, should I do something hokey like paint directly to a Panel control and then just literally scroll the panel itself from left to right?
CLARIFICATION:
Essentially, I want to know the correct way to scroll pre-rendered data. How does one scroll graphical data within a control? Redrawing the pre-rendered graphic is NOT a correct option.
Yes, I would try double-buffering. If you render to an off-screen bitmap, you can just scroll the bitmap around.
You can try rendering the entire graph to one big bitmap and let the scroll bars move it around. However, if your graph is extremely large, then you'll need to limit the size of the bitmap to the visible area, paint just what is visible to it, and handle scrolling virtually as you are now.
Testing on 32-bit Windows XP, I found the limitation is somewhere around 237.9 million pixels. That is certainly plenty for most controls, but it may not be enough for your application.
For the curious, here is the maximum Windows bitmap sizes we were able to create and use:
Width Height Area (pixels)
====== ====== ===========
32,767 7,261 237,921,187
25,000 9,517 237,925,000
23,792 10,000 237,920,000
20,000 11,896 237,920,000
15,861 15,000 237,915,000
15,000 15,861 237,915,000
11,896 20,000 237,920,000
10,000 23,792 237,920,000
9,517 25,000 237,925,000
7,261 32,767 237,921,187