I have 'n' number of polygons as like below.
<Polygon Points="544,245,544,175,568,175,568,175" Stroke="Black" StrokeThickness="1" />
<Polygon Points="2,223,96,223,96,153,96,153" Stroke="Black" StrokeThickness="1" />
<Polygon Points="350,315,350,333,306,333,306,395,306,395" Stroke="Black" StrokeThickness="1" />
<Polygon Points="164,53,160,53,160,51,160,55,160,55" Stroke="Black" StrokeThickness="1" />
<Polygon Points="264,63,264,58,264,68,264,63,267,63,267,60,267,66,267,63,270,63,270,58,270,68,270,68" Stroke="Black" StrokeThickness="1" />
<Polygon Points="8,63,444,63,444,168,444,168" Stroke="Black" StrokeThickness="1" />
<Polygon Points="212,169,212,93,285,93,285,63,285,63" Stroke="Black" StrokeThickness="1" />
<Polygon Points="26,93,127,93,127,148,29,148,29,148" Stroke="Black" StrokeThickness="1" />
<Polygon Points="152,116,152,132,212,132,212,132" Stroke="Black" StrokeThickness="1" />
<Polygon Points="121,316,121,333,70,333,70,366,70,366" Stroke="Black" StrokeThickness="1" />
<Polygon Points="464,395,488,395,488,284,527,284,527,284" Stroke="Black" StrokeThickness="1" />
<Polygon Points="168,63,168,67,180,59,180,67,168,59,168,59" Stroke="Black" StrokeThickness="1" />
<Polygon Points="173,62,173,56,165,56,165,51,175,51,175,61,175,61" Stroke="Black" StrokeThickness="1" />
<Polygon Points="3,285,121,285,121,316,211,316,211,304,211,304" Stroke="Black" StrokeThickness="1" />
Please help me to identify what are the triangles in these polygons
I have tried to identify the vertices like below..
Polygon polygon = new Polygon();
polygon.Points = new System.Windows.Media.PointCollection()
{
new Point(446,134),
new Point(442,134),
new Point(444,140),
new Point(444,140),
};
List<double> verticesPoints = new List<double>();
for (int i = 0; i < polygon.Points.Count - 1; i++)
{
var point1 = polygon.Points[i];
var point2 = polygon.Points[i + 1];
//calculate delta x and delta y between the two points
var deltaX = Math.Pow((point2.X - point1.X), 2);
var deltaY = Math.Pow((point2.Y - point1.Y), 2);
//pythagras theorem for distance
var distance = Math.Sqrt(deltaY + deltaX);
//distance is zero..then same point
if (distance != 0)
{
verticesPoints.Add(distance);
}
}
///Here is the code to calculate angle and consider the triangle
///three vertices then it might be triangle.
if (verticesPoints.Count == 3)
{
///use The Law of Cosines
///cos(C) = a2 + b2 − c2 /2ab
///cos(A) = b2 + c2 − a2 /bc
///cos(B) = c2 + a2 − b2 /ca
var a = ((Math.Pow(verticesPoints[1], 2)) + (Math.Pow(verticesPoints[2], 2)) - (Math.Pow(verticesPoints[0], 2)))
/ (2 * verticesPoints[1] * verticesPoints[2]);
var b = ((Math.Pow(verticesPoints[0], 2)) + (Math.Pow(verticesPoints[2], 2)) - (Math.Pow(verticesPoints[1], 2)))
/ (2 * verticesPoints[0] * verticesPoints[2]);
var c = ((Math.Pow(verticesPoints[0], 2)) + (Math.Pow(verticesPoints[1], 2)) - (Math.Pow(verticesPoints[2], 2)))
/ (2 * verticesPoints[0] * verticesPoints[1]);
///Inverse of cos
var radians1 = Math.Acos(a);
///Convert radian to degree
double degrees1 = (radians1 * 180.0) / Math.PI;
///Inverse of cos
var radians2 = Math.Acos(b);
//Convert radian to degree
double degrees2 = (radians2 * 180.0) / Math.PI;
///Inverse of cos
var radians3 = Math.Acos(c);
///Convert radian to degree
double degrees3 = (radians3 * 180.0) / Math.PI;
var totalDegrees = degrees1 + degrees2 + degrees3;
if (totalDegrees == 180)
{
// Consider triangle
}
}
But above code is not working for <Polygon Points="446,134,442,134,444,140,444,140" Stroke="Black" StrokeThickness="1" /> it is giving only two vertices but it is a triangle and some scenario getting 3 vertices but totalDegrees is not as 180
This code here iterates through the points and calculates the gradient between each of them. If the gradient is the same for two sequential points they must be the same line, so the noOfPoints is not incremented otherwise it is incremented.
The first gradient is stored in firstGradient in order to check if the gradient connecting the last and first point is the same as the gradient between the first and second point.
Polygon polygon = new Polygon();
polygon.Points = new System.Windows.Media.PointCollection()
{
new Point(446,134),
new Point(442,134),
new Point(444,140),
new Point(444,140),
};
List<double> verticesPoints = new List<double>();
double? firstGradient = null;
double? gradient = null;
double? newGradient = null;
int noOfSides = 1;
for (int i = 0; i < polygon.Points.Count - 1; i++)
{
var point1 = polygon.Points[i];
var point2 = polygon.Points[i + 1];
if(point1 == point2) { continue;}
//calculate delta x and delta y between the two points
var deltaX = point2.X - point1.X;
var deltaY = point2.Y - point1.Y;
//calculate gradient
newGradient = (deltaY / deltaX);
if (i == 0)
{
firstGradient = newGradient;
}
if ((gradient != newGradient) && (i != polygon.Points.Count - 2))
{
noOfSides++;
}
else if (i == polygon.Points.Count - 2)
{
if ((gradient != newGradient) && (firstGradient != newGradient)) //This now checks the gradient between the last and first point.
{
point1 = polygon.Points[i+1];
point2 = polygon.Points[0];
if (point1 == point2) { continue; }
//calculate delta x and delta y between the two points
deltaX = point2.X - point1.X;
deltaY = point2.Y - point1.Y;
//calculate gradient
newGradient = (deltaY / deltaX);
if(newGradient != firstGradient)
{
noOfSides++;
}
}
gradient = newGradient;
}
I have solved the above problem using "AForge.NET"
Polygon polygon = new Polygon();
polygon.Points = new PointCollection()
{
new Point(446,134),
new Point(442,134),
new Point(444,140),
new Point(444,140),
};
SimpleShapeChecker shapeChecker = new SimpleShapeChecker();
List<IntPoint> edgePoints = new List<IntPoint>();
List<IntPoint> corners;
for (int i = 0; i <= polygon.Points.Count - 1; i++)
{
edgePoints.Add(new IntPoint((int)polygon.Points[i].X, (int)polygon.Points[i].Y));
}
shapeChecker.MinAcceptableDistortion = 0.2f;
shapeChecker.LengthError = 0;
shapeChecker.AngleError = 5;
shapeChecker.RelativeDistortionLimit = 0;
if (shapeChecker.IsTriangle(edgePoints, out corners))
{
//shape is triangle
}
Need to add below namespace
using AForge;
using AForge.Math.Geometry;
Reference :http://aforgenet.com/articles/shape_checker/
Does anyone know of an easy way to animate a movement from an Image's current location to a new location (X,Y) using WPF animation with no XAML, 100% programmatically? And with no reference to "this" (with RegisterName etc).
I am trying to make an extension class for Image to do animation stuff on it. It is easy enough to change the width and height properties through animation, but after searching for location animation of an object it suddenly becomes more advanced.
As it is an extension class I will only have a reference to the actual Image object and the X and Y I want to move it to.
public static void MoveTo(this Image targetControl, double X, double Y, double Width, double Height){
//code here
...
}
Update:
Thanks. Almost working. It seems The GetTop and GetLeft returns 'NaN' not explicitly set. Found the workaround in this post: Canvas.GetTop() returning NaN
public static void MoveTo(this Image target, double newX, double newY) {
Vector offset = VisualTreeHelper.GetOffset(target);
var top = offset.Y;
var left = offset.X;
TranslateTransform trans = new TranslateTransform();
target.RenderTransform = trans;
DoubleAnimation anim1 = new DoubleAnimation(0, newY - top, TimeSpan.FromSeconds(10));
DoubleAnimation anim2 = new DoubleAnimation(0, newX - left, TimeSpan.FromSeconds(10));
trans.BeginAnimation(TranslateTransform.YProperty, anim1);
trans.BeginAnimation(TranslateTransform.XProperty, anim2);
}
I had to swap two of the values (FROM) with 0. I assume that must be because in this context the upper left corner of the picture is the origin? But now it works.
Try this:
public static void MoveTo(this Image target, double newX, double newY)
{
var top = Canvas.GetTop(target);
var left = Canvas.GetLeft(target);
TranslateTransform trans = new TranslateTransform();
target.RenderTransform = trans;
DoubleAnimation anim1 = new DoubleAnimation(top, newY - top, TimeSpan.FromSeconds(10));
DoubleAnimation anim2 = new DoubleAnimation(left, newX - left, TimeSpan.FromSeconds(10));
trans.BeginAnimation(TranslateTransform.XProperty,anim1);
trans.BeginAnimation(TranslateTransform.YProperty,anim2);
}
Here it is... It changes the size and moves a MediaElement under the Canvas. Just input your parameters:
Storyboard story = new Storyboard();
DoubleAnimation dbWidth = new DoubleAnimation();
dbWidth.From = mediaElement1.Width;
dbWidth.To = 600;
dbWidth.Duration = new Duration(TimeSpan.FromSeconds(.25));
DoubleAnimation dbHeight = new DoubleAnimation();
dbHeight.From = mediaElement1.Height;
dbHeight.To = 400;
dbHeight.Duration = dbWidth.Duration;
story.Children.Add(dbWidth);
Storyboard.SetTargetName(dbWidth, mediaElement1.Name);
Storyboard.SetTargetProperty(dbWidth, new PropertyPath(MediaElement.WidthProperty));
story.Children.Add(dbHeight);
Storyboard.SetTargetName(dbHeight, mediaElement1.Name);
Storyboard.SetTargetProperty(dbHeight, new PropertyPath(MediaElement.HeightProperty));
DoubleAnimation dbCanvasX = new DoubleAnimation();
dbCanvasX.From = 0;
dbCanvasX.To = 5;
dbCanvasX.Duration = new Duration(TimeSpan.FromSeconds(.25));
DoubleAnimation dbCanvasY = new DoubleAnimation();
dbCanvasY.From = 0;
dbCanvasY.To = 5;
dbCanvasY.Duration = dbCanvasX.Duration;
story.Children.Add(dbCanvasX);
Storyboard.SetTargetName(dbCanvasX, mediaElement1.Name);
Storyboard.SetTargetProperty(dbCanvasX, new PropertyPath(Canvas.LeftProperty));
story.Children.Add(dbCanvasY);
Storyboard.SetTargetName(dbCanvasY, mediaElement1.Name);
Storyboard.SetTargetProperty(dbCanvasY, new PropertyPath(Canvas.TopProperty));
story.Begin(this);
<Viewbox Stretch="Uniform" StretchDirection="Both" SnapsToDevicePixels="True">
<Grid Width="640" Height="480" Name="MainLayout" SnapsToDevicePixels="True" Background="Black">
<Canvas Width="640" Height="480" Name="MainCanvas" SnapsToDevicePixels="True">
<MediaElement Height="171" HorizontalAlignment="Left" Name="mediaElement1" VerticalAlignment="Top" Width="337" LoadedBehavior="Manual" Margin="166,140,0,0" Canvas.Left="-162" Canvas.Top="-140" />
<Button Canvas.Left="294" Canvas.Top="196" Content="Button" Height="23" Name="button1" Width="75" Click="button1_Click" />
</Canvas>
</Grid>
</Viewbox>
UPDATE:
Instead of MediaElement use this line:
<Rectangle Height="171" HorizontalAlignment="Left" Name="mediaElement1" VerticalAlignment="Top" Width="337" Margin="166,140,0,0" Canvas.Left="-162" Canvas.Top="-140" Fill="{DynamicResource {x:Static SystemColors.MenuBarBrushKey}}" />
And don't forget to put the C# code to:
private void button1_Click(object sender, RoutedEventArgs e) {}
You can use MediaElement as well but you have to define a VideoClip to see something ;)
Please find a solution that uses the Left and Top properties of Canvas for the extension method. See the following code:
public static void MoveTo(this Image target, Point newP)
{
Point oldP = new Point();
oldP.X = Canvas.GetLeft(target);
oldP.Y = Canvas.GetTop(target);
DoubleAnimation anim1 = new DoubleAnimation(oldP.X, newP.X, TimeSpan.FromSeconds(0.2));
DoubleAnimation anim2 = new DoubleAnimation(oldP.Y, newP.Y , TimeSpan.FromSeconds(0.2));
target.BeginAnimation(Canvas.LeftProperty , anim1);
target.BeginAnimation(Canvas.TopProperty, anim2);
}
This code is based on #DeanChalk's answer.
It moves an Image contained within a Canvas (RFID_Token) diagonally from the top-right to the bottom-left, positioned centrally over another Image within a Canvas (RFID_Reader).
<Canvas>
<Canvas x:Name="RFID_Reader_Canvas">
<Image x:Name="RFID_Reader" Source="RFID-Reader.png" Height="456" Width="682" Canvas.Left="37" Canvas.Top="524"/>
</Canvas>
<Canvas x:Name="RFID_Token_Canvas">
<Image x:Name="RFID_Token" Source="RFID-Token.png" Height="268" Width="343" Canvas.Left="874" Canvas.Top="70"/>
</Canvas>
</Canvas>
var StartX = Canvas.GetLeft(RFID_Token);
var StartY = Canvas.GetTop(RFID_Token);
var EndX = RFID_Reader.Width / 2 + Canvas.GetLeft(RFID_Reader) - StartX - (RFID_Token.Width / 2);
var EndY = RFID_Reader.Height / 2 + Canvas.GetTop(RFID_Reader) - StartY - (RFID_Token.Height / 2);
var AnimationX = new DoubleAnimation(0, EndX, TimeSpan.FromSeconds(1));
var AnimationY = new DoubleAnimation(0, EndY, TimeSpan.FromSeconds(1));
var Transform = new TranslateTransform();
RFID_Token_Canvas.RenderTransform = Transform;
Transform.BeginAnimation(TranslateTransform.XProperty, AnimationX);
Transform.BeginAnimation(TranslateTransform.YProperty, AnimationY);
I kept having NaN or 0 values for my nested elements, here's a modified version of Danny's answer :
public void MoveTo(Canvas canvas, FrameworkElement target, FrameworkElement destination)
{
Point oldPoint = target.TransformToAncestor(canvas).Transform(new Point(0, 0));
Point newPoint = destination.TransformToAncestor(canvas).Transform(new Point(0, 0));
var EndX = destination.Width / 2 + newPoint.X - oldPoint.X - (target.Width / 2);
var EndY = destination.Height / 2 + newPoint.Y - oldPoint.Y - (target.Height / 2);
TranslateTransform trans = new TranslateTransform();
target.RenderTransform = trans;
DoubleAnimation anim1 = new DoubleAnimation(0, EndX, TimeSpan.FromSeconds(0.3));
DoubleAnimation anim2 = new DoubleAnimation(0, EndY, TimeSpan.FromSeconds(0.3));
trans.BeginAnimation(TranslateTransform.XProperty, anim1);
trans.BeginAnimation(TranslateTransform.YProperty, anim2);
}
I am trying to programmatically add bezier paths to a canvas in a WPF window. This works fine if I write them out in XAML, but adding one programmatically fails
XAML
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="320" Width="480" ContentRendered="Window_ContentRendered">
<Canvas Margin="10" Name="canvas">
<Rectangle Width="50" Height="100" Fill="LightSalmon" Margin="0,50"></Rectangle>
</Canvas>
</Window>
Code behind
private void Window_ContentRendered(object sender, EventArgs e)
{
var r = new Rectangle();
r.Width = 50;
r.Height = 50;
r.StrokeThickness = 3;
r.Fill = new SolidColorBrush(Colors.Black);
canvas.Children.Add(r);
//bezier is a System.Windows.Shapes.Path
bezier.Stroke = new SolidColorBrush(Colors.Black);
bezier.StrokeThickness = 35;
PathFigure pf = new PathFigure { StartPoint = new Point(50, 67.5) };
PolyBezierSegment pbs = new PolyBezierSegment(new Point[] { new Point(100, 67.5), new Point(100, 50), new Point(150, 50) }, false);
pf.Segments.Add(pbs);
PathFigureCollection pfc = new PathFigureCollection { pf };
PathGeometry pg = new PathGeometry();
pg.Figures = pfc;
bezier.Data = pg;
canvas.Children.Add(bezier);
canvas.Dispatcher.Invoke(() => { }, DispatcherPriority.Render);
}
Since the black rectangle is added correctly it must be something with building up the bezier path, but I can't figure out where the problem is. There are no errors or exceptions. It just doesn't show up on re-rendering.
For completeness, here the (currently commented out) XAML of the bezier, that works
<Path Stroke="Black" StrokeThickness="30" Name="blackPath">
<Path.Data>
<PathGeometry>
<PathFigureCollection>
<PathFigure StartPoint="50,67.5">
<PolyBezierSegment Points="100,67.5 100,50 150,50" />
</PathFigure>
</PathFigureCollection>
</PathGeometry>
</Path.Data>
</Path>
Problem solved
PolyBezierSegment pbs = new PolyBezierSegment(
new Point[] { new Point(100, 67.5),
new Point(100, 50),
new Point(150, 50) },
false); // <== Wrong
should be
PolyBezierSegment pbs = new PolyBezierSegment(
new Point[] { new Point(100, 67.5),
new Point(100, 50),
new Point(150, 50) },
true); // <== Set to true if the Stroke is defined separately, which is the case for me
I'm using the code below to draw LineGeometry objects. But somehow I'm getting blurry lines. Any idea why this is happening?
public Window1()
{
InitializeComponent();
var x = 0;
var y = 0;
var n = 0;
while (n<1000)
{
x = x + 20;
if (x > 1200)
{
x = 0;
y = y + 20;
}
var l = new LineGeometry
{
StartPoint = new Point(x, y),
EndPoint = new Point(x, y + 15)
};
MyGroup.Children.Add(l);
n++;
}
}
<Canvas x:Name="MyCanvas" Width="1200" Height="700">
<Path x:Name="MyPath" Stroke="Wheat" SnapsToDevicePixels="True">
<Path.Data>
<GeometryGroup x:Name="MyGroup" >
</GeometryGroup>
</Path.Data>
</Path>
</Canvas>
Here is the result I get:
Here is the solution I found for this:
XAML
<Window x:Class="LearnDrawing.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="700" Width="1200" Background="Black">
<Grid>
<Grid Width="1200" Height="700">
<Path x:Name="MyPath">
<Path.Data>
<GeometryGroup x:Name="MyGroup">
</GeometryGroup>
</Path.Data>
</Path>
</Grid>
</Grid>
</Window>
Code Behind
var x = 0;
var y = 0;
var n = 0;
while (n < 1000)
{
x = x + 20;
if (x > 600)
{
x = 0;
y = y + 20;
}
var myLineGeometry = new LineGeometry
{
StartPoint = new Point(x, y),
EndPoint = new Point(x, y + 15)
};
MyGroup.Children.Add(myLineGeometry);
n++;
}
MyPath.Stroke = Brushes.White;
MyPath.SetValue(RenderOptions.EdgeModeProperty, EdgeMode.Aliased);
MyPath.Data = MyGroup;
Result
I have written following code for generating lines on canvas
XAML
<Canvas HorizontalAlignment="Left"
x:Name="canvas1" Height="219"
Margin="10,10,0,0" Grid.Row="1"
VerticalAlignment="Top" Width="365"/>
C#
private void Draw()
{
canvas1.Children.Clear();
for (int i = 0; i < data.Length; i++)
{
data[i] = i;
lines[i] = new Line()
{
X1 = leftMargin,
Y1 = i * scale,
X2 = i * scale,
Y2 = i * scale,
StrokeThickness = 2,
Stroke = new SolidColorBrush(Colors.Black)
};
canvas1.Children.Add(lines[i]);
}
}
But I want to draw lines as below.How I can rotatle the canvas to achieve the desired output
x = 0 and y = 0 is upper left corner (not lower left) so y is like up side down
private void Draw()
{
Line[] lines = new Line[100];
int scale = 3;
canvas1.Children.Clear();
int yStart = 290;
for (int i = 0; i < lines.Length; i++)
{
//data[i] = i;
lines[i] = new Line()
{
X1 = i * scale,
Y1 = yStart,
X2 = i * scale,
Y2 = 300 - (i * scale),
StrokeThickness = 1,
Stroke = new SolidColorBrush(Colors.Black)
};
canvas1.Children.Add(lines[i]);
}
}
<Canvas.RenderTransform>
<RotateTransform CenterX="110" CenterY="183" Angle="270" />
</Canvas.RenderTransform>
or by code:
Canvas.RenderTransform = new RotateTransform(270, 109.5, 182.5);
Something like this?
If you want to rotate the canvas, you can simply apply a transform on it:
<Canvas.RenderTransform>
<RotateTransform CenterX="110" CenterY="183" Angle="270" />
</Canvas.RenderTransform>
If you want to do as John Willemse suggested change your code to this :
X1 = i * scale,
Y1 = bottomMargin,
X2 = i * scale,
Y2 = i * scale,