We Keep Coding

Draw arrow between on line between two points

how can i draw an arror to show the direction of line ? i manage to do but the arrow not in the right shape.
//For Line
Point point1 = new Point(100, 110);
Point point2 = new Point(300, 210);
Point point3 = new Point(200, 310);
Point point4 = new Point(100,310);
e.Graphics.DrawLines(pen, points);
//For Arrow
e.Graphics.DrawLine(pen, 200, 150, 180, 130);
e.Graphics.DrawLine(pen, 200, 150, 180, 150);

Another example:
Produced by:
private void pictureBox1_Paint(object sender, PaintEventArgs e)
{
Point[] points = {
new Point(100, 110),
new Point(300, 210),
new Point(200, 310),
new Point(100, 310)
};
for(int i=0; i<(points.Length-1); i++)
{
Point p1 = points[i];
Point p2 = points[i + 1];
e.Graphics.DrawLine(Pens.Black, p1, p2);
float angle = getAngle(p1, p2);
Point mid = getMidPoint(p1, p2);
e.Graphics.TranslateTransform(mid.X, mid.Y);
e.Graphics.RotateTransform(angle);
e.Graphics.RotateTransform(135);
e.Graphics.DrawLine(Pens.Black, new Point(0, 0), new Point(8, 0));
e.Graphics.RotateTransform(-270);
e.Graphics.DrawLine(Pens.Black, new Point(0, 0), new Point(8, 0));
e.Graphics.ResetTransform();
}
}
private float getAngle(Point p1, Point p2)
{
float deltaX = p2.X - p1.X;
float deltaY = p2.Y - p1.Y;
return (float)(Math.Atan2(deltaY, deltaX) * 180.0 / Math.PI);
}
private Point getMidPoint(Point p1, Point p2)
{
return new Point((p1.X + p2.X)/2,(p1.Y+p2.Y)/2);
}

I think you want something like this:
and here is the code to do it:
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);
this.pictureBox1.Paint += PictureBox1_Paint;
}
private void PictureBox1_Paint(object sender, PaintEventArgs e)
{
e.Graphics.SmoothingMode = SmoothingMode.AntiAlias;
for (int i = 0; i < 5; i++)
{
DrawLineWithArrow(e.Graphics,
Color.Blue,
new PointF(50, 50),
new PointF(340, 120+35*i),
4f+3f*i, false);
DrawLineWithArrow(e.Graphics,
Color.Red,
new PointF(340, 120+35*i),
new PointF(340+290, 50),
4f+3f*i, true);
}
}
public void DrawLineWithArrow(Graphics g, Color color, PointF start, PointF end, float arrowSize=8f, bool filled = false)
{
if (start==end) return;
PointF mid = new PointF((start.X+end.X)/2, (start.Y+end.Y)/2);
float angle = (float)(180/Math.PI*Math.Atan2(end.Y-start.Y, end.X-start.X));
var gp = new GraphicsPath();
gp.AddLines(
new PointF[]
{
new PointF(-arrowSize, -arrowSize/3),
new PointF(0, 0),
new PointF(-arrowSize, arrowSize/3)
}
);
if (filled)
{
gp.CloseFigure();
}
var state = g.Save();
using (Pen pen = new Pen(color, 0))
{
g.DrawLine(pen, start, end);
g.TranslateTransform(
mid.X,
mid.Y);
g.RotateTransform(angle);
if (filled)
{
using (Brush fill = new SolidBrush(color))
{
g.FillPath(fill, gp);
}
}
g.DrawPath(pen, gp);
}
g.Restore(state);
}
}
I took advantage of Graphics.TranslateTransform() and Graphics.RotateTransform() to move and align the coordinate system in the middle of the line and along the line. The drawing of the arrow is much simpler than trying to do vector rotations by hand.

Is there any way to draw 2D shapes in Viewport3D like arc, line, point and plane?

