Question

我正在开展一个涉及弧线的倒计时项目。我现在几个小时都在努力学习，希望有人可以帮助我。我有一个150px的圆圈，我想绘制从顶部开始的弧线。圆（实际上是椭圆）是160,4

<Ellipse Height="150" HorizontalAlignment="Left" Margin="160,4,0,0"
   Name="minutesClock" Stroke="Gainsboro" StrokeThickness="20" 
   VerticalAlignment="Top" Width="150" />

我有一个方法可以计算从圆心的顶部到剩下的秒数的弧线

 private void drawArc(int timevalue, int maxvalue)
 { 
   Ellipse element = (Ellipse)LayoutRoot.FindName("minutesClock");
   double top = element.Margin.Top;
   double left = element.Margin.Left;
   double width = element.Width;
   double height = element.Height;
   double strokeWidth = element.StrokeThickness;

   double startX = left + (width / 2);
   double startY = top + (strokeWidth / 2);
   double radius = (width / 2) - (strokeWidth / 2);

   double percent = (double)timevalue / (double)maxvalue;
   Point center = new Point();
   center.X = top + (height / 2);
   center.Y = left + (width / 2);
   Point newEnd = calculatePoint(radius, percent, center);

   Path arc = (Path)LayoutRoot.FindName(what + "Arc");

   PathFigure path = new PathFigure();
   path.StartPoint = new Point(startX, startY);
   ArcSegment arcSegment = new ArcSegment();
   arcSegment.IsLargeArc = false;
   Size arcSize = new Size(radius,radius);
   arcSegment.Size = arcSize;
   arcSegment.SweepDirection = SweepDirection.Clockwise;

   arcSegment.Point = newEnd;
   arcSegment.RotationAngle = 45;

   path.Segments.Add(arcSegment);

   PathGeometry pg = new PathGeometry();
   pg.Figures = new PathFigureCollection();
   pg.Figures.Add(path);
   arc.Data = pg;
 }

弧线从正确的位置开始，但不会在正确的位置结束（终点遍布整个地方）。我的calculatePoint代码必须是错误的位置。我认为这与

有关

private Point calculatePoint(double radius, double percent, Point center)
{
  double degrees = 90 - (360 * percent);
  double radians = (Math.PI * degrees) / 180;
  Point endPoint = new Point();
  endPoint.X = center.X + (radius * Math.Sin(radians));
  endPoint.Y = center.Y + (radius * Math.Cos(radians));

  return endPoint;
}

我哪里错了？

Answer 1

您需要减去窦（从中心向上＆＃34;向上＆＃34;在UI画布上）：

endPoint.X = center.X - (radius * Math.Sin(radians));

原点0,0是左上角，而不是左下角。

[编辑] 哦，你混淆x和y：认为x是水平协调的，y是垂直的，所以这是错误的：

center.X = top + (height / 2);
center.Y = left + (width / 2);

这是错误的：

endPoint.X = center.X + (radius * Math.Sin(radians));
endPoint.Y = center.Y + (radius * Math.Cos(radians));

修正：

center.Y = top + (height / 2);
center.X = left + (width / 2);

和（我提到的减法修正）

endPoint.Y = center.Y - (radius * Math.Sin(radians));
endPoint.X = center.X + (radius * Math.Cos(radians));

在Silverlight中绘制弧

1 个答案: