Trigger PointerEntered event only on non-transparent part of a .png image? - c#

I want to add a mouse hover event in C# (creating a windows 8 app) on a irregular .png image that when its main image area (not the entire box or the transparent area) is hovered, its opacity should change.
Can I get a working code for this ?

The alpha channel of a PNG has 256 levels. Where's the threshold? Total transparency or relative transparency? The latter also depends on color and the current background.
What I want to say is that a raster (per-pixel) approach might not yield the desired results.
In some cases it may be better to have a polygon describing the relevant area and check if the mouse position is inside or outside of that polygon.
This way the designer can exclude very faint areas he might redeem not relevant and, vice versa, include areas that would be otherwise excluded.
A compromise between these two approaches is the use of a collision mask that has just 1 bit per pixel and is 0 for don't care and 1 for relevant. That mask would be painted manually by the designer and used to detect if the pixel inside the PNG is relevant or not to the mouse.

Related

How can I capture as bitmap only what a picturebox is displaying, without using "copy from screen"?

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.

Custom mouse cursor size in WPF

We are developing an application that must be used by people that may have some visual problem involving the use of kinect to move the cursor, so we need to make it bigger than usual. However, this application does not interfaces directly with kinect, so we can't use its APIs.
We are programming in C# (.NET 4.5) using WPF. The problem is that the default cursor size cannot be bigger than 32x32 pixel or 64x64 pixel in high res devices.
We first tried to make the actual mouse cursor invisible and then use a Graphics object, taken using Graphics.FromHwnd(applicationWindowHandler). It succeeds to draw the image but it leaves the trail of the past cursor positions.
Is there a way to do using the regular windows mouse cursor, or at least a way to remove the trail (like an "invalidate" method that force the current window to refresh)?
We already tried these solutions but with no luck:
www.hsys.com/CustomCursorArticlePart1.htm
www.hsys.com/CustomCursorArticlePart2.htm
csharparticles.blogspot.it/2005/03/custom-drawing-cursors.html
Couldn't you just use a Canvas control that covers the entire window, set the cursor to none and then put an Image control with a suitably large cursor image in the Canvas, with its Left and Top properties bound to the cursor's X and Y coordinates relative to the Canvas??

Create an effect of magnifying glass for a picturebox

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.

How can I create a good panel for displaying rectangles in C#?

I am a not very good at C# yet so bear with me,
I am trying to create a program that can edit pictures of small sizes (16x16, 32x32, etc...), specifically Minecraft texture files. I need to create a drawing surface where I can display rectangles on. I want to use WPF rectangles because they are working for me so far. I tried putting them on a WPF Grid panel but creating a good size grid panel with 1 pixel wide rows and columns takes about thirty seconds and that's quite a lot of time. Any ideas are helpful.
I'm getting the feel that your direction might not be the most efficient.
Of course, it's quite possible to convert an image into a lot of rectangles, but it's really not efficient once you have a lot of pixels. (32x32 = 1024 rectangles.)
So, instead of going along with WPF rectangles, like you want to, I would urge you to reconsider. Instead, try to work with WriteableBitmap.
From your vague description, I assume you are writing a paint like program, where the user can select a color and draw with the mouse on the texture with that color. By binding the WriteableBitmap up to an Image tag, and adding an event listener to the MouseMove event, you can get the mouse position, and whether the left/right mouse button is pressed or not. Combine that with some math involving the x position and the ActualWidth, and the y position and ActualHeight, of the Image, you can find the pixel the mouse is over, and set the color of that pixel.
So basically, Rectangles are not your best bet. Especially if you try to make a 32x32 grid to contain them. Use WriteableBitmap.
I would suggest using something more lightweight like DrawingVisuals. Alternatively if you really just want to display the textures you can preprocess them and display the result as a normal Image.

Convert screen coordinates to picture coordinates

I have the following problem: A program displays a picture using a PictureBox. The picture contains two rectangles A and B that are drawn after the image is loaded.
The image inside the picture box is zoomed and the rectangles A and B are painted using the Graphics object of the loaded image. Is there a simple method to determinate if a user clicked the area inside these rectangles e.g. converting screen coordinates to picture coordinates.
Edit: No longer relevant, found another solution.
Edit 2: My solution was to use two picture boxes at the A and B location instead of modifying the image directly. It has some minor disadvantages specific to my solution, but I had to finish the project in time
This SO post discusses the zoom factor of a picture box and that you cannot determine it.
Therefore I think, without getting the zoom factor, you may not be able to calculate the position.

Categories

Resources