Right now I am using Viewport3D in which I am drawing all 3D shapes but I also want to draw arc, point and lines in Viewport3D. Can anyone help me with this?
private Viewport2DVisual3D ArcModel;
private Model3DGroup group;
MeshGeometry3D testGeometry = new MeshGeometry3D();
PathFigure pthFigure = new PathFigure();
pthFigure.StartPoint = new Point(1, 1);
ArcSegment arcSeg = new ArcSegment();
arcSeg.Point = new Point(30, 30);
arcSeg.Size = new Size(20, 20);
arcSeg.IsLargeArc = true;
arcSeg.SweepDirection = SweepDirection.Counterclockwise;
//arcSeg.RotationAngle = 30;
PathSegmentCollection myPathSegmentCollection = new PathSegmentCollection();
myPathSegmentCollection.Add(arcSeg);
pthFigure.Segments = myPathSegmentCollection;
PathFigureCollection pthFigureCollection = new PathFigureCollection();
pthFigureCollection.Add(pthFigure);
PathGeometry pthGeometry = new PathGeometry();
pthGeometry.Figures = pthFigureCollection;
Path arcPath = new Path();
arcPath.Stroke = new SolidColorBrush(Colors.Violet);
arcPath.StrokeThickness = 1;
arcPath.Data = pthGeometry;
//arcPath.Fill = new SolidColorBrush(Colors.Yellow);
//Children.Add(arcPath);
Point3DCollection myPoint3DCollection = new Point3DCollection();
myPoint3DCollection.Add(new Point3D(0, 0, 0));
myPoint3DCollection.Add(new Point3D(0, 0, 2));
myPoint3DCollection.Add(new Point3D(0, 2, 0));
myPoint3DCollection.Add(new Point3D(0, 2, 2));
testGeometry.Positions = myPoint3DCollection;
PointCollection myPointCollection = new PointCollection();
myPointCollection.Add(new Point(0, 1));
myPointCollection.Add(new Point(1, 1));
myPointCollection.Add(new Point(0, 0));
myPointCollection.Add(new Point(1, 0));
testGeometry.TextureCoordinates = myPointCollection;
Int32Collection triangleIndicesCollection = new Int32Collection();
triangleIndicesCollection.Add(0);
triangleIndicesCollection.Add(1);
triangleIndicesCollection.Add(2);
triangleIndicesCollection.Add(2);
triangleIndicesCollection.Add(1);
triangleIndicesCollection.Add(3);
testGeometry.TriangleIndices = triangleIndicesCollection;
DiffuseMaterial myDiffuseMaterial = new DiffuseMaterial(Brushes.White);
Viewport2DVisual3D.SetIsVisualHostMaterial(myDiffuseMaterial, true);
ArcModel = new Viewport2DVisual3D();
ArcModel.Material = myDiffuseMaterial;
ArcModel.Geometry = testGeometry;
//group.Children.Add(ArcModel.Geometry);
ArcModel.Visual = arcPath;
ArcGeomodel = new GeometryModel3D(ArcModel.Geometry, myDiffuseMaterial);
ArcGeomodel.Transform = new Transform3DGroup();
group.Children.Add(ArcGeomodel);
viewport.Children.Add(ArcModel);
I am drawing this arc using path geometry and adding it into Viewport2DVisual3D but its not getting displayed...
what I am missing here ...please suggest any solution

Finally got what I was missing.I was missing to add transformation and rotation to it
following is the code
Transform3DGroup myTransform3DGroup = new Transform3DGroup();
RotateTransform3D rotateTransform = new RotateTransform3D()
{
Rotation = new AxisAngleRotation3D
{
Angle = 40,
Axis = new Vector3D(0, 1, 0)
}
};
myTransform3DGroup.Children.Add(rotateTransform);
ArcModel.Transform = myTransform3DGroup;
ArcModel.Material = myDiffuseMaterial;
ArcModel.Geometry = testGeometry;
ArcModel.Visual = arcPath;
viewport.Children.Add(ArcModel);
Hope this will help someone!

