Share via

SkiaSharp Transforms

  • Article

Learn about transforms for displaying SkiaSharp graphics

SkiaSharp supports traditional graphics transforms that are implemented as methods of the SKCanvas object. Mathematically, transforms alter the coordinates and sizes that you specify in SKCanvas drawing functions as the graphical objects are rendered. Transforms are often convenient for drawing repetitive graphics or for animation. Some techniques — such as rotating bitmaps or text — are not possible without the use of transforms.

SkiaSharp transforms support the following operations:

  • Translate to shift coordinates from one location to another
  • Scale to increase or decrease coordinates and sizes
  • Rotate to rotate coordinates around a point
  • Skew to shift coordinates horizontally or vertically so that a rectangle becomes a parallelogram

These are known as affine transforms. Affine transforms always preserve parallel lines and never cause a coordinate or size to become infinite. A square is never transformed into anything other than a parallelogram, and a circle is never transformed into anything other than an ellipse.

SkiaSharp also supports non-affine transforms (also called projective or perspective transforms) based on a standard 3-by-3 transform matrix. A non-affine transform allows a square to be transformed into any convex quadrilateral, which is a four-sided figure with all interior angles less than 180 degrees. Non-affine transforms can cause coordinates or sizes to become infinite, but they are vital for 3D effects.

Differences between SkiaSharp and Xamarin.Forms Transforms

Xamarin.Forms also supports transforms that are similar to those in SkiaSharp. The Xamarin.Forms VisualElement class defines the following transform properties:

The RotationX and RotationY properties are perspective transforms that create quasi-3D effects.

There are several crucial differences between SkiaSharp transforms and Xamarin.Forms transforms:

The first difference is that SkiaSharp transforms are applied to the entire SKCanvas object while the Xamarin.Forms transforms are applied to individual VisualElement derivatives. (You can apply the Xamarin.Forms transforms to the SKCanvasView object itself, because SKCanvasView derives from VisualElement, but within that SKCanvasView, the SkiaSkarp transforms apply.)

The SkiaSharp transforms are relative to the upper-left corner of the SKCanvas while Xamarin.Forms transforms are relative to the upper-left corner of the VisualElement to which they are applied. This difference is important when applying scaling and rotation transforms because these transforms are always relative to a particular point.

The really big difference is that SKiaSharp transforms are methods while the Xamarin.Forms transforms are properties. This is a semantic difference beyond the syntactical difference: SkiaSharp transforms perform an operation while Xamarin.Forms transforms set a state. SkiaSharp transforms apply to subsequently drawn graphics objects, but not to graphics objects that are drawn before the transform is applied. In contrast, a Xamarin.Forms transform applies to a previously rendered element as soon as the property is set. SkiaSharp transforms are cumulative as the methods are called; Xamarin.Forms transforms are replaced when the property is set with another value.

All the sample programs in this section appear in the SkiaSharp Transforms section of the sample program. Source code can be found in the Transforms folder of the solution.

The Translate Transform

Learn how to use the translate transform to shift SkiaSharp graphics.

The Scale Transform

Discover the SkiaSharp scale transform for scaling objects to various sizes.

The Rotate Transform

Explore the effects and animations possible with the SkiaSharp rotate transform.

The Skew Transform

See how the skew transform can create tilted graphical object.

Matrix Transforms

Dive deeper into SkiaSharp transforms with the versatile transform matrix.

Touch Manipulations

Use matrix transforms to implement touch manipulations for dragging, scaling, and rotation.

Non-Affine Transforms

Go beyond the oridinary with non-affine transform effects.

3D Rotation

Use non-affine transforms to rotate 2D objects in 3D space.