fabulous-dev / Fabulous

Declarative UI framework for cross-platform mobile & desktop apps, using MVU and F# functional programming
https://fabulous.dev
Apache License 2.0
1.13k stars 122 forks source link

Maui GraphicsView #1006

Closed edgarfgp closed 1 year ago

edgarfgp commented 1 year ago

Add support for GraphicsView https://docs.microsoft.com/en-us/dotnet/maui/user-interface/controls/graphicsview

Simulator Screen Shot - iPhone 11 - 2022-09-05 at 19 52 11

    let  ``Draw with fill and stroke`` =
      {   interface IDrawable with
            member this.Draw(canvas, dirtyRect) =
                let radius = Math.Min(dirtyRect.Width, dirtyRect.Height)/float32 4

                let path = new PathF();
                path.AppendCircle(dirtyRect.Center.X, dirtyRect.Center.Y, radius);

                canvas.StrokeColor <- Colors.Blue
                canvas.StrokeSize <- float32 10
                canvas.FillColor <- Colors.Red

                canvas.FillPath(path)
                canvas.DrawPath(path) }

     let ``Draw a shadow`` =
        { interface IDrawable with
            member this.Draw(canvas, dirtyRect) =
                canvas.FillColor <- Colors.Red
                canvas.SetShadow(new SizeF(float32 10, float32 10), float32 4, Colors.Grey)
                canvas.FillRectangle(float32 10, float32 10, float32 90, float32 100);

                canvas.FillColor <- Colors.Green;
                canvas.SetShadow(new SizeF(float32 10, float32 -10), float32 4, Colors.Grey)
                canvas.FillEllipse(float32 110, float32 10, float32 90, float32 100)

                canvas.FillColor <- Colors.Blue;
                canvas.SetShadow(new SizeF(float32 -10, float32 10), float32 4, Colors.Grey)
                canvas.FillRoundedRectangle(float32 210, float32 10, float32 90, float32 100, float32 25)  } 

    let view model =
        Application(
            ContentPage(
                "CounterApp",
                (VStack() {
                    GraphicsView(``Draw with fill and stroke``)
                        .onStartInteraction(fun args -> Interaction args)
                        .size(300., 400.)

                    GraphicsView(``Draw a shadow``)
                        .size(300., 400.)
                        .onStartInteraction(fun args -> Interaction args)
                 })
                    .center()
            )
        )