c# - SkiaSharp 在 Canvas 中心设置新的旋转点并围绕该点旋转

Question

我从未在编程中使用过 SkiaSharp 或处理过 SVG 和旋转点。我对矩阵的工作原理感到困惑；研究时看起来很复杂。我知道我可以将我的 pivotX/Y 点移动到中心，这样我就可以说我想将图像旋转 180 度，所有像素都是 1:1。

注意:我没有创建任何这些 SVG，它们是由公司内部的某个人制作的。

我正在使用 Xamarin 社区工具包来获取自定义弹出窗口。我绘制的 SVG 总是颠倒绘制的。所以我想将它旋转 180 度，但我不确定如何将 pivotX/Y 设置在 StarPath 或 Canvas center 的中心。

这个问题的全部要点让我可以学习如何在 SkiaSharp 中操作 Matrix 并能够通过指定 degrees width/2 来创建旋转我的路径的方法高度/2

Xamarin 代码

<?xml version="1.0" encoding="utf-8" ?>
<xct:Popup xmlns="http://xamarin.com/schemas/2014/forms"
           xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
           x:Class="uCue_Game.View.LostLifePopUp"
           xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
           xmlns:sksh="clr-namespace:SkiaSharp.Views.Forms;assembly=SkiaSharp.Views.Forms"
           Size="400, 400"
           Color="Transparent">

    <StackLayout BackgroundColor="Black"
          Opacity="1">

        <sksh:SKCanvasView x:Name="canvasView"
                           PaintSurface="canvasView_PaintSurface"
                           HorizontalOptions="FillAndExpand"
                           VerticalOptions="FillAndExpand" 
                           HeightRequest="300"
                           Opacity="1"/>
        <Label Text="Wrong Answer" 
               HorizontalOptions="FillAndExpand"
               VerticalOptions="FillAndExpand"
               FontSize="15"
               TextColor="White"
               HorizontalTextAlignment="Center"
               VerticalTextAlignment="Center"
               Opacity="1"/>
    </StackLayout>
</xct:Popup>

C#代码

public partial class LostLifePopUp : Popup
{
    SKPath StarPath = SKPath.ParseSvgPathData("M492" +
    " 348 c16 -18 47 -67 69 -110 38 -76 40 -78 77 -78 55 -1 156 -24 186 -43 42" +
    " -28 34 -61 -27 -120 -29 -29 -70 -63 -90 -77 -24 -16 -35 -30 -31 -40 18 -48" +
    " 44 -170 44 -211 0 -44 -3 -49 -25 -55 -31 -8 -144 27 -209 64 l-47 27 -97 -47" +
    " c-102 -50 -157 -65 -181 -49 -20 13 -16 97 9 195 l20 79 -58 61 c-69 73 -102" +
    " 118 -102 141 0 22 66 50 177 75 l90 21 22 53 c12 29 35 74 51 100 38 59 76 63" +
    " 122 14z");

    SKPath StarFill = SKPath.ParseSvgPathData("M487" +
    " 363 c21 -24 58 -71 83 -105 32 -46 51 -64 74 -69 65 -14 201 -56 213 -65 28" +
    " -23 2 -34 -85 -35 -109 -1 -229 -31 -336 -85 -136 -69 -223 -82 -298 -43 -32" +
    " 17 -98 73 -98 84 0 4 10 18 23 32 12 14 32 37 44 51 12 15 35 29 50 33 15 4" +
    " 49 15 75 26 38 16 51 29 76 76 50 94 89 142 116 142 15 0 38 -16 63 -42z");

    SKPath StarShine = SKPath.ParseSvgPathData(
        "M0 1215 m0 -1215 m1260 0 m1260 0 m0 1215 m0 1215 m-1260 0 m-1260 0 m0" +
        " -1215z m1395 838 c35 -35 95 -164 95 -204 0 -55 -64 -92" +
        " -117 -69 -56 25 -68 54 -68 166 0 105 10 134 45 134 9 0 30 -12 45 -27z");

    SKPaint StrokeRed = new SKPaint
    {
        Style = SKPaintStyle.StrokeAndFill,
        Color = SKColors.Red,
        StrokeWidth = 5,
        StrokeCap = SKStrokeCap.Round,
        StrokeJoin = SKStrokeJoin.Round
    };

    SKPaint FillYellow = new SKPaint
    {
        Style = SKPaintStyle.Fill,
        Color = SKColors.Yellow,
        StrokeWidth = 5,
        StrokeCap = SKStrokeCap.Round,
        StrokeJoin = SKStrokeJoin.Round
    };

    SKPaint GoldShine = new SKPaint
    {
        Style = SKPaintStyle.Stroke,
        Color = SKColors.Green,
        StrokeWidth = 40,
        StrokeCap = SKStrokeCap.Round,
        StrokeJoin = SKStrokeJoin.Round
    };

    public LostLifePopUp()
    {
        InitializeComponent();

    }

    private void canvasView_PaintSurface(object sender, SKPaintSurfaceEventArgs e)
    {
        SKRect bounds;
        StarPath.GetBounds(out bounds);

        var surface = e.Surface;
        var surfaceWidth = e.RawInfo.Width;
        var surfaceHeight = e.RawInfo.Height;

        var canvas = surface.Canvas;

        canvas.Flush();
        canvas.Clear();

        var rot = SKMatrix.CreateRotationDegrees(37, surfaceWidth / 2 - 50, surfaceHeight / 2);
        canvas.SetMatrix(rot);

        canvas.Translate(surfaceWidth / 2, surfaceHeight / 2);
        canvas.Scale(0.9f * Math.Min(surfaceWidth / bounds.Width,
                                    surfaceHeight / bounds.Height));
        canvas.Translate(-bounds.MidX, -bounds.MidY);

        canvas.DrawPath(StarShine, GoldShine);
        canvas.DrawPath(StarPath, StrokeRed);
        canvas.DrawPath(StarFill, FillYellow);
    }
}

