Xamarin.Forms 中的 SkiaSharp 圖形SkiaSharp Graphics in Xamarin.Forms

下載範例下載範例Download Sample Download the sample

2D 圖形,在 Xamarin.Forms 應用程式中使用 SkiaSharpUse 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. 您可以在 Xamarin.Forms 應用程式中使用 SkiaSharp,繪製 2D 向量圖形、 點陣圖和文字。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 for Xamarin. 表單Webinar: SkiaSharp for Xamarin.Forms

SkiaSharp 準備工作SkiaSharp Preliminaries

適用於 Xamarin.Forms SkiaSharp 會封裝為 NuGet 套件。SkiaSharp for Xamarin.Forms is packaged as a NuGet package. 您已在 Visual Studio 或 Visual Studio for Mac 中建立 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.FormsView類別,並裝載您 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. 這篇文章包含線條繪圖,包括筆劃 ends 和 joins,和虛線和虛線表示,但除了曲線幾何的停駐點的許多層面。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 模式、 模糊及其他的屬性。Effects are properties that alter the normal display of graphics, including linear and circular gradients, bitmap tiling, blend modes, blur, and others.