I am drawing lines using both Rectangle and graphicspath in my application and i am facing lose of width and height in drawing when using GraphicsPath rather than using Rectangle.
Below is the sample code which reproduces my issue,
protected override void OnPaint(PaintEventArgs e)
{
int left = ClientRectangle.X + 40, right = ClientRectangle.Width -80;
int bottom = ClientRectangle.Height - 80, top = ClientRectangle.Y + 40;
int borderWidth = 10;
Rectangle borderrectangle = new Rectangle(left, top, right, bottom);
Pen pen = new Pen(Color.Black, borderWidth);
//Draws lines using Rectangle.
e.Graphics.DrawRectangle(pen, borderrectangle);
Point[] points = new Point[]
{
new Point(left, top),
new Point(right, top),
new Point(right, bottom),
new Point(left, bottom),
};
GraphicsPath path = new GraphicsPath();
path.AddLines(points);
path.CloseFigure();
//Draws lines using Path.
e.Graphics.DrawPath(pen, path);
}
Here is the image ,
Inner rectangle is drawn using the DrawPath and outer rectangle is drawn with DrawRectangle.
Could anyone please update me the reason for width and height lose with GraphicsPath drawing, since i have given proper points as like the rectangle?
Any help will be appreciated.
When you create Rectangle you are passing right and bottom coordinates as width and height. Check Rectangle constructor parameters:
public Rectangle(
int x,
int y,
int width,
int height
)
When you use Path, you are drawing it by coordinates and everything is OK. You should create rectangle this way:
Rectangle borderrectangle = new Rectangle(left, top, right-left, bottom-top);
But make sure that width and height of ClientRectangle are greater than 120
When you are setting the values for your Rectangle, you are setting the X and Y coordinates of the top left corner as well as width and height. However, with your GraphicsPath, you are explicitly defining every corner as a separate point. To make the GraphicsPath draw exactly what the Rectangle is, you'll either need to offset your point array coordinates to equal the width and height of the Rectangle:
Point[] points = new Point[]
{
new Point(left, top),
new Point(right + left, top),
new Point(right + left, bottom + top),
new Point(left, bottom + top),
};
or construct the Rectangle to treat the right and bottom as coordinates instead of fixed lengths:
Rectangle borderrectangle = new Rectangle(left, top, right - left, bottom - top);
Considering that you are treating the values as sides and therefore coordinates, the second option will probably give you the most consistency.
Related
I made a box that I drew using Graphics.DrawLine() for each edge. But I would like the box to be able to move around the screen freely, along with changing the size of the edges. The box is created by using a middle point and width and height, then basic math to find the 4 points which the lines connect to. My question is: How can I update the position of the lines? Do I have to clear the graphics and re-draw the lines each frame? Any answers will be helpful. Thank you.
Here is the code I am using:
private void Form1_Paint(object sender, PaintEventArgs e)
{
Point box_Middle = new Point(300, 300);
int boxWidth = 100;
int boxHeight = 200;
Pen boxPen = new Pen(Color.Red, 3);
DrawBox(e, boxPen, box_Middle, boxWidth, boxHeight);
}
void DrawBox (PaintEventArgs e, Pen pen, Point middle, int width, int height)
{
graphics = e.Graphics;
graphics.TextRenderingHint = System.Drawing.
Text.TextRenderingHint.
SingleBitPerPixelGridFit;
// Draw Box
Point topLeft = new Point(middle.X - width / 2, middle.Y - height / 2);
Point topRight = new Point(topLeft.X + width, topLeft.Y);
Point bottomLeft = new Point(topLeft.X, topLeft.Y + height);
Point bottomRight = new Point(topRight.X, bottomLeft.Y);
graphics.DrawLine(pen, topLeft, topRight);
graphics.DrawLine(pen, topLeft, bottomLeft);
graphics.DrawLine(pen, bottomLeft, bottomRight);
graphics.DrawLine(pen, topRight, bottomRight);
}
As suggested by #TaW on this previous question, I setted PenAlignment.Inset to draw the circle inside the Bitmap, but this caused another problem.
I want to draw a circle on a specified Bitmap with antialiasing.
SmoothingMode.AntiAlias
The problem is that, when I use PenAlignment.Inset, the antialiasing doesn't work correctly!
Instead, with PenAlignment.Center, it works correctly...
Any suggestion to resolve this problem?
Bitmap layer = new Bitmap(80, 80);
using (Graphics g = Graphics.FromImage(layer))
{
using (Pen p = new Pen(Color.Black, 4))
{
p.Alignment = PenAlignment.Inset;
g.SmoothingMode = SmoothingMode.AntiAlias;
g.DrawEllipse(p, new Rectangle(0, 0, layer.Width, layer.Height));
}
}
pictureBox3.Size = new Size(100, 100);
pictureBox3.Image = layer;
(Note the bugs on the left image)
Deflating the bounding rectangle by 1/2 of the pen's stroke width should solve this problem. By "deflate", I mean pull in all 4 sides towards the rectangle's center by 1/2 pen width:
float halfPenWidth = p.Width*0.5f;
g.DrawEllipse(p, new RectangleF(halfPenWidth, halfPenWidth, layer.Width - p.Width, layer.Height - p.Width));
or plugging in a hardcoded pen width of 4:
g.DrawEllipse(p, new Rectangle(2, 2, layer.Width - 4, layer.Height - 4));
Note that the full pen width must be subtracted from the rectangle's width and height in order to pull the right and bottom sides in by 1/2 pen width while keeping the rectangle centered on the same point.
Using this code with pen alignment centered, 1/2 of the stroke width will be drawn outside of the rectangle at the points where the ellipse touches the rectangle, but it will still be drawn inside the bitmap.
i am doing c# project. i have found a problem and unable to find answer of this problem that's why i am posting here/
i am implementing procedural floor plan generation in c#. at first i need to draw a polygon to on given points to generate grid. points can be positive or negative. points will be in floating.
From the Microsoft Documentation i am able to draw polygon for the floating positive points, but when i change points to negative it does not draw anything on form.
this method id drawing x,y coordinates 0,0 in the corner .
code example
public void DrawPolygonPointF(PaintEventArgs e)
{
// Create pen.
Pen blackPen = new Pen(Color.Black, 3);
// Create points that define polygon.
PointF point1 = new PointF(50.0F, 50.0F);
PointF point2 = new PointF(100.0F, 25.0F);
PointF point3 = new PointF(200.0F, 5.0F);
PointF point4 = new PointF(250.0F, 50.0F);
PointF point5 = new PointF(300.0F, 100.0F);
PointF point6 = new PointF(350.0F, 200.0F);
PointF point7 = new PointF(250.0F, 250.0F);
PointF[] curvePoints =
{
point1,
point2,
point3,
point4,
point5,
point6,
point7
};
// Draw polygon curve to screen.
e.Graphics.DrawPolygon(blackPen, curvePoints);
}
i have negative coordinates value for example pointF(300,-250) this method is not drawing nothing for negative coordinates value.
So please give me brief solution because i don't know much about drawing.
Thank you
In C# 0,0 is the top left corner of the screen. So negative values are off the left or top edge of your form. You need to transform your coordinates from your coordinate space to the form's. To place 0,0 dead center, you would do this:
int screenX = myX + windowWidth / 2;
int screenY = myY + windowHeight / 2;
Building off of the answer #pquest gave, and your newly added sample code, doing a "real" GDI transformation would look like this:
// Create pen.
Pen blackPen = new Pen(Color.Black, 3);
// Create points that define polygon.
PointF point1 = new PointF(50.0F, 50.0F);
PointF point2 = new PointF(100.0F, 25.0F);
PointF point3 = new PointF(200.0F, 5.0F);
<...snip...>
//Apply a translation Transformation to move 0,0 to the center of the
//window. You can now draw your points with negative values, without doing
//any addition to them.
int screenX = windowWidth / 2;
int screenY = windowHeight / 2;
e.Graphics.TranslateTransform((float) screenX, (float) screenY);
// Draw polygon curve to screen.
e.Graphics.DrawPolygon(blackPen, curvePoints);
GDI Transformations are very powerful. You can use them to move points around, flip points horizontally or vertically, scale things bigger or smaller, distort like a parallelogram, and even do rotations. All of these can be combined in to what is called a transformation matrix to get some very cool results.
More examples can be found on MSDN.
That's working for me to this problem.
you just need to add couple lines of code in your code.
int windowWidth = this.ClientSize.Width;
int windowHeight = this.ClientSize.Height;
int screenX = windowWidth / 2;
int screenY = windowHeight / 2;
e.Graphics.TranslateTransform((float)screenX, (float)screenY);
I have a shape, for example a Rectangle which has the following bounds:
X = 100
Y = 100
Width = 100
Height = 100
I apply the following rotation to this rectangle using a new Matrix:
X = 100
Y = 100
Angle = 45
var transform = new Matrix();
transform.RotateAt(angle, point);
So the new Matrix has the following value:
0.7071068, 0.7071067, -0.7071067, 0.7071068, 150, -62.13202
I use this Matrix when I draw the Rectangle with Graphic:
protected override void OnPaint(PaintEventArgs e)
{
...
e.Graphic.Transform = transform;
g.DrawRectangle(Pen, bounds.X, bounds.Y, bounds.Width, bounds.Height);
}
The problem is the following: at a certain point I need to draw the same Rectangle but shifted by a certain offset, for example (50, 50). I have stored the Matrix transform and the Rectangle bounds. If I change only the bounds (adding the offset) the new Rectangle will be drawn in a wrong position, probably due to the previous rotation point.
How I have to change the Matrix in order to draw my Rectangle in the "right" position? that is, how can I retreive the right rotation point and the old rotation angle?
Try to add translation to the matrix using MatrixOrder.Prepend.
For offset (50, 50) it'll be:
transform.Translate(50, 50, MatrixOrder.Prepend);
Or create a separate matrix for this case:
var transformWithOffset = new Matrix();
transformWithOffset.Translate(50, 50);
transformWithOffset.RotateAt(angle, point);
I'm having problem in filling the hexagon using this code, when this code runs it draws only the outline of the hexagon that is "White", I want to fill the hexagon with a color but it is not working.
I have searched a lot and tried many things like drawingContext.Drawing() , drawingBrush, etc.
Am I missing something in this code? This is the code:
public void DrawHexagon(DrawingContext drawingContext)
{
GeometryGroup hexaKey = new GeometryGroup();
//making lines for hexagon
hexaKey.Children.Add(
new LineGeometry(new Point(X1, Y1), new Point(X2, Y2)));
hexaKey.Children.Add(
new LineGeometry(new Point(X2, Y2), new Point(X3, Y3)));
hexaKey.Children.Add(
new LineGeometry(new Point(X3, Y3), new Point(X4, Y4)));
hexaKey.Children.Add(
new LineGeometry(new Point(X4, Y4), new Point(X5, Y5)));
hexaKey.Children.Add(
new LineGeometry(new Point(X5, Y5), new Point(X6, Y6)));
hexaKey.Children.Add(
new LineGeometry(new Point(X6, Y6), new Point(X1, Y1)));
//
// Create a GeometryDrawing.
//
GeometryDrawing hexaKeyDrawing = new GeometryDrawing();
hexaKeyDrawing.Geometry = hexaKey;
// Paint the drawing with a gradient.
hexaKeyDrawing.Brush =new SolidColorBrush(Colors.Red);
// Outline the drawing with a solid color.
hexaKeyDrawing.Pen = new Pen(Brushes.White, 2);
drawingContext.DrawGeometry(hexaKeyDrawing.Brush, hexaKeyDrawing.Pen, hexaKeyDrawing.Geometry);
}
LineGeometry doesn't have a way to fill... they're just lines. You need a path. The MSDN has an example
An example, how to fill hexagons: http://www.codeproject.com/Articles/14948/Hexagonal-grid-for-games-and-other-projects-Part-1
In your example you have a number of LineGeometry instances inside a GeometryGroup inside a GeometryDrawing.
First, I'd link to bring to your attention that you're not actually using the GeometryDrawing. In your example you've used it solely as a place holder for your GemetryGroup.
Ignoring this the problem is that LineGeometry instances were not intended to draw shapes and GeometryGroup is not able to realize that your 6 LineSegments together form a closed shape.
Despair not however as there is a way to accomplish what you want: PathGeometry. This geometry essentially defines the contour of a region that may be filled! This contour may is defined by a starting point and a series of PathSegments.
private Point GetExtremity(Point center, double radius, double orientation)
{
return new Point(
center.X + Math.Cos(orientation) * radius,
center.Y + Math.Sin(orientation) * radius
);
}
public void DrawUniformShape(DrawingContext context, Brush brush, Pen pen, Point center, double radius, int sides, double orientationRadians)
{
context.DrawGeometry(
brush,
pen,
new PathGeometry(
Enumerable.Repeat(
new PathFigure(
GetExtremity(center, radius, orientationRadians),
from vertex in Enumerable.Range(1, sides - 1)
let angle = orientationRadians + vertex * 2 * Math.PI / sides
select new LineSegment(GetExtremity(center, radius, angle), true),
true
),
1
)
)
);
}
public void DrawBarnColouredHexagon(DrawingContext context, Point center, double radius, double orientation)
{
DrawUniformShape(
context,
Brushes.Red,
new Pen(Brushes.White, 2),
center,
radius,
6,
0
);
}