当前更新的代码 - 我的时间不多了，所以我现在不能再玩这个 SkiaSharp 了。我将开发这个游戏的第二个版本，这是一个更复杂的版本，所以我会在开始时尽快回到这个。我真的不满意 SKMatrix.PostConcat 使方法 过时 并且无法从任何地方访问。当有人失去等级时，我的明星有 2 个状态，我不得不采取非常错误的方法来实现它，但它是稍后修复的东西。此外，如果 Canvas 大小发生变化，整个绘图都会变得糟糕，其他地方都一样。

private void canvasView_PaintSurface(object sender, SKPaintSurfaceEventArgs e)
{
    SKRect bounds;
    StarPath.GetBounds(out bounds);

    var surface = e.Surface;
    var surfaceWidth = e.RawInfo.Width;
    var surfaceHeight = e.RawInfo.Height;

    var canvas = surface.Canvas;

    var result = SKMatrix.CreateIdentity();
    var translate = SKMatrix.CreateTranslation(-surfaceWidth / 2, -surfaceHeight / 2);
    var rotate = SKMatrix.CreateRotationDegrees(180);
    var translate2 = SKMatrix.CreateTranslation(surfaceWidth * 2, surfaceHeight);
    SKMatrix.PostConcat(ref result, translate);
    SKMatrix.PostConcat(ref result, rotate);
    SKMatrix.PostConcat(ref result, translate2);
    StarPath.Transform(result);
    StarFill.Transform(result);

    canvas.Scale(0.8f * Math.Min(surfaceWidth / bounds.Width, surfaceHeight / bounds.Height));

    canvas.DrawPath(StarPath, WhiteOutline);
    canvas.DrawPath(StarPath, Yellow);
    canvas.DrawPath(StarFill, Shine);

    if (DrawMain == true)
    {
        canvas.Scale(0.7f * Math.Min(surfaceWidth / bounds.Width, surfaceHeight / bounds.Height));
        translate2 = SKMatrix.CreateTranslation(surfaceWidth * 2.5f, surfaceHeight * 2);
        SKMatrix.PostConcat(ref result, translate2);
        StarShine.Transform(result);
        canvas.DrawPath(StarShine, White);
    }
            
    if (DrawSecond == true)
    {
        canvas.DrawPath(StarPath, WhiteOutline);
    }
}

这是目前的样子。我看不到闪耀，填充实际上也没有填满整个星星……右图是它应该看起来的样子。

Answer 1

============更新答案======

在我看来，您可以更改 StarPath 以在中心绘制星星。

我在 300 X 300 canvasview 上制作这个

    SKPath StarPath = SKPath.ParseSvgPathData("m 492" +
    " 805.6 c 16 -18 47 -67 69 -110 c 38 -76 40 -78 77 -78 c 55 -1 156 -24 186 -43" +
    " c 42 -28 34 -61 -27 -120 c -29 -29 -70 -63 -90 -77 c -24 -16 -35 -30 -31 -40" +
    "  c 18 -48 44 -170 44 -211 c 0 -44 -3 -49 -25 -55 c -31 -8 -144 27 -209 64" +
    "  l -47 27 l -97 -47 c -102 -50 -157 -65 -181 -49 c -20 13 -16 97 9 195 l 20 79" +
    "  l -58 61 c -69 73 -102 118 -102 141 c 0 22 66 50 177 75 l 90 21 l 22 53 c 12 29" +
    "  35 74 51 100 c 38 59 76 63 122 14 z");

它在中心绘制星星。我使用具有@3x 比例因子的高分辨率的iphone13 模拟器。

============原始答案

感谢@ThisQRequiresASpecialist 的评论。我发现变换的顺序非常重要。如果旋转 Canvas ，坐标系也会旋转。也就是说如果你旋转90度，x轴变成y轴，y轴变成x轴，给后面的平移带来麻烦。所以先平移再旋转可能会更好。

在您的情况下，要旋转 180 度并平移到中心，只需尝试以下代码:

void canvasView_PaintSurface(System.Object sender, SkiaSharp.Views.Forms.SKPaintSurfaceEventArgs e)
{   
    SKImageInfo info = e.Info;
    SKRect bounds;           
    var surface = e.Surface;           
    var surfaceWidth = info.Width;
    var surfaceHeight = info.Height;     
    StarPath.GetTightBounds(out bounds);
    
    canvas.Translate(surfaceWidth/2 - bounds.MidX,  (surfaceHeight / 2 - bounds.MidY)); // Translate to the center
    canvas.RotateDegrees(180, bounds.MidX, bounds.MidY); // rotate 180        

...

=======在这里更新=======

@ThisQRequiresASpecialist 的评论也展示了一种使用 Matrix 的新方法。我还制作了一个演示，它运行良好。

var result = SKMatrix.CreateIdentity();
var rotate = SKMatrix.CreateRotationDegrees(180, bounds.MidX, bounds.MidY);
var translate = SKMatrix.CreateTranslation(surfaceWidth / 2 - bounds.MidX, -(surfaceHeight / 2 - bounds.MidY));
SKMatrix.PostConcat(ref result, translate);
SKMatrix.PostConcat(ref result, rotate);           
StarPath.Transform(result);
canvas.DrawPath(StarPath, StrokeRed);

更多信息可以引用The Rotate Transform

希望我的回答能帮到你。