Xamarin表单中带有圆形Skiasharp矩形的倒计时动画

时间:2018-11-07 18:39:22

标签: c# xamarin xamarin.forms skiasharp

我已经成功地使用skiasharp创建了一个倒数计时。但是我唯一的问题是我无法获得想要倒数计时的正确形状。

我可以很容易地使一个圆圈倒数,但是使用矩形似乎更复杂。当我想进行倒数计时时,AddArch似乎工作得很好。如果将它与我的skiasharp对象及其大小一起使用,它会弯曲得像一个圆。所以我需要做其他事情。

我创建的路径path.AddRoundRect(new SKRect(1, 1, info.Width - 5, info.Height - 5), 30, 30, SKPathDirection.CounterClockwise);是正确的,并且大小确定,但是这里的问题是它没有像AddArch那样创建新轮廓。因此,不是切断旧的“角度”,换句话说,它只是旋转而没有删除边框的一部分。

我将如何解决此问题?也许翻译SKCanvas可能是答案,但是我会知道如何从数学上计算出从弧形到完整圆角矩形的平移。

我有一个计时器,在带有更新的progressAngle的一侧单击,该计时器保持每秒绘制一次更新的形状。 StartAngle是360。

这是我的代码:

    SKImageInfo _info;
    SKSurface _surface;
    SKCanvas _canvas;
    SKPaint _paint;

    protected override void OnPaintSurface(SKPaintSurfaceEventArgs args)
    {
        _info = args.Info;
        _surface = args.Surface;
        _canvas = _surface.Canvas;

        int size = Math.Min(_info.Width, _info.Height);
        int max = Math.Max(_info.Width, _info.Height);

        _canvas.Clear();
        _canvas.Save();

        DrawProgressBorder(_info, _canvas);
    }

 void DrawProgressBorder(SKImageInfo info, SKCanvas canvas)
    {
        int size = Math.Min(info.Width, info.Height);

        var shader = SKShader.CreateSweepGradient(
            new SKPoint(size / 2, size / 2),
            new[]
            {
                ProgressStartColor.ToSKColor(),
                ProgressEndColor.ToSKColor(),
                ProgressStartColor.ToSKColor()
            },
            new[]
            {
                StartAngle / 360,
                (StartAngle + progressAngle + 1) / 360,
                (StartAngle + progressAngle + 2) / 360
        });


        SKPaint paint = new SKPaint
        {
            IsStroke = true,
            StrokeCap = SKStrokeCap.Round,
            Shader = shader,
            Style = SKPaintStyle.Stroke,
            StrokeWidth = 15,
            IsAntialias = true
        };

        DrawBorder(_info, _canvas, paint, progressAngle);
    }


public void DrawBorder(SKImageInfo info, SKCanvas canvas, SKPaint paint, float angle)
    {
        int size = Math.Min(info.Width, info.Height);

        using (SKPath path = new SKPath())
        {
            path.AddRoundRect(new SKRect(1, 1, info.Width - 5, info.Height - 5), 30, 30, SKPathDirection.CounterClockwise);
            //path.AddArc(new SKRect(1, 1, info.Width - 5, info.Height - 5), StartAngle, angle);

            if (path != null && paint != null)
            {
                canvas.DrawPath(path, paint);
            }
        }
    }

0 个答案:

没有答案