読者です 読者をやめる 読者になる 読者になる

ぴーさんログ

だいたいXamarin.Formsのブログ

Xamarinでも使えるクロスプラットフォームなベクタグラフィクスライブラリ 「NGrapchics」

Xamarin .NET Framework

f:id:ticktack623:20151018022903p:plain

NGraphicsベクタグラフィクスを描くためのクロスプラットフォーム ライブラリです。

つまり、WindowsAndroid(Xamarin)、iOS(Xamarin)などに対して、統一的なAPICanvasEllipseRectanglePath が描けます。

実際のコードを見てみましょう。公式のREADMEに書かれているサンプルです。

var canvas = Platforms.Current.CreateImageCanvas(new Size(100), scale: 2);

var skyBrush = new LinearGradientBrush (Point.Zero, Point.OneY, Colors.Blue, Colors.White);
canvas.FillRectangle (new Rect (canvas.Size), skyBrush);
canvas.FillEllipse (10, 10, 30, 30, Colors.Yellow);
canvas.FillRectangle (50, 60, 60, 40, Colors.LightGray);
canvas.FillPath (new PathOp[] { 
    new MoveTo (40, 60),
    new LineTo (120, 60),
    new LineTo (80, 30),
    new ClosePath ()
}, Colors.Gray);

Platforms.Current.CreateImageCanvasで各プラットフォーム向けのカンバスを取得してそこに色々描き込んでいく感じですね。このサンプルコードの出力はこんな画像になります。

f:id:ticktack623:20151018023037p:plain

ではこれをXamarin.iOSで表示してみましょう。ViewController.ViewDidLoad()を以下のように変更します。

public override void ViewDidLoad()
{
    base.ViewDidLoad();

    var canvas = Platforms.Current.CreateImageCanvas(new Size(100), scale: 2);

    /* (省略) */

    // NGraphicsのカンバスからiOSのUIImageに変換
    UIImage image = canvas.GetImage().GetUIImage();
    UIImageView imageView = new UIImageView(new CGRect(0, 20, 100, 100));
    imageView.Image = image;
    View.AddSubview(imageView);
}

ちゃんと表示できました!

f:id:ticktack623:20151018023054p:plain:w350

共通コード内にアプリ内で使うアイコンを返すクラスを作って、Icons.GetHogeIcon() → 各プラットフォームのUIに変換といった事が出来そうです。

残念ながらNGraphicsではSVGファイルの読み込みやパスの合成が出来ません。ドローイングツールで作ったアイコンを取り込めるようになったら最高ですねー。それでもDPIごとに画像ファイルを用意しなくていいのは魅力的じゃあありませんか?

SVGを読み込めるようになりました