I have a Form that contain a panel, and in this panel I draw shapes, like rectangles and circles, I need to zoom into this shapes, I saw couple options but most of them using PictureBox. Should I use Bitmap creating the panel area as a bitmap and change the zooming factor ?? would this help me also further if I want to have Panning and not draw images not into the fit in the panel size.
Here is a snapshot of my code
private void panel1_Paint(object sender, PaintEventArgs e)
{
Graphics g = panel1.CreateGraphics();
SolidBrush myBrush = new SolidBrush(Color.Black);
Pen p = new Pen(Color.Black);
int RecScale = 1;
foreach (CircuitData.ResistorRow resistorRow in ResistorData.Resistor)
{
RectangleF rec = new RectangleF((float)(resistorRow.CenterX - resistorRow.Length / 2), (float)(resistorRow.CenterY - resistorRow.Width/ 2), (float)resistorRow.Length, (float)resistorRow.Width);
float orientation = 360 - (float)resistorRow.Orientation;
PointF center = new PointF((float)resistorRow.CenterX, (float)resistorRow.CenterY);
PointF[] points = CreatePolygon(rec, center, orientation);
if (!Double.IsNaN(resistorRow.HiX) && !Double.IsNaN(resistorRow.HiY))
{
g.FillEllipse(myBrush, (float)resistorRow.HiX - 5 , (float)resistorRow.HiY - 5, 10, 10);
g.DrawLine(p, new PointF((float)resistorRow.HiX, (float)resistorRow.HiY), center);
}
g.FillPolygon(myBrush, points);
}
}
Can a sample code be provided.
Many Thanks
Jp
Here is a way to scale the drawing by scaling the Graphics object:
private void panel1_Paint(object sender, PaintEventArgs e)
{
Graphics g = e.Graphics;
g.ScaleTransform(zoom, zoom);
// some demo drawing:
Rectangle rect = panel1.ClientRectangle;
g.DrawEllipse(Pens.Firebrick, rect);
using (Pen pen = new Pen(Color.DarkBlue, 4f)) g.DrawLine(pen, 22, 22, 88, 88);
}
Here we store the zoom level:
float zoom = 1f;
Here we set it and update the Panel:
private void trackBar1_Scroll(object sender, EventArgs e)
{
// for zooming between, say 5% - 500%
// let the value go from 50-50000, and initialize to 100 !
zoom = trackBar1.Value / 100f;
panel1.Invalidate();
}
Two example screenshots:
Note how nicely this scales the Pen widths as well. Turning on antialiasing would be a good idea..: g.SmoothingMode = SmoothingMode.AntiAlias;
Since you're drawing from scratch, couldn't you resize you drawing base on zoom factor?
You could multiply your drawing dimensions by your zoom factor. Assuming your zoom factor would be:
0.5 for 50 % zoom (which would reduce the drawing size)
1.0 for 100% (Real size)
1.5 for 150 % (bigger size), you could calc the width this way:
object.Width = originalWidth * zoomFactor;
Related
I'am using the code below to zoom in/out an image in a picturebox, however after i zoom in and out the x,y data changes. For example, before zooming out, when I draw a rectangle on an object in the image the X,Y,W,H will be 50,50,10,10
But after i zoom out a bit the data changes to 20,20,3,3.
Due to this the roi shifts. I need the zoom option as the image is a bit large.
BTW, im working in EMGUCV and Accord in a single project, so cant use the emgucv imagebox.
My code :
Image zoom1(Image img, Size size)
{
Bitmap bmp = new Bitmap(img, img.Width + (img.Width * size.Width /
100), img.Height + (img.Height * size.Height / 100));
Graphics g = Graphics.FromImage(bmp);
g.InterpolationMode =
System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
return bmp;
}
private void trackBar1_Scroll(object sender, EventArgs e)
{
if (trackBar1.Value > 0 | trackBar1.Value < 0)
{
pictureBox1.Image = zoom1(imgoriginal, new
Size(trackBar1.Value, trackBar1.Value));
}
}
At the moment I develope a ChartControl and it works just pretty well in my opinion,
but now I'm at a point where it would be nice to have the ability to zoom the drawed signal for better analyzing.
At the moment I calculate the needed points like this:
for (int i = 0; i < PointsCount; i++){
xAxisPoint = xAxisOP.X + i * (xAxisWidth / PointsCount);
yAxisPoint = yAxisHeight * data[i].Point / Divisor;
if(yAxisPoint > yAxisHeight){
yAxisPoint = yAxisHeight;
}
if(yAxisPoint < -yAxisHeight){
yAxisPoint = -yAxisHeight;
}
Points[i] = new PointF(xAxisPoint, yAxisOP.Y + yAxisPoint);
}
if(zoom){
graphics.ScaleTransform(0.2f*ZoomFactor, 0.2f*ZoomFactor);
}
using (Pen plotPen = new Pen(plotColor, 1)){
graphics.DrawLines(plotPen, Points);
}
But the problem is: When it zooms in, the zoom is way too big and is drawn outside the bounds of my control.
Is there a way to specify an area in which it should be Scaled (zoomed)?
For the final question: Is there a way to specify an area in which it should be scaled/zoomed? you need a combination of SetClip, TranslateTransform and ScaleTransform.
Here is an example.
It uses a
target rectangle zoomTgtArea where the zoomed graphics are displayed,
a mouse location zoomOrigin where the zoom origin is,
a float zoomFactor, a positive float.
Initial values:
Rectangle zoomTgtArea = new Rectangle(300, 500, 200, 200);
Point zoomOrigin = Point.Empty; // updated in MouseMove when button is pressed
float zoomFactor = 2f;
The trick to zoom in on only a part of the graphics is to display the graphics twice, once normally and once with the transformations of the Graphics object.
Let's try:
private void pictureBox_Paint(object sender, PaintEventArgs e)
{
// normal drawing
DrawStuff(e.Graphics);
// for the movable zoom we want a small correction
Rectangle cr = pictureBox.ClientRectangle;
float pcw = cr.Width / (cr.Width - ZoomTgtArea.Width / 2f) ;
float pch = cr.Height / (cr.Height - ZoomTgtArea.Height / 2f) ;
// now we prepare the graphics object; note: order matters!
e.Graphics.SetClip(zoomTgtArea );
// we can either follow the mouse or keep the output area fixed:
if (cbx_fixed.Checked)
e.Graphics.TranslateTransform( ZoomTgtArea.X - zoomCenter.X * zoomFactor,
ZoomTgtArea.Y - zoomCenter.Y * zoomFactor);
else
e.Graphics.TranslateTransform( - zoomCenter.X * zoomFactor * pcw,
- zoomCenter.Y * zoomFactor * pch);
// finally zoom
e.Graphics.ScaleTransform(zoomFactor, zoomFactor);
// and display zoomed
DrawStuff(e.Graphics);
}
The DrawStuff I used is simple:
void DrawStuff(Graphics g)
{
bool isZoomed = g.Transform.Elements[0]!= 1
|| g.Transform.OffsetX != 0 | g.Transform.OffsetY != 0;
if (isZoomed) g.Clear(Color.Gainsboro); // pick your back color
// all your drawing here!
Rectangle r = new Rectangle(10, 10, 500, 800); // some size
using (Font f = new Font("Tahoma", 11f))
g.DrawString(text, f, Brushes.DarkSlateBlue, r);
}
Its only extra is clearing the background so the normal drawing won't shine through the zoomed version..
Let's see:
Firstly, for context, I'm a beginner in C# and I'm playing around with forms.
I have attempted to draw a rectangle to a panel ("myPanel") on a form ("Form1") but there is a margin or some sort of padding which I cannot remove.
I have set the "padding" and "margin" properties of "myPanel" to 0 with no success.
The code is:
namespace Forms___Playing_with_Graphics
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
private void myPanel_Paint(object sender, PaintEventArgs e)
{
// rectangle, slightly smaller than size of panel
int topLeftx = myPanel.Location.X;
int topLefty = myPanel.Location.Y;
int width = myPanel.Size.Width - 5;
int height = myPanel.Size.Height - 5;
Graphics g = e.Graphics;
Rectangle r = new Rectangle(topLeftx, topLefty, width, height);
Pen p = new Pen(Color.Black, 5F);
g.DrawRectangle(p, r);
}
}
}
A screenshot of the result:
How do I remove this padding between the rectangle and the inside left and top edges? My naive expectation was for the rectangle to start in the very top-left corner.
Any help would be greatly appreciated.
Top left corner has coordinates x = 0, y = 0. But you should also keep in mind width of rectangle border. If you want rectangle border to fit exactly to the panel which contains it, then you should step inside half of border width:
private void myPanel_Paint(object sender, PaintEventArgs e)
{
float borderWidth = 5f;
float topLeftx = borderWidth / 2;
float topLefty = borderWidth / 2;
float width = panel2.ClientSize.Width - borderWidth;
float height = panel2.ClientSize.Height - borderWidth;
Graphics g = e.Graphics;
Pen pen = new Pen(Color.Black, borderWidth);
g.DrawRectangle(pen, topLeftx, topLefty, width, height);
}
Result:
I have the following code which i wrote to try and rotate a bitmap(this is a test) the idea is to take a bitmap and rotate it by some amount of degrees and then draw it on the screen using win forms
protected override void OnDoubleClick(EventArgs e)
{
base.OnDoubleClick(e);
Graphics g = this.CreateGraphics();
Bitmap b = new Bitmap(path);
g.Clear(Color.White);
imagePosition = Cursor.Position;
b = RotateImage(b, 45);
g.DrawImage(b, new Point(100, 100));
}
public Bitmap RotateImage(Bitmap b, float angle)
{
Bitmap returnBitmap = new Bitmap(b.Width, b.Height);
returnBitmap.SetResolution(b.HorizontalResolution, b.VerticalResolution);
Graphics g = Graphics.FromImage(returnBitmap);
g.TranslateTransform((float)b.Width / 2, (float)b.Height / 2);
g.RotateTransform(angle);
g.TranslateTransform(-(float)b.Width / 2, -(float)b.Height / 2);
g.DrawImage(b, new Point(0, 0));
return returnBitmap;
}
this is the image before rotation
and this is the image after rotating 45 degrees like was shown in the code
The reason it's getting clipped is that there isn't enough space to display it rotated. The diagonal is longer than the sides (Pythagoras).
You need to make more space for the image, then it should display OK. How you do that will depend on what the image is contained in.
I am using OnPaint method in my class Class1 : Panel.
protected override void OnPaint(PaintEventArgs e)
{
base.OnPaint(e);
Graphics g = e.Graphics;
}
to rotate and draw rectangle I am using
Matrix m = new Matrix();
m.RotateAt(90, rotationPoint);
g.Transform = m;
g.FillRectangle(Brushes.Black, rectangle)
the problem is, that rotation isn't working as I want it to.
Red square is rotation point and it's located in the middle-top of rectangle. How to set x, y and rotation point so rotation would work properly?
After rotating at 90 degress it should look like this
red pixel is still at the same location.
Rotation point is not the point, which you want to rotate. It is point, around which graphics is rotated. So if you draw a rectangle on the top of the graphics and want to rotate it (rectangle) - then you should set rotation point as center of graphics and rotate image to 90 degrees.
Here is example, that does almost what you want:
base.OnPaint(e);
var g = e.Graphics;
var width = g.VisibleClipBounds.Width;
var height = g.VisibleClipBounds.Height;
var rotationPoint = new PointF(width / 2, height / 2); ;
// draw center point
g.FillRectangle(Brushes.Red, new RectangleF(rotationPoint.X - 5, rotationPoint.Y - 5, 10, 10));
using (var path = new GraphicsPath())
{
var rectangle = new RectangleF((width - 10) / 2, 0, 10, 10);
var m = new Matrix();
m.RotateAt(90, rotationPoint);
path.AddRectangle(rectangle);
path.Transform(m);
// draw rotated point
g.FillPath(Brushes.Black, path);
}