如何绘制三点角度的弧线？

我正在创建一个可以绘制角度的控件。 我有三个依赖对象。

• 半径：线的长度
• StartAngle：我应该从什么程度开始
• 角度

这是关于当前绘制的程序的截图（红线是我想要绘制的）。

所以我还没有完成的是电弧。 我需要一些帮助来绘制它。 这就是我所拥有的。

public class AngleControl2 : Control { static AngleControl2() { DefaultStyleKeyProperty.OverrideMetadata(typeof(AngleControl2), new FrameworkPropertyMetadata(typeof(AngleControl2))); } public double Angle { get { return (double)base.GetValue(AngleProperty); } set { base.SetValue(AngleProperty, value); } } public static readonly DependencyProperty AngleProperty = DependencyProperty.Register("Angle", typeof(double), typeof(AngleControl2), new PropertyMetadata(90.0, new PropertyChangedCallback(AngleChanged))); public double StartAngle { get { return (double)base.GetValue(StartAngleProperty); } set { base.SetValue(StartAngleProperty, value); } } public static readonly DependencyProperty StartAngleProperty = DependencyProperty.Register("StartAngle", typeof(double), typeof(AngleControl2), new PropertyMetadata(0.0, new PropertyChangedCallback(AngleChanged))); public double Radius { get { return (double)base.GetValue(RadiusProperty); } set { base.SetValue(RadiusProperty, value); } } public static readonly DependencyProperty RadiusProperty = DependencyProperty.Register("Radius", typeof(double), typeof(AngleControl2), new PropertyMetadata(100.0)); static void AngleChanged(DependencyObject property, DependencyPropertyChangedEventArgs args) { AngleControl2 c = (AngleControl2)property; Line line1 = c.GetTemplateChild("PART_Line1") as Line; Line line2 = c.GetTemplateChild("PART_Line2") as Line; if (line1 != null) { line1.X2 = Math.Cos((c.StartAngle + c.Angle) * (Math.PI / 180)) * c.Radius; line1.Y2 = Math.Sin((c.StartAngle + c.Angle) * (Math.PI / 180)) * c.Radius; } if (line2 != null) { line2.X2 = Math.Cos(c.StartAngle * (Math.PI / 180)) * c.Radius; line2.Y2 = Math.Sin(c.StartAngle * (Math.PI / 180)) * c.Radius; } } } 

Answer 1

使用Path而不是Line会更容易。 例如，如果您有以下部分模板

然后，您可以在AngleChanged事件中使用此代码：

 Path path = c.GetTemplateChild("PART_Path") as Path; if (path != null) { Point p = new Point( Math.Cos((this.StartAngle + this.Angle) * (Math.PI / 180)) * this.Radius, Math.Sin((this.StartAngle - this.Angle) * (Math.PI / 180)) * this.Radius); Point q = new Point( Math.Cos((this.StartAngle) * (Math.PI / 180)) * this.Radius, Math.Sin((this.StartAngle) * (Math.PI / 180)) * this.Radius); path.Data = new PathGeometry() { Figures = new PathFigureCollection() { new PathFigure() { StartPoint = new Point(0, 0), Segments = new PathSegmentCollection() { new LineSegment() { Point = p } } }, new PathFigure() { StartPoint = new Point(0, 0), Segments = new PathSegmentCollection() { new LineSegment() { Point = q } } }, new PathFigure() { StartPoint = new Point(pX/3, pY/3), Segments = new PathSegmentCollection() { new ArcSegment() { IsLargeArc = (Math.Abs(this.Angle) % 360) > 180, RotationAngle = Math.Abs(this.Angle) * (Math.PI / 180), SweepDirection = this.Angle < 0 ? SweepDirection.Counterclockwise : SweepDirection.Clockwise, Point = new Point(qX/ 3, qY/ 3), Size = new Size(this.Radius / 3, this.Radius/3) } } }, } }; } 

注意，在OnApplyTemplate（）中调用AngleChanged处理程序也是一个更好的主意，这样可视化将在启动时显示。

 protected override void OnApplyTemplate() { base.OnApplyTemplate(); AngleChanged(this, null); } 

Answer 2

有一个ArcSegment类可以做到这一点，阅读文档。