SkiaBackedCanvas



Summary

Public constructors

android

Public functions

open Unit
clipPath(path: Path, clipOp: ClipOp)

Reduces the clip region to the intersection of the current clip and the given Path.

android
open Unit
clipRect(left: Float, top: Float, right: Float, bottom: Float, clipOp: ClipOp)

Reduces the clip region to the intersection of the current clip and the given bounds.

android
Unit
clipRoundRect(rect: RoundRect, clipOp: ClipOp)
android
open Unit
concat(matrix: Matrix)

Multiply the current transform by the specified 4⨉4 transformation matrix specified as a list of values in column-major order.

android
open Unit

Disables Z support, preventing any layers drawn after this point from being visually reordered or having shadows rendered.

android
open Unit
drawArc(
    left: Float,
    top: Float,
    right: Float,
    bottom: Float,
    startAngle: Float,
    sweepAngle: Float,
    useCenter: Boolean,
    paint: Paint
)

Draw an arc scaled to fit inside the given rectangle.

android
open Unit
drawCircle(center: Offset, radius: Float, paint: Paint)

Draws a circle centered at the point given by the first argument and that has the radius given by the second argument, with the Paint given in the third argument.

android
open Unit
drawImage(image: ImageBitmap, topLeftOffset: Offset, paint: Paint)

Draws the given ImageBitmap into the canvas with its top-left corner at the given Offset.

android
open Unit
drawImageRect(
    image: ImageBitmap,
    srcOffset: IntOffset,
    srcSize: IntSize,
    dstOffset: IntOffset,
    dstSize: IntSize,
    paint: Paint
)

Draws the subset of the given image described by the src argument into the canvas in the axis-aligned rectangle given by the dst argument.

android
open Unit
drawLine(p1: Offset, p2: Offset, paint: Paint)

Draws a line between the given points using the given paint.

android
open Unit
drawOval(left: Float, top: Float, right: Float, bottom: Float, paint: Paint)

Draws an axis-aligned oval that fills the given bounds provided with the given Paint.

android
open Unit
drawPath(path: Path, paint: Paint)

Draws the given Path with the given Paint.

android
open Unit
drawPoints(pointMode: PointMode, points: List<Offset>, paint: Paint)

Draws a sequence of points according to the given PointMode.

android
open Unit
drawRawPoints(pointMode: PointMode, points: FloatArray, paint: Paint)
android
open Unit
drawRect(left: Float, top: Float, right: Float, bottom: Float, paint: Paint)

Draws a rectangle with the given Paint.

android
open Unit
drawRoundRect(
    left: Float,
    top: Float,
    right: Float,
    bottom: Float,
    radiusX: Float,
    radiusY: Float,
    paint: Paint
)

Draws a rounded rectangle with the given Paint.

android
open Unit
drawVertices(vertices: Vertices, blendMode: BlendMode, paint: Paint)
android
open Unit

Enables Z support which defaults to disabled.

android
open Unit

Pops the current save stack, if there is anything to pop.

android
open Unit
rotate(degrees: Float)

Add a rotation (in degrees clockwise) to the current transform

android
open Unit

Saves a copy of the current transform and clip on the save stack.

android
open Unit
saveLayer(bounds: Rect, paint: Paint)

Saves a copy of the current transform and clip on the save stack, and then creates a new group which subsequent calls will become a part of.

android
open Unit
scale(sx: Float, sy: Float)

Add an axis-aligned scale to the current transform, scaling by the first argument in the horizontal direction and the second in the vertical direction.

android
open Unit
skew(sx: Float, sy: Float)

Add an axis-aligned skew to the current transform, with the first argument being the horizontal skew in degrees clockwise around the origin, and the second argument being the vertical skew in degrees clockwise around the origin.

android
open Unit
translate(dx: Float, dy: Float)

Add a translation to the current transform, shifting the coordinate space horizontally by the first argument and vertically by the second argument.

android

Public properties

Float
android
Canvas
android

Inherited functions

From androidx.compose.ui.graphics.Canvas
open Unit
clipRect(rect: Rect, clipOp: ClipOp)

Reduces the clip region to the intersection of the current clip and the given rectangle.

android
open Unit
drawArc(
    rect: Rect,
    startAngle: Float,
    sweepAngle: Float,
    useCenter: Boolean,
    paint: Paint
)

Draw an arc scaled to fit inside the given rectangle.

android
open Unit
drawArcRad(
    rect: Rect,
    startAngleRad: Float,
    sweepAngleRad: Float,
    useCenter: Boolean,
    paint: Paint
)

Draw an arc scaled to fit inside the given rectangle.

android
open Unit
drawOval(rect: Rect, paint: Paint)

Draws an axis-aligned oval that fills the given axis-aligned rectangle with the given Paint.

android
open Unit
drawRect(rect: Rect, paint: Paint)

Draws a rectangle with the given Paint.

android
open Unit
skewRad(sxRad: Float, syRad: Float)

Add an axis-aligned skew to the current transform, with the first argument being the horizontal skew in radians clockwise around the origin, and the second argument being the vertical skew in radians clockwise around the origin.

