figma-to-maui-graphics

figma-to-maui-graphics copied to clipboard

As always - brilliant! But I am having some problems making it work at all.

Here is the ContentPage that hosts the GraphicsView:

<ContentPage x:Class="MusicDice.Views.MainPage" xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:controls="clr-namespace:MusicDice.Controls" xmlns:vm="clr-namespace:MusicDice.ViewModels" x:DataType="vm:MainViewModel"> <VerticalStackLayout> <GraphicsView x:Name="DiceOne" HeightRequest="100" HorizontalOptions="Center" VerticalOptions="Center" WidthRequest="200" /> </VerticalStackLayout> </ContentPage>

Here is my code behind: namespace MusicDice.Views;

public partial class MainPage : ContentPage { public MainPage(MainViewModel viewModel) { InitializeComponent(); BindingContext = viewModel; DiceOne.Drawable = new DiceOneDrawable(); }

class DiceOneDrawable : IDrawable
{
    public void Draw(ICanvas canvas, RectF dirtyRect)
    {
        /// View:     rectangleView
        // NodeName: Rectangle
        // NodeType: RECTANGLE
        // NodeId:   1:3
        canvas.SaveState();
        canvas.FillColor = Color.FromRgb(245, 245, 245);
        canvas.Alpha = 1;
        canvas.FillRoundedRectangle(-268f, -295f, 100f, 100f, 15f);
        canvas.StrokeColor = Color.FromRgb(0, 0, 0);
        canvas.Alpha = 1;
        canvas.StrokeSize = 1;
        canvas.DrawRoundedRectangle(-268f, -295f, 100f, 100f, 15f);
        canvas.RestoreState();


        // View:     elipseView
        // NodeName: Ellipse 2
        // NodeType: ELLIPSE
        // NodeId:   1:5
        canvas.SaveState();
        canvas.FillColor = Color.FromRgb(19, 1, 1);
        canvas.Alpha = 1;
        canvas.FillEllipse(-221f, -251f, 11f, 12f);
        canvas.RestoreState();


        // View:     rectangleView1
        // NodeName: Rectangle
        // NodeType: RECTANGLE
        // NodeId:   1:6
        canvas.SaveState();
        canvas.FillColor = Color.FromRgb(245, 245, 245);
        canvas.Alpha = 1;
        canvas.FillRoundedRectangle(-266f, -132f, 100f, 100f, 15f);
        canvas.StrokeColor = Color.FromRgb(0, 0, 0);
        canvas.Alpha = 1;
        canvas.StrokeSize = 1;
        canvas.DrawRoundedRectangle(-266f, -132f, 100f, 100f, 15f);
        canvas.RestoreState();


        // View:     elipseView1
        // NodeName: Ellipse 3
        // NodeType: ELLIPSE
        // NodeId:   1:7
        canvas.SaveState();
        canvas.FillColor = Color.FromRgb(19, 1, 1);
        canvas.Alpha = 1;
        canvas.FillEllipse(-241f, -106f, 11f, 12f);
        canvas.RestoreState();


        // View:     elipseView2
        // NodeName: Ellipse 4
        // NodeType: ELLIPSE
        // NodeId:   1:8
        canvas.SaveState();
        canvas.FillColor = Color.FromRgb(19, 1, 1);
        canvas.Alpha = 1;
        canvas.FillEllipse(-200f, -71f, 11f, 12f);
        canvas.RestoreState();


    }
}

}

As you might infer - I am trying to draw two dice that were drawn in Figma. I can step through the code - but nothing shows up on screen. Am a 100% nubie to hand drawn graphics - so any help would be appreciated.

Looking at the code, if you look at the X and Y positions they are in negative values (Example: -268f, -295f). Did you set the Root element to 0, 0 in Figma?

https://github.com/jsuarezruiz/figma-to-maui-graphics?tab=readme-ov-file#known-limitations-or-issues