Canvas i Android: vad är det, Canvas-klass och draw-metoder

Vad är Canvas i Android

Canvas — är den centrala 2D-grafikklassen i Android som tillhandahåller metoder för ritning på en yta. Varje Canvas är kopplad till en Bitmap — ett minnesområde där resultaten av ritoperationer skrivs. När en View ritas om skickar systemet till onDraw() en Canvas som redan är kopplad till denna vy's buffert.

Canvas arbetar i ett koordinatsystem där (0,0) är det övre vänstra hörnet, X-axeln går åt höger och Y-axeln nedåt. Alla ritoperationer använder Canvas aktuella tillstånd, inklusive transformationsmatris, klippområde (clip) och Paint-stil. Enligt Android Documentation (2025) innehåller Canvas API över 30 draw*-metoder för olika typer av grafiska primitiver.

Canvas och hårdvaruacceleration

Från och med Android 3.0 (API 11) stöder Canvas hårdvaruacceleration via DisplayList. I accelererat läge skrivs Canvas-operationer till DisplayList och exekveras sedan på GPU:n. Detta ger en betydande prestandaökning men inför begränsningar: vissa Canvas-operationer (clipPath med icke-Path-klipp) stöds inte i accelererat läge.

Huvudsakliga Canvas-metoder för ritning

Canvas tillhandahåller en uppsättning metoder för att rita grundläggande primitiver. Varje metod tar emot geometriska parametrar och ett Paint-objekt som bestämmer den visuella stilen.

Varje metod kan anropas i valfri ordning — Canvas ritar i anropsordningen och lägger nya element ovanpå tidigare. För komplexa kompositioner används tekniken med flerskiktsritning med sparning och återställning av Canvas tillstånd.

Paint-klass: konfiguration av stilar och effekter

Paint — är klassen som bestämmer hur Canvas ska rita. Utan Paint är Canvas-metoderna värdelösa — den ställer in färg, linjetjocklek, fyllningsstil, textstorlek, effekter (skugga, gradient, oskärpa) och blandningsläge.

Paint har viktiga egenskaper: color (färg), style (FILL, STROKE eller FILL_AND_STROKE), strokeWidth (linjetjocklek), textSize (textstorlek), isAntiAlias (kantutjämning), shader (gradient eller bild). Att skapa ett Paint-objekt är en dyr operation, därför bör det skapas en gång och återanvändas.

private val fillPaint = Paint().apply {
    color = Color.parseColor("#FF6200EE")
    style = Paint.Style.FILL
    isAntiAlias = true
}

private val strokePaint = Paint().apply {
    color = Color.WHITE
    style = Paint.Style.STROKE
    strokeWidth = 4f
    isAntiAlias = true
}

override fun onDraw(canvas: Canvas) {
    super.onDraw(canvas)
    canvas.drawCircle(100f, 100f, 80f, fillPaint)
    canvas.drawCircle(100f, 100f, 80f, strokePaint)
}

I detta exempel används två Paint: en för att fylla cirkeln med lila, den andra för vit kontur. Uppdelningen i fill och stroke är en standardpraxis som möjliggör flexibel hantering av utseendet utan att återskapa objekt.

Shader och gradienter

För gradientfyllningar accepterar Paint en Shader — underklasser LinearGradient, RadialGradient, SweepGradient. Shader kopplas till Paint via metoden setShader() och bestämmer hur färgen förändras över ritområdet.

Canvas-transformeringar: translate, rotate, scale

Canvas stöder matristransformeringar av koordinatsystemet: translate() (förskjutning), rotate() (rotation), scale() (skalning) och skew() (snedställning). Transformeringar ackumuleras: varje efterföljande anrop appliceras ovanpå tidigare.

Hantering av transformationsstacken sker via save() och restore(). save() sparar Canvas aktuella tillstånd (matris, clip) i stacken, restore() återställer det senast sparade tillståndet. Mellan save() och restore() kan det finnas nästlade transformeringar.

