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.
Related
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.
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 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 want to hit-test a drawn bitmap to see if a given Point is visible in the non-transparent pixels of the image.
For example, to do this test for the whole bitmap rectangle, you would do something like this:
Bitmap bitmap = new Bitmap("filename.jpg");
GraphicsPath path = new GraphicsPath();
Rectangle bitmapRect = new Rectangle(x, y, bitmap.Width, bitmap.Height);
path.AddRectangle(bitmapRect);
if (path.IsVisible(mouseLocation))
OnBitmapClicked();
However, if I have a bitmap of a non-rectangular item and I want to be able to check if they are clicking on the non-transparent area, is there any supported way in the .NET framework to do this?
The only way I could think to do this is to lock the bitmap bytes into an array, and iterate through it, adding each x,y coordinate that is non-transparent to an array of Point structures. Then use those point structures to assemble a GraphicsPath.
Since these points would be zero-based I would need to offset my mouse location with the distance between the x,y coordinate that the image is being drawn at and 0,0. But this way I could essentially use the same GraphicsPath for each image if I draw it multiple times, as long as the image is not skewed or scaled differently.
If this is the only good route, how would I add the points to the GraphicsPath? Draw lines from point to point? Draw a closed curve?
IMHO a simpler technique would be to look at the alpha component of the hit pixel:
Color pixel = bitmap.GetPixel(mouseLocation.X, mouseLocation.Y);
bool hit = pixel.A > 0;