Skia / SkiaSharp - 围绕自己的垂直轴旋转形状答案

【问题标题】：Skia / SkiaSharp - Rotating shapes around their own vertical axisSkia / SkiaSharp - 围绕自己的垂直轴旋转形状
【发布时间】：2021-06-18 12:32:08
【问题描述】：

我使用下面的 OnDraw 方法生成上面的场景：

  protected override void OnDraw(SKCanvas canvas, int width, int height)
    {
        int i = 0;
        int step = 0;
        List<SKRect> rects = new List<SKRect>();

        // get the 2D equivalent of the 3D matrix
        var rotationMatrix = rotationView.Matrix;

        // get the properties of the rectangle
        var length = Math.Min(width / 6, height / 6);

        canvas.Clear(EffectMedia.Colors.XamarinLightBlue);

        foreach (var n in numbers)
        {
            var rect = new SKRect(0 + step, 0, 100 + step, 100);
            rects.Add(rect);
            step += 120;
        }

        //var sideHoriz = rotationMatrix.MapPoint(new SKPoint(0, 1)).Y > 0;
        var sideVert = rotationMatrix.MapPoint(new SKPoint(1, 0)).X > 0;

        var paint = new SKPaint
        {
            Color = sideVert ? EffectMedia.Colors.XamarinPurple : EffectMedia.Colors.XamarinGreen,
            Style = SKPaintStyle.Fill,
            IsAntialias = true
        };

        // first do 2D translation to the center of the screen
        canvas.Translate((width - (120 * numbers.Count)) / 2, height / 2);

        // The following line is disabled because it makes the whole canvas rotate!
        // canvas.Concat(ref rotationMatrix);

        foreach (var n in numbers)
        {            
            canvas.RotateDegrees((float)-3);
            canvas.DrawRoundRect(rects[i], 30, 30, paint);

            var shadow = SKShader.CreateLinearGradient(
                    new SKPoint(0, 0), new SKPoint(0, length * 2),
                    new[] { paint.Color.WithAlpha(127), paint.Color.WithAlpha(0) },
                    null,
                    SKShaderTileMode.Clamp);

            var paintShadow = new SKPaint
            {
                Shader = shadow,
                Style = SKPaintStyle.Fill,
                IsAntialias = true,
                BlendMode = SKBlendMode.SoftLight
            };

            foreach (var r in rects)
            {
                r.Offset(0, 105);
                canvas.DrawRoundRect(r, 30, 30, paintShadow);
            }

            i++;
        }
    }

这个想法是让所有这些圆形框围绕它们自己的轴（垂直）旋转。

我尝试使用 SKPath + Transform，保存和恢复旋转矩阵和/或画布，但我找不到拥有 6 个旋转框的方法（ canvas.Concat(ref rotationMatrix); 使整个画布旋转 [*]）。

您对如何实现这一点有任何提示吗？

注意 [*]：每 X 毫秒调用一次 rotationView.RotateYDegrees(5) 以更新 OnDraw 使用的旋转矩阵。

【问题讨论】：

标签： animation rotation skiasharp skia

【解决方案1】：

这是我想要实现的，任何提示/方向将不胜感激...... :-)

以下代码使这些形状围绕其 Z 轴旋转：

canvas.Save();
canvas.RotateDegrees(degrees, rects[i].MidX, rects[i].MidY);
canvas.DrawRoundRect(rects[i], 30, 30, paint);
canvas.Restore();

谢谢

【讨论】：