NControlでもSVG

以前、NGraphicsでSVGが読み込めるようになったとお伝えしました。 それに伴い、内部でNGraphicsを使っているNControlでもSVGを読み込み＆描画できるようになった訳なんですが、何も考えないで使うとちょっと悲しい事になるので解説を。

まずは特に工夫せず描画してみましょう。

// ContentPageのコンストラクタ内

var nControlView = new NControlView {
    HeightRequest = 300,
    WidthRequest = 300,
    BackgroundColor = Xamarin.Forms.Color.Gray,

    DrawingFunction = (canvas, rect) =>  {
        // tigerSvgの中身はSVGファイルを読み込んだstring
        using(var reader = new StringReader(tigerSvg))
        {
            var sourceGraphic = Graphic.LoadSvg(reader);
            sourceGraphic.Draw(canvas);
        }                   
    },
};

Content = new StackLayout {
    Children = { nControlView },
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.Center,
};

SVGイメージのサイズが大きすぎて見切れてしまいました。

DrawingFunctionのrect ＝ NControlViewのサイズに合わせて拡大・縮小して描画する必要があります。 DrawingFunctionの部分を修正しましょう。

DrawingFunction = (canvas, rect) =>  {
    using(var reader = new StringReader(tigerSvg))
    {
        var sourceGraphic = Graphic.LoadSvg(reader);

        // rectに収まる倍率へ縮小する変形情報を生成
        var transform = Transform.AspectFillRect(sourceGraphic.ViewBox, rect);

        // 変形を適用した新しいGraphicインスタンスを生成
        var transformedGraphic = sourceGraphic.TransformGeometry(transform);

        transformedGraphic.Draw(canvas);
    }                   
},

Transform.AspectFillRect() で第1引数のサイズから第2引数のサイズに拡大・縮小するための変形情報を生成します。( Transform.StretchFillRect() というのもあります。) Graphic.TransformGeometry() で変形を適用した新しいGraphicが得られますのでこれをcanvasに描画しましょう。

コントロールに合うサイズで描画できました。