Skia - Rotating N shapes around their own vertical axes

[Saldatoccio]

Hi!

I am learning Skia / SkiaSharp and I draw N rounded rectangles with shadows:

Now I would like to make them rotate around their own axis, but I have no idea about how to do that.

I have an OnDraw method that draws the canvas and rotationView is updated every N milliseconds, but invoking canvas.Concat(ref rotationMatrix) rotates the whole canvas.

From a Skia-perspective, how can I have N shapes rotating around their own axes (see the screemshot above)? I'd need some directions about the approach that should be followed.

Thanks!

Saldatoccio

 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++;

         }

     }

[Jim Van Verth]

If I understand correctly, one way to do this takes three steps:

1) Translate the point on the shape you want to rotate around to the origin

2) Rotate

3) Translate back

--
You received this message because you are subscribed to the Google Groups "skia-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to skia-discuss...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/skia-discuss/f55dd7bb-e68c-4b7a-b713-90619e1b478an%40googlegroups.com.

--

Jim Van Verth | Software Engineer | jvan...@google.com | 919-210-7664

[Ben Wagner]

Something like

canvas->save();
canvas->rotate(degrees, px, py);
canvas->restore();

On Mon, Mar 22, 2021 at 4:06 PM 'Jim Van Verth' via skia-discuss
<skia-d...@googlegroups.com> wrote:
>
> If I understand correctly, one way to do this takes three steps:
> 1) Translate the point on the shape you want to rotate around to the origin
> 2) Rotate
> 3) Translate back
>
> On Mon, Mar 22, 2021 at 10:34 AM Saldatoccio <salvator...@gmail.com> wrote:
>>
>> Hi!
>>
>> I am learning Skia / SkiaSharp and I draw N rounded rectangles with shadows:
>>
>>

> To view this discussion on the web visit https://groups.google.com/d/msgid/skia-discuss/CAM5o3G0ioRWZjaidySUwp%3DTAjvxVCzg0bx3z03ETNaVtjWbgTA%40mail.gmail.com.

[Salvatore Meschini]

Thank you!

my first attempt actually was: 

canvas.Save();
canvas.RotateDegrees((float)-3, rects[i].MidX, rects[i].MidY);

canvas.DrawRoundRect(rects[i], 30, 30, paint);

canvas.Restore();

but thanks to your advice I realized my (stupid) mistake!

Now I replaced canvas.RotateDegrees((float)-3, rects[i].MidX, rects[i].MidY);

with canvas.RotateDegrees(degrees, rects[i].MidX, rects[i].MidY);

And the shapes are rotating, now I have to figure out how to make them rotate around their vertical own axis (now they're rotating around their "Z-axis").

Thank you both!

You received this message because you are subscribed to a topic in the Google Groups "skia-discuss" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/skia-discuss/3UPuOVL75wA/unsubscribe.
To unsubscribe from this group and all its topics, send an email to skia-discuss...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/skia-discuss/CAE1kqqQtUkrKEOwtigtTpn5uLX5nwf-4mxWgmtVEObE5%2BJUouA%40mail.gmail.com.