如何用F# WinForms实现带数字时间的模拟时钟？修复坐标与动效问题

Let's break down and fix both of your clock problems step by step:

Issue 1: Only 1/4 of the Clock Shows Up in the Top-Right #

The root cause here is two-fold:

• You calculated translated coordinates for your clock hands, but never used them to draw the hands. Instead, you drew the original (0,0)-based hands which sit at the form's top-left corner.
• Your ellipse (clock face) is drawn with negative coordinates (-100.0f,-100.0f), which places most of it outside the form's visible area (since the default origin is the top-left corner). Also, your translation point was set to (200,200) instead of the actual center of your 500x500 form (which is 250,250).

Issue 2: Incorrect Hand Configuration + No Animated Updates #

• Your hand lengths are reversed: the hour hand should be shorter than the minute hand, but you have the hour hand longer (45 units vs 20 units for minutes).
• You rotated the hands correctly, but didn't use the rotated versions when translating them to the center.
• The timer only updates the digital label, but never tells the form to redraw the analog clock—so the hands never move.

Fixed Complete Code #

Here's the corrected version with all issues addressed:

open System.Windows.Forms
open System.Drawing
open System

let win = new Form()
win.ClientSize <- Size(500, 500)
win.Text <- "Analog Clock"

// Digital time label setup (your original code works fine here)
let digitalTimerLabel = new Label()
win.Controls.Add digitalTimerLabel
digitalTimerLabel.Width <- 200
digitalTimerLabel.Location <- new Point(140, 300)
digitalTimerLabel.Text <- string System.DateTime.Now

// Timer setup with added redraw trigger
let timer = new Timer()
timer.Interval <- 1000
timer.Enabled <- true
timer.Tick.Add (fun e -> 
    digitalTimerLabel.Text <- string System.DateTime.Now
    win.Invalidate() // Tell the form to redraw the analog clock every second
)

// Translate function (unchanged, works correctly)
let translate (d : Point) (arr : Point []) : Point [] =
    let add (d : Point) (p : Point) : Point = Point (d.X + p.X, d.Y + p.Y)
    Array.map (add d) arr

// Rotate function (unchanged, works correctly)
let rotate (theta : float) (arr : Point []) : Point [] =
    let toInt = int << round
    let rot (t : float) (p : Point) : Point =
        let (x, y) = (float p.X, float p.Y)
        let (a, b) = (x * cos t - y * sin t, x * sin t + y * cos t)
        Point (toInt a, toInt b)
    Array.map (rot theta) arr

// Updated Paint event handler
let myPaint (e : PaintEventArgs) : unit =
    // Define hand lengths correctly: hour < minute < second
    let hourHand = [|Point(0,0); Point(0,-70)|]    // Shorter hour hand
    let minuteHand = [|Point(0,0); Point(0,-90)|]  // Longer minute hand
    let secondHand = [|Point(0,0); Point(0,-95)|]  // Longest second hand

    // Get current time
    let dt = DateTime.Now
    let s = dt.Second
    let m = dt.Minute + s/60 // Add seconds to minute for smooth minute hand movement
    let h = dt.Hour % 12 + m/60 // Add minutes to hour for smooth hour hand movement

    // Calculate rotated hands (use float division for precise angles)
    let thetaS = float s / 60.0 * 2.0 * Math.PI
    let thetaM = float m / 60.0 * 2.0 * Math.PI
    let thetaH = float h / 12.0 * 2.0 * Math.PI

    let rotatedS = rotate thetaS secondHand
    let rotatedM = rotate thetaM minuteHand
    let rotatedH = rotate thetaH hourHand

    // Translate all elements to the form's center (250,250)
    let formCenter = Point(250,250)
    let finalS = translate formCenter rotatedS
    let finalM = translate formCenter rotatedM
    let finalH = translate formCenter rotatedH

    // Draw clock face (adjusted to center using translation logic)
    let circlePen = new Pen(Color.Black, Width=4.0f)
    let circleRect = Rectangle(formCenter.X - 100, formCenter.Y - 100, 200, 200)
    e.Graphics.DrawEllipse(circlePen, circleRect)

    // Draw hands with correct pens and translated coordinates
    let hourPen = new Pen(Color.Black, Width=4.0f)
    e.Graphics.DrawLines(hourPen, finalH)

    let minutePen = new Pen(Color.DarkRed, Width=2.0f)
    e.Graphics.DrawLines(minutePen, finalM)

    let secondPen = new Pen(Color.Green, Width=1.0f)
    e.Graphics.DrawLines(secondPen, finalS)

    // Draw center dot
    let centerBrush = new SolidBrush(Color.Red)
    let centerRect = Rectangle(formCenter.X - 3, formCenter.Y - 3, 6, 6)
    e.Graphics.FillEllipse(centerBrush, centerRect)

win.Paint.Add myPaint
Application.Run win

Key Changes Made: #

• Added win.Invalidate() to the timer's Tick event to trigger clock redraws every second.
• Fixed hand lengths to be logically proportional (hour < minute < second).
• Used the rotated hand arrays when translating to the form center.
• Corrected the form center coordinate to (250,250) for your 500x500 window.
• Adjusted the clock face and center dot to be drawn relative to the form center for proper visibility.
• Added smooth movement for hour and minute hands by including seconds/minutes in their angle calculations (optional but improves visual quality).

内容的提问来源于stack exchange，提问作者Saager