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

f:id:ticktack623:20151018022903p:plain

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

つまり、Windows、Android(Xamarin)、iOS(Xamarin)などに対して、統一的なAPIで Canvas に Ellipse や Rectangle や Path が描けます。

実際のコードを見てみましょう。公式の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);
}