Paint Androidban: mi ez, konfigurációs metódusok és hogyan működik

Mi a Paint Androidban?

Paint — egy osztály az android.graphics csomagból, amely a stílusbeállításokat tárolja a Canvas rajzolási műveleteihez. Nem tartalmazza magukat a pixeleket, hanem meghatározza, hogy a vonalak, alakzatok és szöveg hogyan fognak kinézni. A Canvas metódusainak minden hívása — drawCircle, drawLine, drawText — a Paintet használja a vizuális megjelenítés értelmezéséhez.

A Paint konfigurációs objektum elvén működik. Létrehozol egy példányt, egyszer beállítod a paramétereket, és újra felhasználod több művelethez. Ez minimalizálja az allokációk számát a rajzolási ciklusban, és akár 30%-kal növeli a teljesítményt az új objektum képkockánkénti létrehozásához képest. A Google I/O 2024 szerint a Paint optimalizálása az egyik kulcsgyakorlat a 60 FPS eléréséhez egyedi grafikában.

A Paint összes beállítása több kategóriába oszlik: szín és átlátszóság, körvonal és kitöltés stílusa, munka szöveggel és betűtípusokkal, elmosási és maszkolási effektek. Minden kategóriát külön setter metódusok kezelnek, amelyek tetszőleges kombinációban használhatók. Ez rugalmassá teszi a Paint API-t, de megköveteli a paraméterek kölcsönhatásának megértését — például a Style befolyásolja, hogy a Shader a kontúrra vagy a kitöltésre vonatkozik-e.

Szín és átlátszóság a Paintben

setColor — a fő metódus a szín beállításához az összes következő rajzolási művelethez. A szín ARGB formátumban (32 bites egész szám) kerül átadásra, ahol a felső 8 bit az alfacsatorna, a többi pedig a piros, zöld és kék csatorna. A 0xFF0000FF érték átlátszatlan kék színt állít be.

Alfacsatorna kezelése

A setAlpha metódus lehetővé teszi az átlátszóság független szabályozását 0 (teljesen átlátszó) és 255 (teljesen átlátszatlan) között. Ellentétben az alfa megadásával a setColorban, ez a metódus nem befolyásolja a már beállított színárnyalatot — csak az általános átlátszóságot modulálja. Ez kényelmes az elemek megjelenésének és eltűnésének animációihoz színváltoztatás nélkül.

ColorFilter színkorrekcióhoz

ColorFilter — mechanizmus az egyes pixelek színének átalakításához a rajzolás előtt. Három mód támogatott: LightingColorFilter a csatornák szorzásához és összeadásához, PorterDuffColorFilter átfedéshez keverési módokkal és ColorMatrixColorFilter teljes mátrix transzformációhoz. A ColorFilter a Shader után, de a Canvas kimenet előtt kerül alkalmazásra.

A legtöbb feladathoz elegendő a standard setColor vagy setAlpha. A ColorFilter főként színtelenítési, szépia vagy invertálási effektekhez használatos. A ColorFilter használata növeli a GPU terhelését, ezért a Google javasolja a használatának minimalizálását a ciklikus onDraw hívásokban.

Vonal stílusa és vastagsága

A setStyle metódus a Paint.Style három értékének egyikét fogadja el: FILL (kitöltés), STROKE (kontúr) vagy FILL_AND_STROKE (egyszerre). A stílusválasztástól függ, hogy az alakzat sziluettként, vázlatként vagy kontúrként belső kitöltéssel jelenik-e meg. Alapértelmezés szerint a Paint FILL stílussal jön létre.

Vonalvastagság és kapcsolódások

setStrokeWidth beállítja a vonalvastagságot pixelben a STROKE módhoz. Kerekített alakzatokhoz és lekerekített sarkokhoz a setStrokeCap (Cap.ROUND, BUTT, SQUARE) és setStrokeJoin (Join.MITER, ROUND, BEVEL) használatosak. Ezek a paraméterek kritikus hatással vannak a grafikonok, útvonalak és keretek megjelenésére egyéni View-kban.

1 pixelnél kisebb vastagságnál a vonal szubpixel pontossággal rajzolódik, de elmosódottnak tűnhet az alacsony sűrűségű képernyőkön. Android Retina kijelzőkhöz használd a TypedValue.applyDimension dp pixellé konvertálásához. A 2 dp vastagság tiszta láthatóságot biztosít a legtöbb eszközön.

Sraffozási minták (DashPathEffect)

DashPathEffect pontozott és szaggatott vonalakat hoz létre. A konstruktor elfogad egy tömböt a váltakozó szakaszok és hézagok hosszaiból és egy kezdeti fáziseltolást. Például a [10, 5, 3, 5] tömb egy hosszú szakasszal, rövid hézaggal, rövid szakasszal és hézaggal rendelkező vonalat hoz létre. Ezt az effektet aktívan használják grafikus szerkesztőkben és annotációs eszközökben.

A stílusok kombinálása a setPathEffect segítségével történik. A CornerPathEffect, DashPathEffect és DiscretePathEffect kombinálásával összetett vizuális vonalak hozhatók létre diagramokhoz, feliratokhoz és díszítő elemekhez. Minden PathEffect a CPU-n számítódik, ezért sok vonalat tartalmazó animációkban ajánlott az effektet előre raszterizálni Bitmapbe.

val paint = Paint().apply {
    setStyle(Paint.Style.STROKE)
    setStrokeWidth(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 2f, resources.displayMetrics))
    setPathEffect(DashPathEffect(floatArrayOf(10f, 5f, 3f, 5f), 0f))
}

Betűtípusok és szöveg megjelenítése