Polygon find the shortest way from start to end

I am searching the shortest way in my polygon (route). It starts on the center border on bottom left (blue) and ends on the center border on the top right (red). It is not allowed to leave the route.
Which algorithm i can use to calculate this route? I need a list of points to draw the shortest way. A example code would be great.
Example of my polygon with start and end
var points = new List<Point> { new Point(210, 540), new Point(330, 420), new Point(360, 420), new Point(420, 390), new Point(450, 330), new Point(480, 315), new Point(510, 270), new Point(570, 240), new Point(630, 240), new Point(690, 180), new Point(750, 150), new Point(810, 120), new Point(864, 120), new Point(864, 60), new Point(810, 60), new Point(750, 90), new Point(690, 120), new Point(630, 150), new Point(570, 150), new Point(510, 210), new Point(480, 255), new Point(450, 270), new Point(420, 330), new Point(360, 360), new Point(330, 360), new Point(156, 480) };
var image = new Bitmap(1000, 600);
using (var graphics = Graphics.FromImage(image))
{
graphics.Clear(Color.White);
graphics.FillPie(Brushes.Blue, 190, 500, 10, 10, 0, 360);
graphics.FillPie(Brushes.Red, 840, 80, 10, 10, 0, 360);
graphics.DrawPolygon(new Pen(Color.Black, 2), points.ToArray());
}
image.Save("example.bmp");

Solution
Thanks #gusman
Add Raster
Calculate distance between points
Search best route with Dijkstra.NET
using Dijkstra.NET.Contract;
using Dijkstra.NET.Model;
using Dijkstra.NET.ShortestPath;
using System;
using System.Collections.Generic;
using System.Drawing;
using System.Drawing.Drawing2D;
namespace Test.Polygon
{
class Program
{
static void Main(string[] args)
{
var points = new List<Point> { new Point(210, 540), new Point(330, 420), new Point(360, 420), new Point(420, 390), new Point(450, 330), new Point(480, 315), new Point(510, 270), new Point(570, 240), new Point(630, 240), new Point(690, 180), new Point(750, 150), new Point(810, 120), new Point(864, 120), new Point(864, 60), new Point(810, 60), new Point(750, 90), new Point(690, 120), new Point(630, 150), new Point(570, 150), new Point(510, 210), new Point(480, 255), new Point(450, 270), new Point(420, 330), new Point(360, 360), new Point(330, 360), new Point(156, 480) };
var start = new Point(190, 500);
var target = new Point(840, 80);
var image = new Bitmap(1000, 600);
using (var graphics = Graphics.FromImage(image))
{
graphics.Clear(Color.White);
graphics.FillPie(Brushes.Blue, 190, 500, 10, 10, 0, 360);
graphics.FillPie(Brushes.Red, 840, 80, 10, 10, 0, 360);
graphics.DrawPolygon(new Pen(Color.Black, 2), points.ToArray());
}
var path = new GraphicsPath(FillMode.Winding);
path.AddPolygon(points.ToArray());
var pointsForConnect = DrawRaster(5, image, path);
var dictionary = new Dictionary<uint, Point>();
dictionary.Add(0, start);
dictionary.Add(1, target);
var graph = new Graph<int, string>();
var i = 2;
foreach (var point in pointsForConnect)
{
dictionary.Add((uint)i, point);
graph.AddNode(i);
i++;
}
foreach (var point in dictionary)
{
foreach (var point2 in dictionary)
{
if (point.Equals(point2))
{
continue;
}
double dist = Math.Sqrt(Math.Pow(point2.Value.X - point.Value.X, 2) + Math.Pow(point2.Value.Y - point.Value.Y, 2));
if (dist > 50)
{
continue;
}
graph.Connect(point.Key, point2.Key, (int)dist, null);
//graph.Connect()
}
}
var dijkstra = new Dijkstra<int, string>(graph);
IShortestPathResult result = dijkstra.Process(0, 1); //result contains the shortest path
var shortestRouteIds = result.GetPath();
var shortestRoutePoints = new List<Point>();
foreach(var x in shortestRouteIds)
{
shortestRoutePoints.Add(dictionary[x]);
}
DrawDriver(shortestRoutePoints, image);
image.Save("example.bmp");
}
private static void DrawDriver(List<Point> points, Bitmap image)
{
var pen = new Pen(Color.LightGreen, 5);
for (var i = 0; i < points.Count - 1; i++)
{
var x = points[i].X;
var y = points[i].Y;
var x1 = points[i + 1].X;
var y1 = points[i + 1].Y;
DrawLineInt(image, new Point(x, y), new Point(x1, y1), pen);
}
}
private static void DrawLineInt(Bitmap bmp, Point p1, Point p2, Pen pen)
{
using (var graphics = Graphics.FromImage(bmp))
{
graphics.DrawLine(pen, p1.X, p1.Y, p2.X, p2.Y);
}
}
private static List<Point> DrawRaster(int edge, Bitmap image, GraphicsPath path)
{
var points = new List<Point>();
var countHorizontal = image.Width / edge;
var countVertical = image.Height / edge;
using (var graphics = Graphics.FromImage(image))
{
for (int x = 0; x < countHorizontal; x++)
{
for (int y = 0; y < countVertical; y++)
{
var boxX = (x * edge) + (edge / 2);
var boxY = (y * edge) + (edge / 2);
if (!path.IsVisible(boxX, boxY))
{
continue;
}
points.Add(new Point(boxX, boxY));
graphics.DrawRectangle(Pens.LightGray, x * edge, y * edge, edge, edge);
}
}
}
return points;
}
}
}

