SKPath Rotation SkiaSharp

seanydaseanyda GBMember ✭✭✭✭✭

Hi,

@mattleibow if you could give me a pointer in the right direction on this one that would be awesome :)

I'm trying to build a Snapchat version of image annotations, which handles image rotation nicely. Everything works perfectly in portrait and you can annotate with your phone in landscape or portrait.

Here is a cut down version of my OnCanvasViewPaintSurface method.

void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
        {
            try
            {
                SKCanvas canvas = args.Surface.Canvas;
                SKCanvasView senderCanvas = (SKCanvasView)sender;  
                if (!hasDrawnCanvas || senderCanvas.ClassId == "UndoPressed")
                {
                    if (savedBitmap != null)
                    {
                        canvas.Clear();
                        canvas.DrawBitmap(savedBitmap, 0, 0);
                    }
                    else
                    {
                        savedBitmap = SKBitmap.Decode(DependencyService.Get<IMediaService>().ResizeImage(mediaFile, rotate90 ? canvasView.CanvasSize.Height : canvasView.CanvasSize.Width, rotate90 ? canvasView.CanvasSize.Width : canvasView.CanvasSize.Height));
                        canvas.DrawBitmap(savedBitmap, 0, 0);
                    }
                    canvasView.ClassId = null;
                    hasDrawnCanvas = true;
                }

                foreach (PaintPolyline polyline in completedPolylines)
                {
                    paint.Color = polyline.StrokeColor.ToSKColor();
                    paint.StrokeWidth = polyline.StrokeWidth;
                    canvas.DrawPath(polyline.Path, paint);
                }

                foreach (PaintPolyline polyline in inProgressPolylines.Values)
                {
                    paint.Color = polyline.StrokeColor.ToSKColor();
                    paint.StrokeWidth = polyline.StrokeWidth;
                    canvas.DrawPath(polyline.Path, paint);
                }
            }
            catch(Exception ex) {
                Crashes.TrackError(ex);
            }
        }

This all works great, but when I come to Save the bitmap if rotate90 is true the annotations are still working against the phone being portrait. I need to find a way to manipulate the SKPath of the completedPolylines to allow them to use the whole width of the screen instead of being cut off at 375 of the width of the phone for example (on an iPhone 7 or something).

Here is a example of my save method:

DependencyService.Get<ISettingsManager>().HideHardwareButtons(false);
                SKImageInfo info = new SKImageInfo(rotate90 ? (int)canvasView.CanvasSize.Height : (int)canvasView.CanvasSize.Width, rotate90 ? (int)canvasView.CanvasSize.Width : (int)canvasView.CanvasSize.Height, SKImageInfo.PlatformColorType, SKAlphaType.Premul);
                var newSurface = SKSurface.Create(info);
                var canvas = newSurface.Canvas;
                Navigation.PopModalAsync();
                await Navigation.PopAllPopupAsync();

                canvas.DrawBitmap(savedBitmap, 0, 0);

                foreach (var path in completedPolylines) canvas.DrawPath(path.Path, paint);

                foreach (var path in inProgressPolylines.Values) canvas.DrawPath(path.Path, paint);

                canvas.Flush();

                var snap = newSurface.Snapshot();
                var jpgImage = snap.Encode(SKEncodedImageFormat.Jpeg, 80);
                // SEND IMAGE

                // DISPOSE OF BITS

Kind Regards,
Sean

Answers

  • seanydaseanyda GBMember ✭✭✭✭✭

    Just to add to this, I know the issue is the Frame which is being used in the UIView is 375 Width/776 Height so the annotations will only allow for 375 but I'm forcing the app portrait. All lines drawn past 375 width on the SKCanvasView will be cut off and drawn as if it was portrait instead.

    I don't want to change the layout and allow any UI rotation (I know this would fix but it breaks the layout when rotating Bitmap becomes pixelated not sure why I get some weird behaviours).

Sign In or Register to comment.