drawing easeInOutCubic curve with Graphics.DrawCurve - c#

How do I use Graphics.DrawCurve to draw an EaseInOutCubic curve in .NET?
Link to visual of the curve I'm talking about
http://easings.net/#easeInOutCubic
I know how to draw a simple curve but I don't understand how to specifically draw that type of curve. How do i go about achieving this?
This is the equation for the curve in JS which is trivial to conver to C#.
// t: current time, b: begInnIng value, c: change In value, d: duration
easeInOutCubic: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t + b;
return c/2*((t-=2)*t*t + 2) + b;
},
Sample C# to draw curve:
private void DrawCurvePoint(PaintEventArgs e)
{
// Create pens.
Pen redPen = new Pen(Color.Red, 3);
Pen greenPen = new Pen(Color.Green, 3);
// Create points that define curve.
Point point1 = new Point(50, 50);
Point point2 = new Point(100, 25);
Point point3 = new Point(200, 5);
Point point4 = new Point(250, 50);
Point point5 = new Point(300, 100);
Point point6 = new Point(350, 200);
Point point7 = new Point(250, 250);
Point[] curvePoints = {point1, point2, point3, point4, point5, point6, point7};
// Draw lines between original points to screen.
e.Graphics.DrawLines(redPen, curvePoints);
// Draw curve to screen.
e.Graphics.DrawCurve(greenPen, curvePoints);
}

Related

Creating a single hexagon in C# using DrawPolygon

Ok so i have created a triangle but I cant for the life of me work out the coordinates to create a simple hexagon,
Point[] shape = new Point[3];
shape[0] = new Point(200, 100);
shape[1] = new Point(300, 200);
shape[2] = new Point(100, 200);
This makes a triangle but I cant figure out the x and y values for a hexagon, sounds like a simple question but my brain just isn't working correctly today, Below is the array for the hexagon I just can't figure out the values.
Point[] shape = new Point[6];
shape[0] = new Point(0, 0);
shape[1] = new Point(0, 0);
shape[2] = new Point(0, 0);
shape[3] = new Point(0, 0);
shape[4] = new Point(0, 0);
shape[5] = new Point(0, 0);
Any help would be great thanks!
Since I've already written a comment, I guess I should demonstrate that in some real code.
I created a WinForms application with a Panel object on which I can draw. Then I've overridden the Paint event on that to draw me a hexagon.
private void panel1_Paint(object sender, PaintEventArgs e)
{
var graphics = e.Graphics;
//Get the middle of the panel
var x_0 = panel1.Width / 2;
var y_0 = panel1.Height / 2;
var shape = new PointF[6];
var r = 70; //70 px radius
//Create 6 points
for(int a=0; a < 6; a++)
{
shape[a] = new PointF(
x_0 + r * (float)Math.Cos(a * 60 * Math.PI / 180f),
y_0 + r * (float)Math.Sin(a * 60 * Math.PI / 180f));
}
graphics.DrawPolygon(Pens.Red, shape);
}
This then draws
As I said, the key is to view the hexagon as a "discrete" circle. The points are all computed as being on the outer part of a perfect circle, which are then connected with a straight line. You can create all regular n-Point shapes with this technique (a pentagon e.g. as a 5-regular shape ;))
So, you just "inscribe" the 6 points in the circle to get your hexagon, as shown in this diagram with a regular 5-point shape:
Then remember that you can compute the (x,y) coordinates of a point given its polar coordinates (r, phi) as
To which you can also add an offset , which is in my case the center of the frame I'm drawing in.

Getting "Argument Exception" while drawing curve

When I was trying to draw curve line in C# windows form application, I got argument exception. Th exception is "Parameter not valid".
Point point1 = new Point(37, 28);
Point point2 = new Point(30, 40);
Point point3 = new Point(23, 35);
Point point4 = new Point(30, 30);
Point point5 = new Point(40, 35);
Point point6 = new Point(40, 40);
Point point7 = new Point(39, 42);
Point[] curvePoints = { point1, point2, point3, point4, point5, point6, point7 };
//e.Graphics.DrawCurve(blackpen, curvePoints);
//Thread.Sleep(10);
Point[] curve = {};
for (nI = 0; nI < 7; nI++)
{
curve = new Point[nI + 1];
curve[nI] = curvePoints[nI];
e.Graphics.DrawCurve(blackpen, curve);
Thread.Sleep(50);
}
g.Dispose();
How to write correctly ...?

how to resize polygon in C#?

