Xamarin.Forms での SkiaSharp グラフィックスSkiaSharp Graphics in Xamarin.Forms

サンプルのダウンロードサンプルをダウンロードします。Download Sample Download the sample

SkiaSharp を使用して、Xamarin.Forms アプリケーションでの 2D グラフィックUse SkiaSharp for 2D graphics in your Xamarin.Forms applications

SkiaSharp は、.NET と c# は Google の製品で広く使用されるオープン ソース Skia グラフィック エンジンを利用した 2D グラフィックス システムです。SkiaSharp is a 2D graphics system for .NET and C# powered by the open-source Skia graphics engine that is used extensively in Google products. 2 次元ベクター グラフィックス、ビットマップ、およびテキストを描画するために、Xamarin.Forms アプリケーションで SkiaSharp を使用できます。You can use SkiaSharp in your Xamarin.Forms applications to draw 2D vector graphics, bitmaps, and text. 参照してください、 2D 描画SkiaSharp ライブラリに関する一般的な情報とその他のいくつかのチュートリアル ガイド。See the 2D Drawing guide for more general information about the SkiaSharp library and some other tutorials.

このガイドでは、Xamarin.Forms のプログラミングに精通していることを前提としています。This guide assumes that you are familiar with Xamarin.Forms programming.

ウェブSkiaSharp のための形式Webinar: SkiaSharp for Xamarin.Forms

SkiaSharp の準備作業SkiaSharp Preliminaries

SkiaSharp の Xamarin.Forms は NuGet パッケージとしてパッケージ化されます。SkiaSharp for Xamarin.Forms is packaged as a NuGet package. For Mac、Visual Studio または Visual Studio で Xamarin.Forms ソリューションを作成したら、検索する NuGet パッケージ マネージャーを使用することができます、 SkiaSharp.Views.Formsパッケージ化し、ソリューションに追加します。After you've created a Xamarin.Forms solution in Visual Studio or Visual Studio for Mac, you can use the NuGet package manager to search for the SkiaSharp.Views.Forms package and add it to your solution. チェックする場合、参照セクション SkiaSharp を追加した後、各プロジェクトのことがわかりますさまざまなSkiaSharpライブラリが各ソリューションのプロジェクトに追加されました。If you check the References section of each project after adding SkiaSharp, you can see that various SkiaSharp libraries have been added to each of the projects in the solution.

Xamarin.Forms アプリケーションが iOS を対象と場合は、プロジェクトのプロパティ ページを使用して、iOS 8.0 を最小展開ターゲットを変更します。If your Xamarin.Forms application targets iOS, use the project properties page to change the minimum deployment target to iOS 8.0.

SkiaSharp を使用する (C#) ページに含める必要あります、usingディレクティブを SkiaSharp すべて SkiaSharp クラス、構造体、および、グラフィックスで使用する列挙体を含む名前空間プログラミングします。In any C# page that uses SkiaSharp you'll want to include a using directive for the SkiaSharp namespace, which encompasses all the SkiaSharp classes, structures, and enumerations that you'll use in your graphics programming. 必要、usingディレクティブを SkiaSharp.Views.Forms Xamarin.Forms に固有のクラスの名前空間。You'll also want a using directive for the SkiaSharp.Views.Forms namespace for the classes specific to Xamarin.Forms. これは、くらい小さい名前空間、最も重要なクラスが SKCanvasViewします。This is a much smaller namespace, with the most important class being SKCanvasView. このクラスは、Xamarin.Forms から派生Viewクラスし、SkiaSharp グラフィックスの出力をホストします。This class derives from the Xamarin.Forms View class and hosts your SkiaSharp graphics output.

重要

SkiaSharp.Views.Forms名前空間にも含まれています、SKGLViewクラスから派生したViewが、グラフィックのレンダリングの OpenGL を使用します。The SkiaSharp.Views.Forms namespace also contains an SKGLView class that derives from View but uses OpenGL for rendering graphics. このガイドでは簡潔さのために、制限自体にSKCanvasViewを使用していますがSKGLViewは代わりによく似ています。For purposes of simplicity, this guide restricts itself to SKCanvasView, but using SKGLView instead is quite similar.

SkiaSharp 描画の基礎SkiaSharp Drawing Basics

SkiaSharp で描画できる最も簡単なグラフィック図形には、円、楕円、四角形などがあります。Some of the simplest graphics figures you can draw with SkiaSharp are circles, ovals, and rectangles. これらの数値を表示するためには、SkiaSharp 座標、サイズ、および色について学びます。In displaying these figures, you will learn about SkiaSharp coordinates, sizes, and colors. テキストおよびビットマップの表示より複雑なには、次の記事では、これらの手法についても紹介します。The display of text and bitmaps is more complex, but these articles also introduce those techniques.

SkiaSharp の線とパスSkiaSharp Lines and Paths

グラフィック パスは、一連の接続された直線と曲線です。A graphics path is a series of connected straight lines and curves. データの格納、パスを指定できますかまたは両方。Paths can be stroked, filled, or both. この記事には、線の描画ストロークの端との結合、破線などと、点線がジオメトリのカーブできない場合は停止の多くの側面が含まれます。This article encompasses many aspects of line drawing, including stroke ends and joins, and dashed and dotted lines, but stops short of curve geometries.

SkiaSharp の変換SkiaSharp Transforms

変換では、グラフィックス オブジェクトを一様に変換、拡大縮小、回転、または傾斜を許可します。Transforms allow graphics objects to be uniformly translated, scaled, rotated, or skewed. この記事では、非アフィン変換を作成すると、パスに変換を適用する標準的な 3-3 での変換行列を使用する方法も示します。This article also shows how you can use a standard 3-by-3 transform matrix for creating non-affine transforms and applying transforms to paths.

SkiaSharp の曲線とパスSkiaSharp Curves and Paths

パスの探索は、パス オブジェクトに曲線を追加し、その他のパスの強力な機能を利用してで続行されます。The exploration of paths continues with adding curves to a path objects, and exploiting other powerful path features. 簡潔な文字列のパス全体を指定する方法、パスの効果を使用する方法、およびパスの内部を詳しく調査する方法を確認します。You'll see how you can specify an entire path in a concise text string, how to use path effects, and how to dig into path internals.

SkiaSharp のビットマップSkiaSharp Bitmaps

ビットマップは、ディスプレイ デバイスのピクセルに対応するビットの四角形の配列です。Bitmaps are rectangular arrays of bits corresponding to the pixels of a display device. この一連の記事では、ロード、保存、表示、作成、上に描画をアニメーション化する、SkiaSharp ビットマップのビットにアクセスする方法を示します。This series of articles shows how to load, save, display, create, draw on, animate, and access the bits of SkiaSharp bitmaps.

SkiaSharp の効果SkiaSharp Effects

効果は、グラフィックス、線形と円形グラデーションなどの通常の表示を変更、タイルのビットマップ、blend のモード、blur、およびその他のユーザー プロパティです。Effects are properties that alter the normal display of graphics, including linear and circular gradients, bitmap tiling, blend modes, blur, and others.