Spiral:
I have coded squares in C# based on the Fibonacci series exactly as shown in the included image. The problem I am having is trying to draw the arcs. I am not sure if I should be using arcs, curves or bezier curves. I assume an arc is what I want, but I have been unable to get the results I am trying for.
If someone could show me an example of how to draw an arc from corner to corner within a square it would be very much appreciated. I just hard coded the squares for fun. I want to try to write an algorithm to generate them, but right now I am stumped by the behavior of the arcs.
Bitmap bmp = new Bitmap(50, 50);
using (Graphics g = Graphics.FromImage(bmp))
{
g.DrawArc(Pens.Black, new Rectangle(0, 0, 100, 100), 0, 90);
}
Parameters
Stroke color
Bounding box for the circle the arc would be part of
Starting angle (in degrees)
Ending angle (in degrees)
The arc is drawn clockwise from the starting arc. To do a counterclockwise arc, supply a negative value for the ending angle.
Bitmap bmp = new Bitmap(50, 50);
using (Graphics g = Graphics.FromImage(bmp))
{
g.DrawArc(Pens.Black, new Rectangle(0, 0, 100, 100), 0, 90);
}
It seems the bounding box must be twice the size of the square in order for the arc to go from corner to corner.
Curve
The "rectangle" is a square. The center of the arc is a corner, the radius is a side, the starting angle is a multiple of 90° and the sweep angle is 90°. No rocket science.
Related
I am using the following code where I draw a rectangle with a linear gradient brush. However, I cannot understand the how the first two parameters of the brush constructor actually work. I searched and all I found was that these are supposed to be the start and end point of the brush. But how can the brush itself have a start and end point?
using System.Drawing.Drawing2D;
LinearGradientBrush lgb = new LinearGradientBrush(
new Point(0, 0), new Point(40, 40), Color.Red, Color.DarkBlue);
Graphics g = panel1.CreateGraphics();
g.FillRectangle(lgb, 20, 20, 80, 80);
I would specifically love it if someone could tell me what would be the difference if I changed the constructor variable as follows:
LinearGradientBrush lgb = new LinearGradientBrush(
new Point(20, 20), new Point(60, 60), Color.Red, Color.DarkBlue);
A LinearGradientBrush paints an area with a linear gradient, in other words, a blending of color along a line defined by a starting point and an ending point. The first color of the brush is used at the starting point, and the color smoothly transitions along the line such that it becomes the second color at the ending point. Thus, by varying the endpoints, you can adjust the direction of the gradient and the distance over which the color transition occurs, even causing it to repeat if the distance is shorter than the area you are trying to fill.
You already have the code written in your question, why not try a few experiments? I assume you have a Panel called panel1 on your form with a size of at least 150 x 150 units. For convenience, let's take your code and put it into a private method that accepts a starting point and ending point for the gradient. For illustration purposes, we'll also add some code to draw a yellow line starting and ending at the same points as the gradient.
private void DrawGradient(Point startPoint, Point endPoint)
{
LinearGradientBrush lgb =
new LinearGradientBrush(startPoint, endPoint, Color.Red, Color.DarkBlue);
Graphics g = panel1.CreateGraphics();
g.FillRectangle(lgb, 0, 0, 80, 80);
g.DrawLine(new Pen(Color.Yellow, 1.5f), startPoint, endPoint);
}
Now we can easily call this code from somewhere convenient such as a button click handler, and pass it some points. Here's what happens if we pass a starting point of (0, 0) and an ending point of (79, 79):
DrawGradient(new Point(0, 0), new Point(79, 79));
Notice how the color transitions from red in the top left corner to blue in the bottom right along the yellow line. What if we reverse the endpoints?
DrawGradient(new Point(79, 79), new Point(0, 0));
As expected, the transition now goes in the opposite direction, with red in the lower right and blue in the upper left. Similarly, we can make the transition go left-to-right by using endpoints for a horizontal line:
DrawGradient(new Point(0, 40), new Point(79, 40));
The endpoints for the gradient line do not need to be on the edge of the area we are filling. For example, if they are inside the fill area, then the gradient will repeat with a period equal to the length of the line segment. We end up with a funky stripe effect:
DrawGradient(new Point(65, 25), new Point(45, 35));
You can also place the gradient endpoints outside the fill area. This results in a much more subtle color transition:
DrawGradient(new Point(0, 90), new Point(140, 40));
Hope that helps you to understand how linear gradient brushes work. Don't be afraid to experiment. You can easily try these things yourself. That is the best way to learn.
I have a colormap plot and want to apply mesh dimensions on the picture plot. This request was successfully done by using the following code:
// draw mesh pattern
Pen transPen = new Pen(Color.FromArgb(128, 150, 150, 150),2);
g.DrawRectangle(transPen, (float)X,
(float)Y,
(float)dx,
(float)dy);
// draw contour square (brush , x , y , dx , dy)
g.FillRectangle(myContourBrush,
(float)X,
(float)Y,
(float)dx,
(float)dy);
Now my question is : the first transparent rectangle are transparent just in border area or all rectangle area? I don't want to affect colormap color, I just want to have mesh pattern.
The DrawRectangle method only draws the edge. If you want to fill it, you must use FillRectangle. Take a look for yourself. You might have to zoom in quite a bit to notice the color change.
I've been looking all over SO today and I can't get anything to work for my needs.
I have a web application that let's users drag and drop text/images and then it sends the details to the server to draw those to a pdf. I'm trying to enable rotation, but I can't get a hold of the translatetransform stuff. My image in testing prints out great, rotated well, but it is not in the correct location. I'm missing how the intitial translatetransform changes things and my mind is shot at the end of the day. Do I have to draw this as a bitmap first using a different graphics instance, and then draw that bitmap to my background? Any help on this would be great! Thanks!
CODE:
i is the image object from the browser
coord is the x & y of the upper corner of the image on the canvas (990wx1100h) on the browser
size is the h & w of the element on the browser
Bitmap b = new Bitmap(wc.OpenRead(i.img));
if (i.rotation != 0)
{
g.TranslateTransform(this.CanvasDetails.size.width/2, this.CanvasDetails.size.height/2);
g.RotateTransform(i.rotation);
g.DrawImage(b, new Rectangle(- i.coord.x/2, -i.coord.y/2, i.size.width, i.size.height), 0, 0, b.Width, b.Height, GraphicsUnit.Pixel, ia);
}
else
{
g.DrawImage(b, new Rectangle(i.coord.x, i.coord.y, i.size.width, i.size.height), 0, 0, b.Width, b.Height, GraphicsUnit.Pixel, ia);
}
EDIT
I added the translatransform reversal as suggested by Adam, but the image is still drawn in a different location.
g.TranslateTransform(this.CanvasDetails.size.width / 2, this.CanvasDetails.size.height / 2);
g.RotateTransform(i.rotation);
g.TranslateTransform(-this.CanvasDetails.size.width / 2, -this.CanvasDetails.size.height / 2);
g.DrawImage(b, new Rectangle(-i.coord.x / 2, -i.coord.y / 2, i.size.width, i.size.height), 0, 0, b.Width, b.Height, GraphicsUnit.Pixel, ia);
Examples:
Browser View
.NET drawn version
Ok, completely reworking this answer to try to explain it clearer. A couple of things to know are that transformations 'accumulate' and rotation transforms happen around the origin. So to just explain the affect of accumulating (multiplying) transforms, look at this example:
//draw an ellipse centered at 200,200
g.DrawEllipse(Pens.Red, 195, 195, 10, 10);
//apply translate transform - shifts origin to 200,200
g.TranslateTransform(200, 200);
//draw another ellipse, should draw around first ellipse
//because translate tranforms essentially moves our coordinates 200,200
g.DrawEllipse(Pens.Blue, -7, -7, 14, 14);
//now do rotate transform
g.RotateTransform(90f); //degree to rotate object
//now, anything we draw with coordinates 0,0 is actually going to be draw at 200,200 AND be rotated by 45*
//this line will be vertical, through 200,200, instead of horizontal through 0,0
g.DrawLine(Pens.Green, -20,0,20,0);
//If we add another translate, this time 50x, it would normally translate by 50 in the X direction
//BUT - because we already have transforms applied, including the 90 rotate, it affects this translation
//so this in effect because a 50px translation in Y, because it's rotated 90*
g.TranslateTransform(50, 0);
//so even though we translated 50x, this line will draw 50px below the last line
g.DrawLine(Pens.Green, -20, 0, 20, 0);
So for your case, you want to draw an object Centered at CenterPoint and rotated by Angle. So you would do:
g.TranslateTransform(-CenterPoint.X, -CenterPoint.Y);
g.RotateTransform(Angle);
g.DrawImage(b, -ImageSize/2, -ImageSize/2, ImageSize, ImageSize);
You'd then need to reset the transforms for additional drawing, which you can do with:
g.ResetTransform();
If that doesn't leave the image where you want it, then you'll need to check the values you're using to position it. Are you storing it's center? Or top left? Etc.
I am very new to programming and have a quick question regarding a practical exercise i am undergoing for my studies. I am trying to create an application where the user can enter the number of rows and the nuber of columns in which circles will be drawn next to each other (to make a grid of circles essentially)
I have been able to do this in C# by using a rectangle object and shifting it's X axis value over by an amount but i cannot find out how to do this with a circle. Does this work in the same way? I have seen on MSDN that there is a circle class but i can't get this to work.
Do i need to do some thing with a fill ellipse? As this is the only way i can currently figure out how to draw a circle.
I am not looking for a complete solve, just a few basic pointers to help a newbie leearn the ropes.
Thanks!!
Assuming that you have desktop winforms application,
and using System.Drawing.Graphics object to draw inside window.
To draw a rectangle, you probably use one of DrawRectangle methods:
// Create bounding rectangle.
Rectangle rect = new Rectangle(0, 0, 200, 200);
// Draw rectangle to screen.
e.Graphics.DrawRectangle(blackPen, rect);
To draw a circle instead of rectangle, just use DrawEllipse method,
and move bounding rectangle the same way you did, by shifting x and y coordinates.
// Create bounding rectangle.
Rectangle rect = new Rectangle(0, 0, 200, 200);
// Draw circle to screen.
e.Graphics.DrawEllipse(blackPen, rect);
I have a List<Point> of multiple points. How can I draw these points into a bitmap, to get the same as this:
http://img291.imageshack.us/img291/4462/outputtz.png
Points are known, I just need to achieve this gradient effect somehow.
Please note that the gradient isn't radial, if you untwist the polygonal line to a straight one, you would get simple linear gradient from one end to another. I just need this linear gradient twisted along the line's "breaking points".
My current solution is drawing each line separately, while calculating the proper start-color and end-color for each line, so I can use LinearGradientBrush and then DrawLine.
1) Is there any other solution, than calculating the colors myself?
2) How to draw a line with round ends (as on image)? My solution is by drawing ordinary line, with ellipse on each end, but those ellipses won't have gradient, so if the line is VERY short, there is no gradient.
About the rounded ends you can set this property for you Pen
Graphics g = e.Graphics;
Pen p = new Pen(Color.Brown, 15);
// round ends
p.StartCap = LineCap.Round;
p.EndCap = LineCap.Round;
g.DrawLine(p, 30, 80, Width - 50, 80);//can be replace with you code
so on your image you can change the canvas pen.