simple OSX example for SKCanvasView

Hi all,
do you have a simple example (draw only a line) of code for OSX within a SKCanvasView ?
I suppose in the "drawrect" method ?
I have difficulties to understand how to manage this...
:-/

Thanks for your help

Pierre

Posts

  • mattleibowmattleibow ZAXamarin Team Xamurai

    This simplest way to do this will be to install the SkiaSharp NuGet and the SkiaSharp.Views NuGet. The first is the actual drawing library, and the second is the easy way to get a view that can be drawn.

    Once installed, you can add the view via code or the designer and implement the PaintSurface method:
    https://developer.xamarin.com/api/event/SkiaSharp.Views.Mac.SKCanvasView.PaintSurface/

    If you don't want to use events, you can inherit from the view and override the DrawInSurface method:
    https://developer.xamarin.com/api/member/SkiaSharp.Views.Mac.SKCanvasView.DrawInSurface/p/SkiaSharp.SKSurface/SkiaSharp.SKImageInfo/

    Both docs have a simple example of how to use the drawing bits.

    Docs:
    https://developer.xamarin.com/api/type/SkiaSharp.Views.Mac.SKCanvasView/

  • pierreDurantpierreDurant USMember ✭✭

    Thanks a LOT Matthew !

    it works now :-)

    Pierre

  • sachinJsachinJ INMember ✭✭

    Hi @mattleibow ,
    i am using below code for SkCanvasView

        <views:SKCanvasView x:Name="canvas"  PaintSurface="OnPaintSample" IsVisible="True">
                        <views:SKCanvasView.GestureRecognizers>
                            <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />
                            <PinchGestureRecognizer PinchUpdated="PinchGestureRecognizer_PinchUpdated" />
                        </views:SKCanvasView.GestureRecognizers>
                    </views:SKCanvasView>
    

    code behind tapped event
    private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
    {
    }
    i used 2 events pinch and tap.
    pinch works fine in both iOS and android.
    but i need tapped/clicked canvas points(x,y) using Tapped event. but in code behind i am not able to access points.
    please give me hint/suggestion how i get touched points using tapped event.

    also how i used above code inside to make image scrollable.
    currently if i used above code inside scrollview it gives exception.

  • mattleibowmattleibow ZAXamarin Team Xamurai

    @sachinJ, the coordinates for a tap aren't exposed by the default gesture recognizers. You could try a third party recognizer (I would strongly suggest a new post so that the community can help out). This doesn't really have anything to do with SkiaSharp as this is just plain old Xamarin.Forms. I recall that there are a few recognizers out there that are far more advanced.

    I will point to some docs that deal with touch:

    https://developer.xamarin.com/guides/xamarin-forms/advanced/skiasharp/paths/finger-paint/
    https://developer.xamarin.com/guides/xamarin-forms/advanced/skiasharp/transforms/touch/

    Also, I am woking on adding touch events directly into the various views:

    https://github.com/mono/SkiaSharp/pull/309

    I am not sure when it will land, but it should be soon-ish.

  • sachinJsachinJ INMember ✭✭

    @mattleibow , Thank you for replay.
    i used above code to get touch points using canvas object.
    now i want pinch zoom using same in ios and android.

    as per above code in ios if we add pinch GestureRecognizer then pinch zoom only works in ios.
    but i am not able to add pinch zoom in android.
    so just give me solution how i add pinch zoom in android .

  • sachinJsachinJ INMember ✭✭

    @mattleibow , one more thing i added below code

    <views:SKCanvasView x:Name="canvas" PaintSurface="OnPaintSample" >
                    <views:SKCanvasView.GestureRecognizers>
                        <PinchGestureRecognizer PinchUpdated="PinchGestureRecognizer_PinchUpdated" />
                    </views:SKCanvasView.GestureRecognizers>
                </views:SKCanvasView>
                <Grid.Effects>
                    <local:TouchEffect Capture="True"
                                    TouchAction="OnTouchEffectAction" />
                </Grid.Effects>
    

    using this if i add pinch using SkCanvasView then TouchAction not works.
    if i removed pinchGesture then only touch works.
    why this can you have any idea?

  • sachinJsachinJ INMember ✭✭

    @mattleibow ,
    tomorrow i will make one simple app with pinch and touch and upload zip here,
    so that you can check it and if you idea related to this then you can easily check and fixed it.
    i checked it but i can't understand it well why touch not fired when i added pinch.

  • mattleibowmattleibow ZAXamarin Team Xamurai

    On iOS and Android, the touches are intercepted and not passed on to the gesture recognizers. In my touch implementation, I have a toggle so that at least there is a way to choose which to use.

  • sachinJsachinJ INMember ✭✭

    Hello @mattleibow ,
    i am creating one small app where image drawn using SkCanvasView.
    here i am adding touch and pinch zoom. in both iOS and android.
    touch and pinch working fine in iOS but in android only pinch work not touch.

    here issue is touch working fine and pinch also but when both added at same time then
    only pinch zoom works but touch not get trigger.
    just check this code and if you get any idea why touch not working when adding pinch.
    after checking this code if it gets working then upload same so that i can use it.

    i am uploading code zip using git, here is url
    https://github.com/testpiph001/SkiaSharp_Touch_PinchZoom

Sign In or Register to comment.