SkiaSharp グラフィックス Xamarin.Forms

Download Sampleサンプルのダウンロード

"Xamarin.Forms アプリケーションの 2D グラフィックスに SkiaSharp を使用する"

SkiaSharp は、Google 製品にも広く利用されているオープンソースの Skia グラフィックス エンジンを搭載した、.NET および C# 対応の 2D グラフィックス システムです。 Xamarin.Forms アプリケーションで SkiaSharp を使用して、2D ベクター グラフィックス、ビットマップ、およびテキストを描画することができます。

このガイドは、Xamarin.Forms プログラミングについて十分理解していることを前提としています。

SkiaSharp の準備

Xamarin.Forms 向け SkiaSharp は NuGet パッケージとしてパッケージ化されています。 Visual Studio または Visual Studio for Mac で Xamarin.Forms ソリューションを作成したら、NuGet パッケージ マネージャーを使用して SkiaSharp.Views.Forms パッケージを検索し、ソリューションに追加できます。 SkiaSharp を追加した後に各プロジェクトの [参照] セクションを確認すると、さまざまな SkiaSharp ライブラリがソリューション内の各プロジェクトに追加されていることがわかります。

お使いの Xamarin.Forms アプリケーションが iOS を対象としている場合は、その Info.plist ファイルを編集して、最小展開先を iOS 8.0 に変更します。

SkiaSharp を使用するどの C# ページにも、グラフィックス プログラミングで使用するすべての SkiaSharp のクラス、構造体、列挙型を含む、SkiaSharp 名前空間の using ディレクティブを含める必要があります。 また、Xamarin.Forms に固有のクラスに、SkiaSharp.Views.Forms 名前空間の using ディレクティブも必要になります。 こちらの名前空間の方がはるかに小さく、最も重要なクラスは SKCanvasView になります。 このクラスは Xamarin.Forms の View クラスから派生したもので、SkiaSharp グラフィックス出力をホストします。

重要

SkiaSharp.Views.Forms 名前空間には View から派生する SKGLView クラスも含まれますが、グラフィックスのレンダリングには OpenGL を使用します。 わかりやすくするために、このガイドでは SKCanvasViewに制限していますが、代わりに SKGLView を使用してもほとんど変わりません。

SkiaSharp 描画の基礎

SkiaSharp で描画できる最も簡単なグラフィックス図形には、円、楕円、四角形などがあります。 これらの図を表示する際に、SkiaSharp の座標、サイズ、色について学習します。 テキストとビットマップの表示はより複雑ですが、これらの記事ではその手法も簡単に紹介しています。

SkiaSharp の線とパス

グラフィックス パスは、接続された直線と曲線の集まりです。 パスは、ストローク、塗りつぶし、またはその両方を行うことができます。 この記事では、ストロークの端と結合、破線と点線など、線の描画のさまざまな側面について説明しますが、曲線のジオメトリまでは説明しません。

SkiaSharp の変換

変換を使用すると、グラフィックス オブジェクトを均一に変換、拡大縮小、回転、または傾斜させることができます。 この記事では、標準の 3 x 3 変換マトリックスを使用して、非アフィン変換を作成し、その変換をパスに適用する方法についても説明します。

SkiaSharp の曲線とパス

このパスの探索では、パス オブジェクトへの曲線の追加と、他の強力なパス機能の探索を続けます。 簡潔なテキスト文字列でパス全体を指定する方法、パスの効果を使用する方法、およびパスの内部を調べる方法について説明します。

SkiaSharp のビットマップ

ビットマップは、ディスプレイ デバイスのピクセルに対応するビットの四角形配列です。 この一連の記事では、SkiaSharp ビットマップのビットの読み込み、保存、表示、作成、描画、アニメーション化、アクセスの方法について説明します。

SkiaSharp の効果

効果は、線形や円形のグラデーション、ビットマップのタイル、ブレンド モード、ぼかしなど、グラフィックスの通常の表示を変更するプロパティです。