I draw Polygon with this code:
Graphics surface;
surface = this.CreateGraphics();
SolidBrush brush = new SolidBrush(Color.Olive);
Point[] points = { new Point(50, 50), new Point(250, 50), new Point(50, 250) };
surface.FillPolygon(brush, points);
how to resize polygon Similar to the following?
Pic
Try this:
var g = e.Graphics;
var points=new PointF[] { new PointF(0, 0), new PointF(1, 0), new PointF(0, 1) };
var st=g.SaveState();
g.TranslateTransform(100f, 100f);
g.ScaleTransform(40f, 40f);
g.FillPolygon(Brushes.Olive, points);
g.Transform=mx;
g.TranslateTransform(300f, 100f);
g.ScaleTransform(80f, 80f);
g.FillPolygon(Brushes.MediumOrchid, points);
g.Restore(st);
which draws to polygons of the same shape on different locations with different sizes.
(red annotations added by me)
You have a couple options. A simple, rather silly solution would be to use linq:
double resizeValue = 1.5;
points.Select(x => new Point(x.X*resizeValue, x.Y*resizeValue);
That way is simple to understand, I think. May be better ways, but if this is all you're doing, it's probably sufficient.

How to draw a dashed line over an object?

I am drawing a line on a control on my Windows form like this:
// Get Graphics object from chart
Graphics graph = e.ChartGraphics.Graphics;
PointF point1 = PointF.Empty;
PointF point2 = PointF.Empty;
// Set Maximum and minimum points
point1.X = -110;
point1.Y = -110;
point2.X = 122;
point2.Y = 122;
// Convert relative coordinates to absolute coordinates.
point1 = e.ChartGraphics.GetAbsolutePoint(point1);
point2 = e.ChartGraphics.GetAbsolutePoint(point2);
// Draw connection line
graph.DrawLine(new Pen(Color.Yellow, 3), point1, point2);
I would like to know if it is possible to draw a dashed (dotted) line instead of a regular solid line?
It's pretty simple once you figure out the formatting that defines the dashes:
float[] dashValues = { 5, 2, 15, 4 };
Pen blackPen = new Pen(Color.Black, 5);
blackPen.DashPattern = dashValues;
e.Graphics.DrawLine(blackPen, new Point(5, 5), new Point(405, 5));
The numbers in the float array represent dash lengths of different colors. So for a simple dash of 2 pixels on (black) and two off each your aray would look like: {2,2} The pattern then repeats. If you wanted 5-wide dashes with a space of 2 pixels you would use {5,2}
In your code it would look like:
// Get Graphics object from chart
Graphics graph = e.ChartGraphics.Graphics;
PointF point1 = PointF.Empty;
PointF point2 = PointF.Empty;
// Set Maximum and minimum points
point1.X = -110;
point1.Y = -110;
point2.X = 122;
point2.Y = 122;
// Convert relative coordinates to absolute coordinates.
point1 = e.ChartGraphics.GetAbsolutePoint(point1);
point2 = e.ChartGraphics.GetAbsolutePoint(point2);
// Draw (dashed) connection line
float[] dashValues = { 4, 2 };
Pen dashPen= new Pen(Color.Yellow, 3);
dashPen.DashPattern = dashValues;
graph.DrawLine(dashPen, point1, point2);
I think you can accomplish this by changing the pen you use to draw your line.
So, replace the last 2 lines in your example with:
var pen = new Pen(Color.Yellow, 3);
pen.DashStyle = DashStyle.Dash;
graph.DrawLine(pen, point1, point2);
Pen has a public property that is defined as
public DashStyle DashStyle { get; set; }
you can set DasStyle.Dash if you want to draw a Dashed line.
Pen.DashPattern will do this. Look here for an example
In more modern C#:
var dottedPen = new Pen(Color.Gray, width: 1) { DashPattern = new[] { 1f, 1f } };
To answer this question regarding the generation of a dashed line using the code-behind:
Pen dashPenTest = new(Brushes.DodgerBlue, 1);
Line testLine = new()
{
Stroke = dashPenTest.Brush, //Brushes.Aqua,
StrokeThickness = dashPenTest.Thickness,//1,
StrokeDashArray = new DoubleCollection() { 8,4 },
X1 = 0,
X2 = canvas.Width,
Y1 = 10,
Y2 = 10
};
canvas.Children.Add(testLine);
This answer make use of the generation of a canvas in the xaml:
<Canvas x:Name ="canvas" Background="White" Height="300" Width="300">
The important method here is the "StrokeDashArray" that generates the dashes for the line drawn. More information is given here: Shape.StrokeDashArray

c# radial gradient brush effect in GDI and winforms

I have created a c# windows application and written 75% of the code. The program allows the user to create a flow chart, and will shade the flow chart shapes according to their status. I wanted them to become 3d buttons such as from the website Webdesign.org
Rather than create a PNG for each button, I wanted to create them in C# using brushes or other technique, such as:
// Create solid brush.
SolidBrush blueBrush = new SolidBrush(Color.Blue);
// 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};
// Define fill mode.
FillMode newFillMode = FillMode.Winding;
// Fill polygon to screen.
e.Graphics.FillPolygon(blueBrush, curvePoints, newFillMode);
I know WPF has radial gradients, but can I do something simular in CGI?
Unlike WPF, GDI+/WinForms does not have a RadialGradientBrush. However you can achieve the same effect using a PathGradientBrush.
Here's an example:
Rectangle bounds = ...;
using (var ellipsePath = new GraphicsPath())
{
ellipsePath.AddEllipse(bounds);
using (var brush = new PathGradientBrush(ellipsePath))
{
brush.CenterPoint = new PointF(bounds.Width/2f, bounds.Height/2f);
brush.CenterColor = Color.White;
brush.SurroundColors = new[] { Color.Red };
brush.FocusScales = new PointF(0, 0);
e.Graphics.FillRectangle(brush, bounds);
}
}
The PathGradientBrush has lots of properties to experiment with to ensure you get the effect you're after.
Take a look at this Codeproject article, and then at the Path gradient.

Categories