SkiaSharp の変換
サンプルのダウンロードSkiaSharp グラフィックスを表示するための変換に関する説明
SkiaSharp では、SKCanvas オブジェクトのメソッドとして実装される従来のグラフィックス変換がサポートされています。 数学的には、グラフィカル オブジェクトがレンダリングされる際に、SKCanvas 描画関数内で指定した座標とサイズが、変換によって変更されます。 変換は多くの場合、反復的なグラフィックスの描画やアニメーションに便利です。 一部の手法 (ビットマップやテキストの回転など) は、変換を使用しなければ実現することができません。
SkiaSharp の変換では、次の操作がサポートされます。
- 移動: ある位置から別の位置に座標をシフトします
- 拡大縮小: 座標とサイズを増減します
- 回転: ある点を中心に座標を回転させます
- 傾斜: 四角形が平行四辺形になるように、座標を水平方向または垂直方向にシフトします
これらは "アフィン" 変換と呼ばれます。 アフィン変換は常に平行線を保持し、座標やサイズが無限になることはありません。 四角形は平行四辺形以外に変換されることはなく、円は楕円以外に変換されることはありません。
SkiaSharp では、標準の 3 x 3 変換行列に基づく非アフィン変換 ("射影" または "透視" 変換とも呼ばれます) もサポートされています。 非アフィン変換を使用すると、正方形を任意の凸四角形 (すべての内角が 180 度未満の四角形) に変換することができます。 非アフィン変換では、座標またはサイズが無限になる可能性がありますが、これらは 3D 効果に不可欠です。
SkiaSharp と Xamarin.Forms の変換の違い
Xamarin.Forms では、SkiaSharp のものと同様の変換もサポートされています。 Xamarin.FormsVisualElement クラスでは、次の変換プロパティが定義されています。
RotationX および RotationY プロパティは、擬似 3D 効果を作成する透視変換です。
SkiaSharp の変換と Xamarin.Forms の変換には、いくつかの重要な違いがあります。
1 つ目の違いは、SkiaSharp の変換は SKCanvas オブジェクト全体に適用されるのに対し、Xamarin.Forms の変換は個々の VisualElement 派生物に適用される点です (SKCanvasView オブジェクト自体に Xamarin.Forms の変換を適用することができます。これは SKCanvasView は VisualElement から派生しているものの、SKCanvasView の中で SkiaSharp の変換が適用されるためです)。
SkiaSharp の変換は SKCanvas の左上隅を基準にするのに対し、Xamarin.Forms の変換は、適用先の VisualElement の左上隅を基準にします。 この違いは、拡大縮小変換と回転変換を適用する場合に重要です。なぜなら、これらの変換は常に特定のポイントに対して相対的であるためです。
本当に大きな違いは、SKiaSharp の変換は "メソッド" であるのに対し、Xamarin.Forms の変換は "プロパティ" であることです。 これは構文の違いを超えた、セマンティックの違いです。SkiaSharp の変換は操作を実行するのに対し、Xamarin.Forms の変換は状態を設定します。 SkiaSharp の変換は、それ以降に描画されたグラフィックス オブジェクトに適用されますが、その変換が適用される前に描画されたグラフィックス オブジェクトは対象外です。 これに対し、Xamarin.Forms 変換は、プロパティが設定されるとすぐに、以前にレンダリングされた要素に適用されます。 SkiaSharp の変換は、メソッドが呼び出されるにつれて累積します。Xamarin.Forms の変換は、プロパティが別の値に設定される際に置き換えられます。
このセクション内のすべてのサンプル プログラムは、SkiaSharpFormsDemos プログラムの SkiaSharp Transforms セクション内にあります。 ソース コードは、ソリューションの Transforms フォルダー内にあります。
平行移動変換
移動変換を使用して SkiaSharp グラフィックをシフトする方法について説明します。
スケール変換
オブジェクトをさまざまなサイズに拡大縮小するための、SkiaSharp の拡大縮小変換について説明します。
回転変換
SkiaSharp の回転変換で可能な効果とアニメーションについて説明します。
傾斜変換
傾斜変換によって、傾いたグラフィカル オブジェクトがどのように作成されるかを確認します。
行列変換
汎用的な変換行列を使用して、SkiaSharp の変換についてさらに詳しく説明します。
タッチ操作
行列変換を使用して、ドラッグ、拡大縮小、回転のタッチ操作を実装します。
非アフィン変換
非アフィン変換効果を使用して常識を超えます。
3 次元回転
非アフィン変換を使用して、3D 空間内で 2D オブジェクトを回転させます。