SEinarsson
asked on
Spot magnification
I have an application that can view and edit images. I'm now trying to implement a spot magnification tool for it. This would turn the cursor into the little magnifying icon, and when dragged across the image it would enlarge the part of the Image that the cursor was currently over.
I have some ideas on how to start on this, but I was looking for a guide or some tips on what methods works best to do this. I haven't been able to find much on it yet.
-SEinarsson-
I have some ideas on how to start on this, but I was looking for a guide or some tips on what methods works best to do this. I haven't been able to find much on it yet.
-SEinarsson-
You need the following variables:
bool magnifyToolActive; // true when magnifying tool is active
bool drawMagnify; // true when magnifying glass should be shown
int magnifyPointX; // x-coordinate of magnifying glass center
int magnifyPointY; // y-coordinate of magnifying glass center
When user selects Magnifying Glass tool (for example, form toolbar), set magnifyToolActive to true. When user unselects Magnifying Glass tool, set it to false.
MouseDown event handler:
if ( magnifyToolActive )
{
this.Capture = true;
drawMagnify = true;
magnifyPointX = e.X;
magnifyPointY = e.Y;
Invalidate();
}
MouseMove event handler:
if ( drawMagnify )
{
magnifyPointX = e.X;
magnifyPointY = e.Y;
Invalidate();
}
MouseUp event handler:
if ( drawMagnify )
{
this.Capture = false;
drawMagnify = false;
Invalidate();
}
Paint event handler:
// draw image
// ...
if ( drawMagnify )
{
// draw enlarged image fragment with center point (magnifyPointX, magnifyPointY center)
}
Except of this, when magnifyToolActive is true:
if drawMagnify is false, show magnifying glass cursor,
if drawMagnify is true, don't show cursor.
bool magnifyToolActive; // true when magnifying tool is active
bool drawMagnify; // true when magnifying glass should be shown
int magnifyPointX; // x-coordinate of magnifying glass center
int magnifyPointY; // y-coordinate of magnifying glass center
When user selects Magnifying Glass tool (for example, form toolbar), set magnifyToolActive to true. When user unselects Magnifying Glass tool, set it to false.
MouseDown event handler:
if ( magnifyToolActive )
{
this.Capture = true;
drawMagnify = true;
magnifyPointX = e.X;
magnifyPointY = e.Y;
Invalidate();
}
MouseMove event handler:
if ( drawMagnify )
{
magnifyPointX = e.X;
magnifyPointY = e.Y;
Invalidate();
}
MouseUp event handler:
if ( drawMagnify )
{
this.Capture = false;
drawMagnify = false;
Invalidate();
}
Paint event handler:
// draw image
// ...
if ( drawMagnify )
{
// draw enlarged image fragment with center point (magnifyPointX, magnifyPointY center)
}
Except of this, when magnifyToolActive is true:
if drawMagnify is false, show magnifying glass cursor,
if drawMagnify is true, don't show cursor.
ASKER
My events are set up much like that, I have several other tools that can affect the image in different ways.
The questions come when I start looking at the details though. Am I drawing the enlarged image fragment ontop of the original image? Wouldn't that mean when the cursor leaves an area, I'd need to redraw the original part of the image back? Would that mean having to save the fragment of the original image being drawn over?
Another big question is how do I get a fragment of an image? Let's say I have a 500x500 image, how would I go about getting a 100x100 fragment from the middle of it?
-SEinarsson-
The questions come when I start looking at the details though. Am I drawing the enlarged image fragment ontop of the original image? Wouldn't that mean when the cursor leaves an area, I'd need to redraw the original part of the image back? Would that mean having to save the fragment of the original image being drawn over?
Another big question is how do I get a fragment of an image? Let's say I have a 500x500 image, how would I go about getting a 100x100 fragment from the middle of it?
-SEinarsson-
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
And, that, my friend, will work :)
Bob
Bob
ASKER
Got it working, thanks.
A followup question... right now its a rectangle that follows the mouse and does the magnification. How would I got about making it draw as a circle instead.
I'm looking into graphics.DrawEllipse and graphics.FillEllipse right now, but Im not seeing how to use an image with it, just a pen and brush.
-SEinarsson-
A followup question... right now its a rectangle that follows the mouse and does the magnification. How would I got about making it draw as a circle instead.
I'm looking into graphics.DrawEllipse and graphics.FillEllipse right now, but Im not seeing how to use an image with it, just a pen and brush.
-SEinarsson-
ASKER
Tried using a TextureBrush to fill in the Ellipse, but DrawImage handles getting the fragmented image that is being magnified. I can set the entire image to the TextureBrush, but not sure on how to set it to only the fragment of the image I am trying to magnify.
-SEinarsson-
-SEinarsson-
Use Graphics.Clip Property.
You need to create elliptic path - see GraphicsPath.AddEllipse Method, create region from this path - see Region Constructor (GraphicsPath), and select this elliptic region in the Graphics object using Graphics.Clip Property.
After selecting of the region you can draw rectangle, but actually drawing will be done only inside of elliptic clipping region.
You need to create elliptic path - see GraphicsPath.AddEllipse Method, create region from this path - see Region Constructor (GraphicsPath), and select this elliptic region in the Graphics object using Graphics.Clip Property.
After selecting of the region you can draw rectangle, but actually drawing will be done only inside of elliptic clipping region.
ASKER
Thanks, it all works now.
-Sarkis-
-Sarkis-
Bob