Skip to content

How to specify a certain point of the equation bounding box as a reference point? #27

@sadqiang

Description

@sadqiang

I am making a crazy analog clock as follows.

clock

The problem is that I have not control to specify a certain point on the equation bounding box as a reference point at which I position the equation with DrawOneLine method.

Here is my code:

using SkiaSharp;
using SkiaSharp.Views.Forms;
using CSharpMath.SkiaSharp;

using System;
using Xamarin.Forms;
using static System.Math;

namespace Clock
{
    public partial class MainPage : ContentPage
    {
        readonly SKPaint blackFillPaint = new SKPaint
        {
            Style = SKPaintStyle.Fill,
            Color = SKColors.Black
        };

        readonly SKPaint whiteFillPaint = new SKPaint
        {
            Style = SKPaintStyle.Fill,
            Color = SKColors.White
        };

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

        readonly SKPaint redStrokePaint = new SKPaint
        {
            Style = SKPaintStyle.Stroke,
            Color = SKColors.Red,
            StrokeCap = SKStrokeCap.Round,
            IsAntialias = true
        };

        readonly string[] labels =
            {
                @"$\frac{44+4}{4}$",
                @"$\frac{44}{44}$",
                @"$\frac{4}{4}+\frac{4}{4}$",
                @"$\frac{4+4+4}{4}$",
                @"$4+\frac{4-4}{4}$",
                @"$4+4^{4-4}$",
                @"$4+\frac{4+4}{4}$",
                @"$\frac{44}{4}-4$",
                @"$4\times4-4-4$",
                @"$4+4+\frac{4}{4}$",
                @"$\frac{44-4}{4}$",
                @"$\frac{4!}{\sqrt4}-\frac{4}{4}$"
            };

        public MainPage()
        {
            InitializeComponent();
            Device.StartTimer(TimeSpan.FromSeconds(1), () =>
               {
                   canvasView.InvalidateSurface();
                   return true;
               });
        }

        private void CanvasView_PaintSurface(object sender, SKPaintSurfaceEventArgs e)
        {
            SKCanvas canvas = e.Surface.Canvas;
            canvas.Clear(SKColors.CornflowerBlue);

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

            canvas.Translate(width / 2, height / 2);
            canvas.Scale(width / 210f);


            canvas.DrawCircle(0, 0, 100, blackFillPaint);


            var painter = new TextPainter
            {
                FontSize = 8,
                TextColor = SKColors.White
            };

            for (int i = 0; i < 60; i++)
            {
                canvas.Save();
                canvas.RotateDegrees(6 * i);
                canvas.DrawCircle(0, -90, i % 5 == 0 ? 4 : 2, whiteFillPaint);
                canvas.Restore();

                if (i % 5 == 0)
                {
                    painter.Text = labels[i / 5];
                    painter.DrawOneLine(canvas, (float)(80 * Cos((90 - 6 * i) / 180f * PI)), (float)(-80 * Sin((90 - 6 * i) / 180f * PI)));
                }
            }


            DateTime dateTime = DateTime.Now;

            // H
            canvas.Save();
            canvas.RotateDegrees(30 * dateTime.Hour + dateTime.Minute / 2f);
            whiteStrokePaint.StrokeWidth = 12;
            canvas.DrawLine(0, 0, 0, -50, whiteStrokePaint);
            canvas.Restore();

            // M
            canvas.Save();
            canvas.RotateDegrees(6 * dateTime.Minute + dateTime.Second / 10f);
            whiteStrokePaint.StrokeWidth = 6;
            canvas.DrawLine(0, 0, 0, -65, whiteStrokePaint);
            canvas.Restore();


            // S
            canvas.Save();
            float seconds = dateTime.Second;// + dateTime.Millisecond / 1000f;
            canvas.RotateDegrees(6f * seconds);
            redStrokePaint.StrokeWidth = 2;
            canvas.DrawLine(0, 0, 0, -75, redStrokePaint);
            canvas.Restore();


        }
    }
}
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:Clock"
             xmlns:skia="clr-namespace:SkiaSharp.Views.Forms;assembly=SkiaSharp.Views.Forms"
             x:Class="Clock.MainPage">

    <skia:SKCanvasView x:Name="canvasView" PaintSurface="CanvasView_PaintSurface"/>

</ContentPage>

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions