CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/maven-org-jetbrains-compose-ui--ui-uikitsimarm64

Compose Multiplatform UI library for iOS Simulator ARM64 target providing declarative UI framework based on Jetpack Compose for multiplatform development

Pending
Overview
Eval results
Files

graphics.mddocs/

Graphics and Visual Effects

Comprehensive 2D graphics system for custom drawing, visual effects, and image handling with hardware acceleration support for creating rich visual experiences across all platforms.

Capabilities

Color System

Core color representation and manipulation system supporting multiple color spaces and formats.

/**
 * The Color class contains color information for drawing.
 */
@Immutable
class Color(val value: ULong) {
    /**
     * Construct a Color from ARGB float values in [0..1].
     */
    constructor(
        red: Float,
        green: Float,
        blue: Float,
        alpha: Float = 1.0f,
        colorSpace: ColorSpace = ColorSpaces.Srgb
    )
    
    /**
     * Construct a Color from ARGB int values in [0..255].
     */
    constructor(red: Int, green: Int, blue: Int, alpha: Int = 255)
    
    /**
     * Returns the red component of the color in the [0..1] range.
     */
    val red: Float
    
    /**
     * Returns the green component of the color in the [0..1] range.
     */
    val green: Float
    
    /**
     * Returns the blue component of the color in the [0..1] range.
     */
    val blue: Float
    
    /**
     * Returns the alpha component of the color in the [0..1] range.
     */
    val alpha: Float
    
    /**
     * The ColorSpace associated with this color.
     */
    val colorSpace: ColorSpace
    
    /**
     * Copies this Color, optionally overriding some of the values.
     */
    fun copy(
        alpha: Float = this.alpha,
        red: Float = this.red,
        green: Float = this.green,
        blue: Float = this.blue
    ): Color
    
    companion object {
        val Black: Color
        val DarkGray: Color
        val Gray: Color
        val LightGray: Color
        val White: Color
        val Red: Color
        val Green: Color
        val Blue: Color
        val Yellow: Color
        val Cyan: Color
        val Magenta: Color
        val Transparent: Color
        val Unspecified: Color
    }
}

/**
 * Create a Color from a color int (0xAARRGGBB format).
 */
fun Color(color: Long): Color

/**
 * Create a Color from a color int (0xRRGGBB format with alpha = 255).
 */
fun Color(color: Int): Color

/**
 * Parse a color from a hex string.
 */
fun Color.parseColor(colorString: String): Color

Usage Examples:

// Creating colors
val red = Color.Red
val customColor = Color(0.2f, 0.8f, 0.1f, 1.0f)
val fromHex = Color(0xFF2196F3)
val fromInt = Color(255, 100, 50)

// Color manipulation
val transparentRed = Color.Red.copy(alpha = 0.5f)
val components = Color.Blue.run { "R:$red G:$green B:$blue A:$alpha" }

Canvas Drawing

Primary drawing interface for custom graphics with comprehensive drawing operations.

/**
 * Drawing surface that provides methods to draw geometric shapes, text, and images.
 */
interface Canvas {
    /**
     * Draws a rectangle.
     */
    fun drawRect(
        color: Color,
        topLeft: Offset = Offset.Zero,
        size: Size = Size.Unspecified,
        style: DrawStyle = Fill
    )
    
    /**
     * Draws a rectangle with a Brush.
     */
    fun drawRect(
        brush: Brush,
        topLeft: Offset = Offset.Zero,
        size: Size = Size.Unspecified,
        style: DrawStyle = Fill
    )
    
    /**
     * Draws a rounded rectangle.
     */
    fun drawRoundRect(
        color: Color,
        topLeft: Offset = Offset.Zero,
        size: Size = Size.Unspecified,
        cornerRadius: CornerRadius = CornerRadius.Zero,
        style: DrawStyle = Fill
    )
    
    /**
     * Draws a circle.
     */
    fun drawCircle(
        color: Color,
        radius: Float,
        center: Offset = Offset.Unspecified,
        style: DrawStyle = Fill
    )
    
    /**
     * Draws a circle with a Brush.
     */
    fun drawCircle(
        brush: Brush,
        radius: Float,
        center: Offset = Offset.Unspecified,
        style: DrawStyle = Fill
    )
    
    /**
     * Draws an oval.
     */
    fun drawOval(
        color: Color,
        topLeft: Offset = Offset.Zero,
        size: Size = Size.Unspecified,
        style: DrawStyle = Fill
    )
    
    /**
     * Draws a line between two points.
     */
    fun drawLine(
        color: Color,
        start: Offset,
        end: Offset,
        strokeWidth: Float = Stroke.HairlineWidth
    )
    
    /**
     * Draws a path.
     */
    fun drawPath(
        path: Path,
        color: Color,
        style: DrawStyle = Fill
    )
    
    /**
     * Draws a path with a Brush.
     */
    fun drawPath(
        path: Path,
        brush: Brush,
        style: DrawStyle = Fill
    )
    
    /**
     * Draws an image at the given offset.
     */
    fun drawImage(
        image: ImageBitmap,
        topLeft: Offset = Offset.Zero,
        paint: Paint = Paint()
    )
    
    /**
     * Draws a subsection of an image.
     */
    fun drawImageRect(
        image: ImageBitmap,
        srcOffset: IntOffset = IntOffset.Zero,
        srcSize: IntSize = IntSize(image.width, image.height),
        dstOffset: IntOffset = IntOffset.Zero,
        dstSize: IntSize = srcSize,
        paint: Paint = Paint()
    )
    
    /**
     * Draws vertices as triangles.
     */
    fun drawVertices(
        vertices: Vertices,
        blendMode: BlendMode,
        paint: Paint
    )
    
    /**
     * Saves the current drawing state.
     */
    fun save()
    
    /**
     * Restores the previously saved drawing state.
     */
    fun restore()
    
    /**
     * Translates the canvas.
     */
    fun translate(dx: Float, dy: Float)
    
    /**
     * Scales the canvas.
     */
    fun scale(sx: Float, sy: Float = sx)
    
    /**
     * Rotates the canvas.
     */
    fun rotate(degrees: Float)
    
    /**
     * Skews the canvas.
     */
    fun skew(sx: Float, sy: Float)
    
    /**
     * Clips the canvas to a rectangle.
     */
    fun clipRect(rect: Rect, clipOp: ClipOp = ClipOp.Intersect)
    
    /**
     * Clips the canvas to a path.
     */
    fun clipPath(path: Path, clipOp: ClipOp = ClipOp.Intersect)
}

/**
 * Drawing style for strokes and fills.
 */
sealed class DrawStyle {
    object Fill : DrawStyle()
    class Stroke(
        val width: Float = 0.0f,
        val miter: Float = DefaultMiter,
        val cap: StrokeCap = StrokeCap.Butt,
        val join: StrokeJoin = StrokeJoin.Miter,
        val pathEffect: PathEffect? = null
    ) : DrawStyle() {
        companion object {
            val HairlineWidth: Float
            val DefaultMiter: Float
        }
    }
}

Usage Examples:

// Custom drawing in a Canvas composable
Canvas(modifier = Modifier.size(200.dp)) { canvas ->
    // Draw filled rectangle
    canvas.drawRect(
        color = Color.Blue,
        topLeft = Offset(50.0f, 50.0f),
        size = Size(100.0f, 100.0f)
    )
    
    // Draw outlined circle
    canvas.drawCircle(
        color = Color.Red,
        radius = 40.0f,
        center = Offset(100.0f, 100.0f),
        style = Stroke(width = 4.0f)
    )
    
    // Draw gradient rectangle
    canvas.drawRect(
        brush = Brush.linearGradient(
            colors = listOf(Color.Yellow, Color.Green)
        ),
        topLeft = Offset(0.0f, 150.0f),
        size = Size(200.0f, 50.0f)
    )
}

Path System

Vector path operations for creating complex shapes and custom drawing paths.

/**
 * A Path encapsulates compound geometric paths.
 */
class Path {
    /**
     * Set this path to the empty path.
     */
    fun reset()
    
    /**
     * Move to the given coordinates without drawing a line.
     */
    fun moveTo(x: Float, y: Float)
    
    /**
     * Relative version of moveTo.
     */
    fun relativeMoveTo(dx: Float, dy: Float)
    
    /**
     * Add a line from the last point to the specified coordinates.
     */
    fun lineTo(x: Float, y: Float)
    
    /**
     * Relative version of lineTo.
     */
    fun relativeLineTo(dx: Float, dy: Float)
    
    /**
     * Add a quadratic bezier curve.
     */
    fun quadraticBezierTo(x1: Float, y1: Float, x2: Float, y2: Float)
    
    /**
     * Relative version of quadraticBezierTo.
     */
    fun relativeQuadraticBezierTo(dx1: Float, dy1: Float, dx2: Float, dy2: Float)
    
    /**
     * Add a cubic bezier curve.
     */
    fun cubicTo(x1: Float, y1: Float, x2: Float, y2: Float, x3: Float, y3: Float)
    
    /**
     * Relative version of cubicTo.
     */
    fun relativeCubicTo(dx1: Float, dy1: Float, dx2: Float, dy2: Float, dx3: Float, dy3: Float)
    
    /**
     * Add an arc.
     */
    fun arcTo(
        rect: Rect,
        startAngleDegrees: Float,
        sweepAngleDegrees: Float,
        forceMoveTo: Boolean
    )
    
    /**
     * Add a rectangle to the path.
     */
    fun addRect(rect: Rect)
    
    /**
     * Add an oval to the path.
     */
    fun addOval(oval: Rect)
    
    /**
     * Add a rounded rectangle to the path.
     */
    fun addRoundRect(
        roundRect: RoundRect
    )
    
    /**
     * Add a circle to the path.
     */
    fun addPath(path: Path, offset: Offset = Offset.Zero)
    
    /**
     * Close the current sub-path.
     */
    fun close()
    
    /**
     * Returns the bounds of this path.
     */
    fun getBounds(): Rect
    
    /**
     * Returns true if the path is empty.
     */
    fun isEmpty(): Boolean
    
    /**
     * Returns true if the path is convex.
     */
    fun isConvex(): Boolean
    
    /**
     * Set this path to the result of applying the path operation to the two paths.
     */
    fun op(path1: Path, path2: Path, operation: PathOperation): Boolean
    
    /**
     * Transform the path by the given matrix.
     */
    fun transform(matrix: Matrix)
}

/**
 * Path operations for combining paths.
 */
enum class PathOperation {
    Difference, Intersect, Union, Xor, ReverseDifference
}

/**
 * Path effects for modifying path drawing.
 */
abstract class PathEffect {
    companion object {
        /**
         * Create a dash path effect.
         */
        fun dashPathEffect(intervals: FloatArray, phase: Float = 0.0f): PathEffect
        
        /**
         * Create a corner path effect.
         */
        fun cornerPathEffect(radius: Float): PathEffect
        
        /**
         * Chain two path effects.
         */
        fun chainPathEffect(outer: PathEffect, inner: PathEffect): PathEffect
    }
}

Usage Examples:

// Creating custom shapes with Path
val customPath = Path().apply {
    moveTo(50.0f, 0.0f)
    lineTo(100.0f, 50.0f)
    lineTo(50.0f, 100.0f)
    lineTo(0.0f, 50.0f)
    close()
}

// Drawing the custom path
Canvas(modifier = Modifier.size(100.dp)) { canvas ->
    canvas.drawPath(
        path = customPath,
        color = Color.Green,
        style = Stroke(width = 3.0f)
    )
}

// Bezier curve example
val curvePath = Path().apply {
    moveTo(0.0f, 100.0f)
    cubicTo(50.0f, 0.0f, 150.0f, 0.0f, 200.0f, 100.0f)
}

Brush and Gradient System

Advanced painting system supporting gradients, patterns, and custom brushes.

/**
 * Defines a brush to draw shapes with. Can be a solid color, gradient, or pattern.
 */
abstract class Brush {
    companion object {
        /**
         * Creates a linear gradient brush.
         */
        fun linearGradient(
            colors: List<Color>,
            start: Offset = Offset.Zero,
            end: Offset = Offset.Infinite,
            tileMode: TileMode = TileMode.Clamp
        ): Brush
        
        /**
         * Creates a linear gradient brush with color stops.
         */
        fun linearGradient(
            vararg colorStops: Pair<Float, Color>,
            start: Offset = Offset.Zero,
            end: Offset = Offset.Infinite,
            tileMode: TileMode = TileMode.Clamp
        ): Brush
        
        /**
         * Creates a radial gradient brush.
         */
        fun radialGradient(
            colors: List<Color>,
            center: Offset = Offset.Unspecified,
            radius: Float = Float.POSITIVE_INFINITY,
            tileMode: TileMode = TileMode.Clamp
        ): Brush
        
        /**
         * Creates a radial gradient brush with color stops.
         */
        fun radialGradient(
            vararg colorStops: Pair<Float, Color>,
            center: Offset = Offset.Unspecified,
            radius: Float = Float.POSITIVE_INFINITY,
            tileMode: TileMode = TileMode.Clamp
        ): Brush
        
        /**
         * Creates a sweep gradient brush.
         */
        fun sweepGradient(
            colors: List<Color>,
            center: Offset = Offset.Unspecified
        ): Brush
        
        /**
         * Creates a sweep gradient brush with color stops.
         */
        fun sweepGradient(
            vararg colorStops: Pair<Float, Color>,
            center: Offset = Offset.Unspecified
        ): Brush
        
        /**
         * Creates a horizontal gradient brush.
         */
        fun horizontalGradient(
            colors: List<Color>,
            startX: Float = 0.0f,
            endX: Float = Float.POSITIVE_INFINITY,
            tileMode: TileMode = TileMode.Clamp
        ): Brush
        
        /**
         * Creates a vertical gradient brush.
         */
        fun verticalGradient(
            colors: List<Color>,
            startY: Float = 0.0f,
            endY: Float = Float.POSITIVE_INFINITY,
            tileMode: TileMode = TileMode.Clamp
        ): Brush
    }
}

/**
 * Solid color brush.
 */
class SolidColor(val value: Color) : Brush()

/**
 * Tile modes for gradients and patterns.
 */
enum class TileMode {
    Clamp, Repeat, Mirror, Decal
}

Usage Examples:

// Linear gradient
val linearBrush = Brush.linearGradient(
    colors = listOf(Color.Red, Color.Yellow, Color.Green),
    start = Offset.Zero,
    end = Offset(100.0f, 0.0f)
)

// Radial gradient with color stops
val radialBrush = Brush.radialGradient(
    0.0f to Color.White,
    0.5f to Color.Blue,
    1.0f to Color.Black,
    center = Offset(50.0f, 50.0f),
    radius = 50.0f
)

// Using brushes in drawing
Canvas(modifier = Modifier.size(100.dp)) { canvas ->
    canvas.drawRect(brush = linearBrush)
    canvas.drawCircle(
        brush = radialBrush,
        radius = 30.0f,
        center = Offset(50.0f, 50.0f)
    )
}

Image Handling

Comprehensive image loading, manipulation, and rendering system.

/**
 * Create an ImageBitmap from image file bytes.
 */
fun decodeImageFromByteArray(byteArray: ByteArray): ImageBitmap

/**
 * Represents a bitmap image.
 */
interface ImageBitmap {
    /**
     * Width of the ImageBitmap in pixels.
     */
    val width: Int
    
    /**
     * Height of the ImageBitmap in pixels.
     */
    val height: Int
    
    /**
     * ColorSpace of the ImageBitmap.
     */
    val colorSpace: ColorSpace
    
    /**
     * Indicates whether the ImageBitmap has an alpha channel.
     */
    val hasAlpha: Boolean
    
    /**
     * Prepares the bitmap to be drawn.
     */
    fun prepareToDraw()
    
    /**
     * Read the pixels from this bitmap.
     */
    fun readPixels(
        buffer: IntArray,
        startX: Int = 0,
        startY: Int = 0,
        width: Int = this.width,
        height: Int = this.height
    )
}

/**
 * Represents a Painter that can draw content.
 */
abstract class Painter {
    /**
     * The intrinsic size of the content.
     */
    abstract val intrinsicSize: Size
    
    /**
     * Draw the content.
     */
    protected abstract fun DrawScope.onDraw()
}

/**
 * Create a BitmapPainter from an ImageBitmap.
 */
fun BitmapPainter(
    image: ImageBitmap,
    srcOffset: IntOffset = IntOffset.Zero,
    srcSize: IntSize = IntSize(image.width, image.height),
    filterQuality: FilterQuality = DrawScope.DefaultFilterQuality
): Painter

/**
 * Content scaling options for images.
 */
object ContentScale {
    val Crop: ContentScale
    val Fit: ContentScale
    val FillHeight: ContentScale
    val FillWidth: ContentScale
    val FillBounds: ContentScale
    val Inside: ContentScale
    val None: ContentScale
}

Usage Examples:

// Loading and displaying an image
val imageBitmap = remember { decodeImageFromByteArray(imageBytes) }
val painter = remember { BitmapPainter(imageBitmap) }

// Using the painter in composables
Image(
    painter = painter,
    contentDescription = "Sample image",
    modifier = Modifier.size(200.dp),
    contentScale = ContentScale.Crop
)

// Custom drawing with ImageBitmap
Canvas(modifier = Modifier.size(200.dp)) { canvas ->
    canvas.drawImage(
        image = imageBitmap,
        topLeft = Offset(10.0f, 10.0f)
    )
    
    // Draw subsection of image
    canvas.drawImageRect(
        image = imageBitmap,
        srcOffset = IntOffset(0, 0),
        srcSize = IntSize(100, 100),
        dstOffset = IntOffset(50, 50),
        dstSize = IntSize(100, 100)
    )
}

Blend Modes and Effects

Advanced compositing and blending operations for creating sophisticated visual effects.

/**
 * Algorithms to use when painting on the canvas.
 */
enum class BlendMode {
    Clear, Src, Dst, SrcOver, DstOver, SrcIn, DstIn, SrcOut, DstOut,
    SrcAtop, DstAtop, Xor, Plus, Modulate, Screen, Overlay, Darken,
    Lighten, ColorDodge, ColorBurn, HardLight, SoftLight, Difference,
    Exclusion, Multiply, Hue, Saturation, Color, Luminosity
}

/**
 * Defines how a new pixel is merged with the existing pixel.
 */
class Paint {
    /**
     * Color used when drawing shapes.
     */
    var color: Color
    
    /**
     * Alpha value for transparency.
     */
    var alpha: Float
    
    /**
     * Blend mode to use when drawing.
     */
    var blendMode: BlendMode
    
    /**
     * Drawing style (fill or stroke).
     */
    var style: PaintingStyle
    
    /**
     * Stroke width for stroke style.
     */
    var strokeWidth: Float
    
    /**
     * Color filter to apply.
     */
    var colorFilter: ColorFilter?
    
    /**
     * Shader for custom paint effects.
     */
    var shader: Shader?
    
    /**
     * Path effect for stroke modification.
     */
    var pathEffect: PathEffect?
    
    /**
     * Antialiasing setting.
     */
    var isAntiAlias: Boolean
    
    /**
     * Filter quality for image drawing.
     */
    var filterQuality: FilterQuality
}

/**
 * Color filters for modifying paint colors.
 */
abstract class ColorFilter {
    companion object {
        /**
         * Create a tint color filter.
         */
        fun tint(color: Color, blendMode: BlendMode = BlendMode.SrcIn): ColorFilter
        
        /**
         * Create a color matrix filter.
         */
        fun colorMatrix(colorMatrix: ColorMatrix): ColorFilter
        
        /**
         * Create a lighting color filter.
         */
        fun lighting(multiply: Color, add: Color): ColorFilter
    }
}

Usage Examples:

// Using blend modes for special effects
Canvas(modifier = Modifier.size(200.dp)) { canvas ->
    // Draw base layer
    canvas.drawRect(
        color = Color.Red,
        size = Size(100.0f, 100.0f)
    )
    
    // Draw overlapping layer with blend mode
    val paint = Paint().apply {
        color = Color.Blue
        blendMode = BlendMode.Multiply
    }
    
    canvas.drawRect(
        color = Color.Blue,
        topLeft = Offset(50.0f, 50.0f),
        size = Size(100.0f, 100.0f)
    )
}

// Using color filters
val tintedPaint = Paint().apply {
    colorFilter = ColorFilter.tint(Color.Red, BlendMode.Modulate)
}

Install with Tessl CLI

npx tessl i tessl/maven-org-jetbrains-compose-ui--ui-uikitsimarm64

docs

composables.md

core-ui.md

graphics.md

index.md

input.md

ios-integration.md

layout.md

material-design.md

resources.md

state.md

text.md

window.md

tile.json