override fun onDraw(canvas: Canvas) {
    super.onDraw(canvas)

    canvas.save() // Spara initialt tillstånd
    canvas.translate(100f, 100f) // Flytta origo

    // Första kvadraten
    canvas.drawRect(0f, 0f, 50f, 50f, fillPaint)

    canvas.save() // Spara efter flytt
    canvas.rotate(45f, 25f, 25f) // Rotera runt kvadratens centrum

    // Roterad kvadrat
    canvas.drawRect(0f, 0f, 50f, 50f, strokePaint)
    canvas.restore() // Återställ efter rotation

    canvas.restore() // Återställ initialt tillstånd
}

Använd alltid save() före transformeringar och restore() efter deras slutförande. Obalanserade save/restore leder till ackumulering av matrisen och felaktig ritning av efterföljande element.

Canvas med Bitmap och Path för komplex grafik

För komplex grafik kombineras Canvas med Bitmap och Path. Bitmap används för att ladda bilder och cachelagra renderade ramar. Path — för att bygga godtyckliga Bezier-kurvor, polygoner och komplexa konturer.

Offscreen Bitmap-buffert

Teknik för offscreen-rendering: en Bitmap skapas, en komplex scen ritas på den via en separat Canvas, och sedan visas den färdiga Bitmap i onDraw() via drawBitmap(). Detta gör det möjligt att uppdatera komplex grafik utan att helt rita om varje ram.

private var offscreenBitmap: Bitmap? = null
private var offscreenCanvas: Canvas? = null

fun buildOffscreenScene(width: Int, height: Int) {
    offscreenBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888)
    offscreenCanvas = Canvas(offscreenBitmap)

    // Rendera scen en gång
    offscreenCanvas!!.drawColor(Color.WHITE)
    drawGrid(offscreenCanvas!!)
    drawComplexShape(offscreenCanvas!!)
}

override fun onDraw(canvas: Canvas) {
    super.onDraw(canvas)
    offscreenBitmap?.let { canvas.drawBitmap(it, 0f, 0f, null) }
}

Path används för att bygga komplexa konturer: Bezier-kurvor (quadTo, cubicTo), bågar (arcTo), linjer (lineTo). Path kan vara sluten (close()) för fyllda former eller öppen för linjer. Huvudmetoderna drawPath() kombinerar Path och Paint för slutlig ritning.

Optimering av Canvas-ritning

Prestandan för Canvas-ritning påverkar direkt applikationens FPS. Huvudproblem: överdrivna allokeringar i onDraw(), frekventa invalidate() och suboptimal användning av hårdvaruacceleration.

Skapa objekt utanför onDraw()

Paint, Path, Rect, RectF och andra objekt bör skapas en gång i initieraren eller setup()-metoden. Varje allokering i onDraw() belastar garbage collection, vilket leder till mikro-hackningar. Undantag — static eller companion object för oföränderliga objekt.

Använd clipRect() för att begränsa område

Om en stor del av View är dold utanför det synliga området (t.ex. i ScrollView), använd canvas.clipRect() för att begränsa ritningen. Hårdvaruacceleration optimerar i detta fall ytterligare beskärning av osynliga pixlar.

override fun onDraw(canvas: Canvas) {
    super.onDraw(canvas)

    // Begränsa till synligt område
    canvas.save()
    canvas.clipRect(scrollX, scrollY, scrollX + width, scrollY + height)

    // Rendera stor scen
    renderScene(canvas)
    canvas.restore()
}

Använd View.setLayerType() med LAYER_TYPE_HARDWARE för View med komplex Canvas-grafik som sällan uppdateras. För ofta uppdaterade animationer använder du LAYER_TYPE_NONE för att undvika dyr uppdatering av hårdvarulagret. Profilera genom GPU Profile Rendering och Android Studio Profiler.