在Silverlight中繪製弧線

我正在進行涉及弧線的倒計時項目。我現在一直在努力學習數學，希望有人能幫助我。我有一個150px的圓圈，我想繪製從頂部開始運行的弧線。圓（橢圓真的）是160,4在Silverlight中繪製弧線

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

我在哪裏出錯了？

來源

2014-05-15 Robbert

對不起，我很難理解你想如何繪製圓弧：「[...]從圓的中心頂部到任何剩餘秒數」。那麼我想象一個時鐘，你想在邊緣畫一個弧，起點在12點。你的意思是一個完整的圓圈是60秒（這意味着「剩餘秒數」的最大數量是60）？弧線必須順時針繪製？ – Martin

你需要減去竇（從中心走「向上」的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));

來源

2014-05-15 11:15:00 Martin

謝謝，謝謝，謝謝。解決了5個小時的工作。 – Robbert

@Robbert：不客氣。 – Martin

在Silverlight中繪製弧線

回答

相關問題