android

Public constructors

SkiaBackedCanvas

SkiaBackedCanvas(skia: Canvas)

Public functions

clipPath

open fun clipPath(path: Path, clipOp: ClipOp): Unit

Reduces the clip region to the intersection of the current clip and the given Path.

clipRect

open fun clipRect(left: Float, top: Float, right: Float, bottom: Float, clipOp: ClipOp): Unit

Reduces the clip region to the intersection of the current clip and the given bounds.

Use ClipOp.Difference to subtract the provided rectangle from the current clip.

Parameters
left: Float

Left bound of the clip region

top: Float

Top bound of the clip region

right: Float

Right bound of the clip region

bottom: Float

Bottom bound of the clip region

clipOp: ClipOp

Clipping operation to conduct on the given bounds, defaults to ClipOp.Intersect

clipRoundRect

fun clipRoundRect(rect: RoundRect, clipOp: ClipOp = ClipOp.Intersect): Unit

concat

open fun concat(matrix: Matrix): Unit

Multiply the current transform by the specified 4⨉4 transformation matrix specified as a list of values in column-major order.

disableZ

open fun disableZ(): Unit

Disables Z support, preventing any layers drawn after this point from being visually reordered or having shadows rendered. This is not impacted by any save or restore calls as it is not considered part of the matrix or clip.

See also
enableZ

drawArc

open fun drawArc(
    left: Float,
    top: Float,
    right: Float,
    bottom: Float,
    startAngle: Float,
    sweepAngle: Float,
    useCenter: Boolean,
    paint: Paint
): Unit

Draw an arc scaled to fit inside the given rectangle. It starts from startAngle degrees around the oval up to startAngle + sweepAngle degrees around the oval, with zero degrees being the point on the right hand side of the oval that crosses the horizontal line that intersects the center of the rectangle and with positive angles going clockwise around the oval. If useCenter is true, the arc is closed back to the center, forming a circle sector. Otherwise, the arc is not closed, forming a circle segment.

This method is optimized for drawing arcs and should be faster than Path.arcTo.

Parameters
left: Float

Left bound of the arc

top: Float

Top bound of the arc

right: Float

Right bound of the arc

bottom: Float

Bottom bound of the arc

startAngle: Float

Starting angle of the arc relative to 3 o'clock

sweepAngle: Float

Sweep angle in degrees clockwise

useCenter: Boolean

Flag indicating whether or not to include the center of the oval in the

paint: Paint

Paint used to draw the arc. arc, and close it if it is being stroked. This will draw a wedge.

drawCircle

open fun drawCircle(center: Offset, radius: Float, paint: Paint): Unit

Draws a circle centered at the point given by the first argument and that has the radius given by the second argument, with the Paint given in the third argument. Whether the circle is filled or stroked (or both) is controlled by Paint.style.

drawImage

open fun drawImage(image: ImageBitmap, topLeftOffset: Offset, paint: Paint): Unit

Draws the given ImageBitmap into the canvas with its top-left corner at the given Offset. The image is composited into the canvas using the given Paint.

drawImageRect

open fun drawImageRect(
    image: ImageBitmap,
    srcOffset: IntOffset,
    srcSize: IntSize,
    dstOffset: IntOffset,
    dstSize: IntSize,
    paint: Paint
): Unit

Draws the subset of the given image described by the src argument into the canvas in the axis-aligned rectangle given by the dst argument.

This might sample from outside the src rect by up to half the width of an applied filter.

Parameters
image: ImageBitmap

ImageBitmap to draw

srcOffset: IntOffset

: Optional offset representing the top left offset of the source image to draw, this defaults to the origin of image

srcSize: IntSize

: Optional dimensions of the source image to draw relative to srcOffset, this defaults the width and height of image

dstOffset: IntOffset

: Offset representing the top left offset of the destination image to draw

dstSize: IntSize

: Dimensions of the destination to draw

paint: Paint

Paint used to composite the ImageBitmap pixels into the canvas

drawLine

open fun drawLine(p1: Offset, p2: Offset, paint: Paint): Unit

Draws a line between the given points using the given paint. The line is stroked, the value of the Paint.style is ignored for this call.

The p1 and p2 arguments are interpreted as offsets from the origin.

drawOval

open fun drawOval(left: Float, top: Float, right: Float, bottom: Float, paint: Paint): Unit

Draws an axis-aligned oval that fills the given bounds provided with the given Paint. Whether the rectangle is filled or stroked (or both) is controlled by Paint.style.

Parameters
left: Float

The left bound of the rectangle

top: Float

The top bound of the rectangle

right: Float

The right bound of the rectangle

bottom: Float

The bottom bound of the rectangle

paint: Paint

Paint used to color the rectangle with a fill or stroke

drawPath

open fun drawPath(path: Path, paint: Paint): Unit

Draws the given Path with the given Paint. Whether this shape is filled or stroked (or both) is controlled by Paint.style. If the path is filled, then subpaths within it are implicitly closed (see Path.close).

