在Silverlight中绘制弧线

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

你需要减去窦（从中心走“向上”的UI画布上）：

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

产地0,0是左上角，而不是左下角。

[编辑] 哦，你是confusding 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));