Set the time using the arrows on the analog clock

ivsaltiivsalti Member ✭✭

Is there a way to move the hands in an analog clock and get an hour or minute value from their position. There is time picker with clock similar to this, but timepicker uses one hand and opens dialog window.

I use SkiaSharp to draw a clock

<skia:SKCanvasView x:Name="canvasView" BackgroundColor="Transparent" PaintSurface="canvasView_PaintSurface" AbsoluteLayout.LayoutBounds="0, 0, 250, 250" />

SKPaint transparentFillPaint = new SKPaint
    {
        Style = SKPaintStyle.Fill,
        Color = SKColors.Transparent
    };

    SKPaint whiteStrokePaint = new SKPaint
    {
        Style = SKPaintStyle.Stroke,
        Color = SKColors.White,
        StrokeWidth = 2,
        StrokeCap = SKStrokeCap.Round,
        IsAntialias = true
    };

    SKPaint blueFillPaint = new SKPaint
    {
        Style = SKPaintStyle.Fill,
        Color = new SKColor(187, 245, 247),
    };

    SKPaint backgroundFillPaint = new SKPaint
    {
        Style = SKPaintStyle.Fill,
        Color = SKColors.Transparent
    };

    SKPath hourHandPath = SKPath.ParseSvgPathData(
        "M 0 -60 C 0 -55 0 -50 2.5 0 C 2.5 5 -2.5 5 -2.5 0 C 0 -50 0 -55 0 -60");
    SKPath minuteHandPath = SKPath.ParseSvgPathData(
        "M 0 -80 C 0 -75 0 -70 2.5 0 C 2.5 5 -2.5 5 -2.5 0 C 0 -70 0 -75 0 -80");

    public AnalogClockView()
    {
        InitializeComponent();

        SetupCanvas();
    }

    protected void SetupCanvas()
    {
        Device.StartTimer(TimeSpan.FromSeconds(1f / 60), () =>
        {
            canvasView.InvalidateSurface();
            return true;
        });
    }

    private void canvasView_PaintSurface(object sender, SKPaintSurfaceEventArgs e)
    {
        SKSurface surface = e.Surface;
        SKCanvas canvas = surface.Canvas;

        canvas.Clear();

        canvas.DrawPaint(backgroundFillPaint);

        int width = e.Info.Width;
        int height = e.Info.Height;

        // Set transforms
        canvas.Translate(width / 2, height / 2);
        canvas.Scale(Math.Min(width / 210f, height / 210f));

        // Get DateTime
        DateTime dateTime = DateTime.Now;

        // Clock background
        canvas.DrawCircle(0, 0, 100, transparentFillPaint);

        // Hour and minute marks
        for (int angle = 0; angle < 360; angle += 6)
        {
            if (angle % 30 == 0)
            {
                var rect = new SKRect(0, -90, 6, -75);
                var r = new SKSize(6, 4);
                canvas.DrawRoundRect(rect, r, blueFillPaint);
            }

            canvas.RotateDegrees(6);
        }

        // Hour hand
        canvas.Save();
        canvas.RotateDegrees(30 * dateTime.Hour + dateTime.Minute / 2f);
        canvas.DrawPath(hourHandPath, blueFillPaint);
        canvas.Restore();

        // Minute hand
        canvas.Save();
        canvas.RotateDegrees(6 * dateTime.Minute + dateTime.Second / 10f);
        canvas.DrawPath(minuteHandPath, blueFillPaint);
        canvas.Restore();

        // Second hand
        canvas.Save();
        float seconds = dateTime.Second + dateTime.Millisecond / 1000f;
        canvas.RotateDegrees(6 * seconds);
        whiteStrokePaint.StrokeWidth = 2;
        canvas.DrawLine(0, 10, 0, -80, blueFillPaint);
        canvas.Restore();
    }`

The main questions is how to move hand with touch and how to get value from this.
Maybe there is better way to draw clock so I can implement all this?

Tagged:
Sign In or Register to comment.