drawPoints

open fun drawPoints(pointMode: PointMode, points: List<Offset>, paint: Paint): Unit

Draws a sequence of points according to the given PointMode.

The points argument is interpreted as offsets from the origin.

See also:

drawRawPoints

open fun drawRawPoints(pointMode: PointMode, points: FloatArray, paint: Paint): Unit
Throws
kotlin.IllegalArgumentException

if a non even number of points is provided

drawRect

open fun drawRect(left: Float, top: Float, right: Float, bottom: Float, paint: Paint): Unit

Draws a rectangle with the given Paint. Whether the rectangle is filled or stroked (or both) is controlled by Paint.style.

Parameters
left: Float

The left bound of the rectangle

top: Float

The top bound of the rectangle

right: Float

The right bound of the rectangle

bottom: Float

The bottom bound of the rectangle

paint: Paint

Paint used to color the rectangle with a fill or stroke

drawRoundRect

open fun drawRoundRect(
    left: Float,
    top: Float,
    right: Float,
    bottom: Float,
    radiusX: Float,
    radiusY: Float,
    paint: Paint
): Unit

Draws a rounded rectangle with the given Paint. Whether the rectangle is filled or stroked (or both) is controlled by Paint.style.

drawVertices

open fun drawVertices(vertices: Vertices, blendMode: BlendMode, paint: Paint): Unit

enableZ

open fun enableZ(): Unit

Enables Z support which defaults to disabled. This allows layers drawn with different elevations to be rearranged based on their elevation. It also enables rendering of shadows.

See also
disableZ

restore

open fun restore(): Unit

Pops the current save stack, if there is anything to pop. Otherwise, does nothing.

Use save and saveLayer to push state onto the stack.

If the state was pushed with with saveLayer, then this call will also cause the new layer to be composited into the previous layer.

rotate

open fun rotate(degrees: Float): Unit

Add a rotation (in degrees clockwise) to the current transform

Parameters
degrees: Float

to rotate clockwise

save

open fun save(): Unit

Saves a copy of the current transform and clip on the save stack.

Call restore to pop the save stack.

See also:

  • saveLayer, which does the same thing but additionally also groups the commands done until the matching restore.

saveLayer

open fun saveLayer(bounds: Rect, paint: Paint): Unit

Saves a copy of the current transform and clip on the save stack, and then creates a new group which subsequent calls will become a part of. When the save stack is later popped, the group will be flattened into a layer and have the given paint's Paint.colorFilter and Paint.blendMode applied.

This lets you create composite effects, for example making a group of drawing commands semi-transparent. Without using saveLayer, each part of the group would be painted individually, so where they overlap would be darker than where they do not. By using saveLayer to group them together, they can be drawn with an opaque color at first, and then the entire group can be made transparent using the saveLayer's paint.

Call restore to pop the save stack and apply the paint to the group.

Using saveLayer with clips

When a rectangular clip operation (from clipRect) is not axis-aligned with the raster buffer, or when the clip operation is not rectalinear (e.g. because it is a rounded rectangle clip created by clipPath, the edge of the clip needs to be anti-aliased.

If two draw calls overlap at the edge of such a clipped region, without using saveLayer, the first drawing will be anti-aliased with the background first, and then the second will be anti-aliased with the result of blending the first drawing and the background. On the other hand, if saveLayer is used immediately after establishing the clip, the second drawing will cover the first in the layer, and thus the second alone will be anti-aliased with the background when the layer is clipped and composited (when restore is called).

(Incidentally, rather than using clipPath with a rounded rectangle defined in a path to draw rounded rectangles like this, prefer the drawRoundRect method.

Performance considerations

Generally speaking, saveLayer is relatively expensive.

There are a several different hardware architectures for GPUs (graphics processing units, the hardware that handles graphics), but most of them involve batching commands and reordering them for performance. When layers are used, they cause the rendering pipeline to have to switch render target (from one layer to another). Render target switches can flush the GPU's command buffer, which typically means that optimizations that one could get with larger batching are lost. Render target switches also generate a lot of memory churn because the GPU needs to copy out the current frame buffer contents from the part of memory that's optimized for writing, and then needs to copy it back in once the previous render target (layer) is restored.

See also:

scale

open fun scale(sx: Float, sy: Float): Unit

Add an axis-aligned scale to the current transform, scaling by the first argument in the horizontal direction and the second in the vertical direction.

If sy is unspecified, sx will be used for the scale in both directions.

Parameters
sx: Float

The amount to scale in X

sy: Float

The amount to scale in Y

skew

open fun skew(sx: Float, sy: Float): Unit

Add an axis-aligned skew to the current transform, with the first argument being the horizontal skew in degrees clockwise around the origin, and the second argument being the vertical skew in degrees clockwise around the origin.

translate

open fun translate(dx: Float, dy: Float): Unit

Add a translation to the current transform, shifting the coordinate space horizontally by the first argument and vertically by the second argument.

Public properties

alphaMultiplier

var alphaMultiplierFloat

skia

val skiaCanvas