Typeface — objektum, amely meghatározza a betűkészletet a Paint összes szöveges műveletéhez. Az Android támogatja a rendszerbetűtípusokat (Roboto, Noto Sans), egyéni betűtípusokat az assets erőforrásokból és a Downloadable Fonts API-n keresztül letölthető betűtípusokat. A Typeface beállítása setTypeface segítségével történik a Paint példányon.

Szövegméret és sorköz

A setTextSize metódus beállítja a betűméretet pixelben. A különböző képernyőkön való helyes megjelenítéshez ajánlott a méretet sp-ben megadni a TypedValue.applyDimension segítségével. A sorköz a setTextScaleX segítségével állítható be vízszintes nyújtáshoz, és a MultiLine szöveg beépített támogatása tartalmazza a Canvas.drawText-en keresztül.

A szöveg igazításához a setTextAlign használatos LEFT, CENTER és RIGHT értékekkel. CENTER esetén a drawText-nek átadott x koordináta a szöveg középpontjává válik — ez különösen kényelmes az ikonok alatti feliratokhoz és az alakzatokon belüli címekhez. A pontos pozícionáláshoz a measureText és getTextBounds metódusok használatosak, amelyek visszaadják a szöveg szélességét és határoló téglalapját.

Aláhúzás és áthúzás

A setUnderlineText és setStrikeThruText bekapcsolja az aláhúzást és áthúzást. Ezek a paraméterek a betűkészlet szintjén működnek, és az adott Paint által rajzolt összes szövegre vonatkoznak. Ugyanazon sor különböző részeinek rugalmas formázásához használj külön Paint objektumokat eltérő beállításokkal, vagy kapcsold át a paramétereket a drawText hívások között.

Gradiensek és haladó effektek

Shader — alaposztály alakzatok kitöltésére gradiensekkel, bittérképes textúrákkal és kompozitokkal. A setShader metóduson keresztül bármelyik alosztály hozzárendelhető: LinearGradient, RadialGradient, SweepGradient, BitmapShader vagy ComposeShader. A Shader helyettesíti a setColor által beállított színt, és az összes rajzolt elemre vonatkozik.

Lineáris és radiális gradiensek

LinearGradient sima átmenetet hoz létre két vagy több szín között egy egyenes mentén. A konstruktor elfogadja a kezdő és végpontokat, színek tömbjét és azok pozícióit (csempe mód). A csempe mód meghatározza a viselkedést a gradienseken kívül: CLAMP (az utolsó szín ismétlése), MIRROR (tükrözés) vagy REPEAT (ismétlés). A LinearGradient aktívan használatos háttérkitöltésekhez és folyamatjelző sávokhoz.

RadialGradient kör alakú gradienst hoz létre a középponttól a szélek felé. A középpontot koordináták határozzák meg, a sugár a színátmenet zónáját definiálja. A radiális gradiens megjelenése egy pontszerű fényforrás megvilágítására emlékeztet — ezt gyakran használják gombok ragyogásának és aktív elemek kiemelésének szimulálására.

Elmosás és árnyékok (BlurMaskFilter)

BlurMaskFilter elmosási effektet ad a rajzolt elemek köré. A konstruktor elfogadja az elmosás sugarát és stílusát: NORMAL (elmosás minden irányban), INNER (csak az alakzaton belül), OUTER (csak kívül) és SOLID (alakzat + külső elmosás). A BlurMaskFilter bármilyen Paint típussal működik, és gyakran használatos árnyékok és ragyogási effektek létrehozásához.

val paint = Paint().apply {
    setShader(LinearGradient(
        0f, 0f, width, height,
        intArrayOf(Color.RED, Color.BLUE),
        null,
        Shader.TileMode.CLAMP
    ))
    setMaskFilter(BlurMaskFilter(20f, BlurMaskFilter.Blur.NORMAL))
}

Paint használati példa Canvas-szal

Nézzünk egy teljes példát egy egyéni View-ra, amely egy kört rajzol gradiens kitöltéssel és szöveges felirattal. A Paint és Canvas kombinációja lehetővé teszi összetett grafika létrehozását minimális kóddal. Az összes beállítás a teljesítmény érdekében az inicializálásba került.

class GradientCircleView@JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null
) : View(context, attrs) {

    private val fillPaint = Paint().apply {
        setShader(RadialGradient(
            0f, 0f, 200f,
            intArrayOf(Color.CYAN, Color.DKGRAY),
            null, Shader.TileMode.CLAMP
        ))
    }

    private val textPaint = Paint().apply {
        setColor(Color.WHITE)
        setTextSize(TypedValue.applyDimension(
            TypedValue.COMPLEX_UNIT_SP, 24f, resources.displayMetrics
        ))
        setTextAlign(Paint.Align.CENTER)
        setMaskFilter(BlurMaskFilter(5f, BlurMaskFilter.Blur.NORMAL))
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        canvas.drawCircle(200f, 200f, 150f, fillPaint)
        canvas.drawText("Gradiens", 200f, 210f, textPaint)
    }
}

A kódban két külön Paint objektumot használunk: egyet a kör radiális gradienssel való kitöltésére, a másodikat a szöveghez árnyékkal a BlurMaskFilter segítségével. Ez a szétválasztás lehetővé teszi a paraméterek független beállítását és elkerüli a Paint állapotának visszaállítását a különböző elem típusok rajzolása között. A teljesítmény növeléséhez mindkét Paint a konstruktorban jön létre, nem az onDraw-ban.

A különböző pixelsűrűségű eszközökön történő méretezéskor a méretértékeket a TypedValue.applyDimension segítségével kell átszámolni. Enélkül a szöveg és a gradiens másképp fog kinézni mdpi és xxxhdpi képernyőkön. A példában a szöveg mérete sp-ben van beállítva, ami automatikusan alkalmazkodik a felhasználó rendszer betűméret beállításaihoz.