drawing easeInOutCubic curve with Graphics.DrawCurve

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);
}

Drawing polygon with more than one hole?

I'm trying to draw a polygon with more than one holes. I tried the following code and it does not work correctly. Please advise.
PointF[] mypoly = new PointF[6 + 5 + 5];
mypoly[0] = new PointF(0, 0);
mypoly[1] = new PointF(100, 0);
mypoly[2] = new PointF(100, 100);
mypoly[3] = new PointF(0, 100);
mypoly[4] = new PointF(10, 80);
mypoly[5] = new PointF(0, 0);
mypoly[6] = new PointF(10, 10);
mypoly[7] = new PointF(10, 20);
mypoly[8] = new PointF(20, 20);
mypoly[9] = new PointF(20, 10);
mypoly[10] = new PointF(10, 10);
mypoly[11] = new PointF(40, 10);
mypoly[12] = new PointF(40, 20);
mypoly[13] = new PointF(60, 20);
mypoly[14] = new PointF(60, 10);
mypoly[15] = new PointF(40, 10);
g.FillPolygon(new SolidBrush(Color.Red), mypoly, FillMode.Winding);
The first part is the outer polygon. The second and the third parts are the two holes inside the polygon.

Use a GraphicsPath instead. You can draw it with Graphics.FillPath, like this:
using System.Drawing.Drawing2D;
...
using (var gp = new GraphicsPath()) {
PointF[] outer = new PointF[] { new PointF(0, 0), new PointF(100, 0),
new PointF(100, 100), new PointF(0, 100), new PointF(10, 80),new PointF(0, 0) };
gp.AddPolygon(outer);
PointF[] inner1 = new PointF[] { new PointF(10, 10), new PointF(10, 20),
new PointF(20, 20), new PointF(20, 10), new PointF(10, 10) };
gp.AddPolygon(inner1);
PointF[] inner2 = new PointF[] { new PointF(40, 10), new PointF(40, 20),
new PointF(60, 20), new PointF(60, 10), new PointF(40, 10) };
gp.AddPolygon(inner2);
e.Graphics.FillPath(Brushes.Black, gp);
}