figma-to-maui-graphics
figma-to-maui-graphics copied to clipboard
No ui is showing
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.