Paint sa Android: ano ito, mga paraan ng pag-configure at paano ito gumagana

Ano ang Paint sa Android?

Paint — isang klase mula sa package na android.graphics na nag-iimbak ng lahat ng setting ng estilo para sa mga operasyon ng pagguhit sa Canvas. Hindi ito naglalaman ng mga pixel mismo, ngunit tinutukoy kung paano magmumukha ang mga linya, hugis at text. Bawat tawag sa pamamaraan ng Canvas — drawCircle, drawLine, drawText — gumagamit ng Paint para sa interpretasyon ng visual na representasyon.

Ang Paint ay gumagana sa prinsipyo ng isang configuration object. Gumawa ka ng instance, itakda ang mga parameter nang isang beses at gamitin muli ito para sa maraming operasyon. Pinapaliit nito ang bilang ng mga alokasyon sa loop ng pagguhit at pinapataas ang performance ng hanggang 30% kumpara sa paggawa ng bagong object bawat frame. Ayon sa Google I/O 2024, ang pag-optimize ng Paint ay isa sa mga pangunahing kasanayan para sa pag-abot ng 60 FPS sa custom na graphics.

Lahat ng setting ng Paint ay nahahati sa ilang kategorya: kulay at transparency, estilo ng stroke at pagpuno, paggawa gamit ang text at mga font, mga epekto ng blur at masking. Bawat kategorya ay pinamamahalaan ng mga hiwalay na setter method na maaaring pagsamahin sa anumang kombinasyon. Ginagawa nitong flexible ang Paint API, ngunit nangangailangan ng pag-unawa sa interaksyon ng mga parameter — halimbawa, ang Style ay nakakaapekto kung ang Shader ay inilalapat sa contour o sa pagpuno.

Kulay at transparency sa Paint

setColor — ang pangunahing pamamaraan para sa pagtatakda ng kulay para sa lahat ng kasunod na operasyon ng pagguhit. Ang kulay ay ipinapasa sa ARGB format (32-bit integer), kung saan ang nangungunang 8 bits ay ang alpha channel, at ang natitira ay ang pula, berde at asul na channel. Ang halagang 0xFF0000FF ay nagtatakda ng opaque na kulay asul.

Pamamahala ng alpha channel

Ang pamamaraang setAlpha ay nagbibigay-daan sa independiyenteng pagsasaayos ng transparency sa saklaw mula 0 (ganap na transparent) hanggang 255 (ganap na opaque). Hindi tulad ng pagtukoy ng alpha sa setColor, ang pamamaraang ito ay hindi nakakaapekto sa nakatakda nang kulay — mino-modulate lamang nito ang pangkalahatang transparency. Ito ay maginhawa para sa mga animation ng paglitaw at pagkawala ng mga elemento nang walang pagbabago ng kulay.

ColorFilter para sa pagwawasto ng kulay

ColorFilter — mekanismo para sa pagbabago ng kulay ng bawat pixel bago iguhit. Tatlong mode ang sinusuportahan: LightingColorFilter para sa pagpaparami at pagdaragdag ng mga channel, PorterDuffColorFilter para sa overlay gamit ang blending mode at ColorMatrixColorFilter para sa buong matrix transformation. Ang ColorFilter ay inilalapat pagkatapos ng Shader, ngunit bago ang output sa Canvas.

Para sa karamihan ng mga gawain, sapat na ang standard na setColor o setAlpha. Ang ColorFilter ay pangunahing ginagamit para sa mga epekto ng pagkawala ng kulay, sepia o pagbabaligtad. Ang paggamit ng ColorFilter ay nagpapataas ng load ng GPU, kaya inirerekomenda ng Google na bawasan ang paggamit nito sa mga paulit-ulit na tawag sa onDraw.

Estilo at kapal ng linya

Ang pamamaraang setStyle ay tumatanggap ng isa sa tatlong halaga ng Paint.Style: FILL (pagpuno), STROKE (contour) o FILL_AND_STROKE (sabay-sabay). Depende sa pagpili ng estilo, ang hugis ay ipapakita bilang silweta, balangkas o contour na may panloob na pagpuno. Bilang default, ang Paint ay nilikha na may estilo na FILL.

Kapal ng linya at mga koneksyon

setStrokeWidth nagtatakda ng kapal ng linya sa mga pixel para sa mode na STROKE. Para sa mga bilugan na hugis at bilugan na sulok, ginagamit ang setStrokeCap (Cap.ROUND, BUTT, SQUARE) at setStrokeJoin (Join.MITER, ROUND, BEVEL). Ang mga parameter na ito ay kritikal na nakakaapekto sa hitsura ng mga graph, path at frame sa mga custom na View.

Sa kapal na mas mababa sa 1 pixel, ang linya ay iginuhit na may subpixel precision, ngunit maaaring magmukhang malabo sa mga screen na may mababang density. Para sa Retina display ng Android gamitin ang TypedValue.applyDimension para sa conversion ng dp sa pixels. Ang kapal na 2 dp ay nagbibigay ng malinaw na visibility sa karamihan ng mga device.

Mga pattern ng pagkudkod (DashPathEffect)

DashPathEffect lumilikha ng mga putol-putol at guhit-guhit na linya. Ang constructor ay tumatanggap ng array ng mga haba ng alternatibong mga guhit at puwang at paunang phase shift. Halimbawa, ang array [10, 5, 3, 5] ay lumilikha ng linya na may mahabang guhit, maikling puwang, maikling guhit at puwang. Ang epektong ito ay aktibong ginagamit sa mga graphic editor at tool para sa anotasyon.

Ang pagsasama-sama ng mga estilo ay ginagawa sa pamamagitan ng setPathEffect. Sa pamamagitan ng pagsasama ng CornerPathEffect, DashPathEffect at DiscretePathEffect, maaaring lumikha ng mga kumplikadong visual na linya para sa mga diagram, caption at dekoratibong elemento. Bawat PathEffect ay kinakalkula sa CPU, kaya sa mga animation na may maraming linya inirerekomenda na i-rasterize muna ang epekto sa Bitmap.

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))
}

Mga font at pag-render ng text

Typeface — object na tumutukoy sa uri ng letra para sa lahat ng text operation ng Paint. Sinusuportahan ng Android ang mga system font (Roboto, Noto Sans), custom na font mula sa assets resources at mga font na nada-download sa pamamagitan ng Downloadable Fonts API. Ang pagtatakda ng Typeface ay ginagawa sa pamamagitan ng setTypeface sa instance ng Paint.

Sukat ng text at agwat sa pagitan ng mga linya

Ang pamamaraang setTextSize ay nagtatakda ng sukat ng font sa mga pixel. Para sa tamang pagpapakita sa iba't ibang screen, inirerekomenda na tukuyin ang sukat sa sp gamit ang TypedValue.applyDimension. Ang agwat sa pagitan ng mga linya ay inaayos sa pamamagitan ng setTextScaleX para sa pahalang na pag-unat at kasama sa built-in na suporta para sa MultiLine text sa pamamagitan ng Canvas.drawText.

Para sa pagkakahanay ng text ginagamit ang setTextAlign na may mga halagang LEFT, CENTER at RIGHT. Sa CENTER, ang x coordinate na ipinasa sa drawText ay nagiging gitnang punto ng text — ito ay lalong maginhawa para sa mga caption sa ilalim ng mga icon at mga heading sa loob ng mga hugis. Para sa tumpak na pagpoposisyon ginagamit ang mga pamamaraang measureText at getTextBounds, na nagbabalik ng lapad at hangganan na parihaba ng text.

Salungguhit at strikethrough

setUnderlineText at setStrikeThruText ay nag-a-activate ng salungguhit at strikethrough. Ang mga parameter na ito ay gumagana sa antas ng uri ng letra at inilalapat sa lahat ng text na iginuhit ng nasabing Paint. Para sa flexible na pag-format ng iba't ibang bahagi ng parehong linya, gumamit ng mga hiwalay na Paint object na may iba't ibang setting o lumipat ng mga parameter sa pagitan ng mga tawag sa drawText.

Mga gradient at advanced na epekto

Shader — base na klase para sa pagpuno ng mga hugis ng mga gradient, bitmap texture at composite. Sa pamamagitan ng pamamaraang setShader ay maaaring italaga ang alinman sa mga subclass: LinearGradient, RadialGradient, SweepGradient, BitmapShader o ComposeShader. Pinapalitan ng Shader ang kulay na itinakda ng setColor at inilalapat sa lahat ng iginuhit na elemento.

Linear at radial gradient

LinearGradient lumilikha ng maayos na paglipat sa pagitan ng dalawa o higit pang mga kulay sa kahabaan ng isang tuwid na linya. Ang constructor ay tumatanggap ng simula at dulo na puntos, array ng mga kulay at kanilang mga posisyon (tile mode). Tinutukoy ng tile mode ang pag-uugali sa labas ng gradient: CLAMP (pag-uulit ng huling kulay), MIRROR (pagsalamin) o REPEAT (pag-uulit). Ang LinearGradient ay aktibong ginagamit para sa background fill at progress bar.

RadialGradient lumilikha ng pabilog na gradient mula sa gitna patungo sa mga gilid. Ang gitna ay tinutukoy ng mga coordinate, ang radius ay tumutukoy sa zone ng paglipat ng kulay. Ang hitsura ng radial gradient ay kahawig ng pag-iilaw mula sa isang point source — ito ay madalas na ginagamit para sa simulation ng pagkinang ng mga button at pag-iilaw ng mga aktibong elemento.

Blur at anino (BlurMaskFilter)

BlurMaskFilter nagdaragdag ng epekto ng blur sa paligid ng mga iginuhit na elemento. Ang constructor ay tumatanggap ng radius ng blur at estilo: NORMAL (blur sa lahat ng direksyon), INNER (sa loob lang ng hugis), OUTER (sa labas lang) at SOLID (hugis + panlabas na blur). Ang BlurMaskFilter ay gumagana sa anumang uri ng Paint at madalas na ginagamit para sa paglikha ng mga anino at epekto ng pagkinang.

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))
}

Halimbawa ng paggamit ng Paint sa Canvas

Tingnan natin ang isang kumpletong halimbawa ng custom na View na gumuguhit ng bilog na may gradient fill at text caption. Ang kombinasyon ng Paint at Canvas ay nagbibigay-daan sa paglikha ng kumplikadong graphics na may minimal na code. Lahat ng setting ay inilipat sa initialization para sa performance.

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("Gradient", 200f, 210f, textPaint)
    }
}

Sa code ay ginagamit ang dalawang hiwalay na Paint object: isa para sa pagpuno ng bilog ng radial gradient, ang pangalawa para sa text na may anino sa pamamagitan ng BlurMaskFilter. Ang ganitong paghihiwalay ay nagbibigay-daan sa independiyenteng pag-configure ng mga parameter at pag-iwas sa pag-reset ng estado ng Paint sa pagitan ng pagguhit ng iba't ibang uri ng elemento. Para sa pagtaas ng performance, ang parehong Paint ay nilikha sa constructor, hindi sa onDraw.

Sa pag-scale sa mga device na may iba't ibang pixel density, ang mga halaga ng sukat ay dapat kalkulahin muli sa pamamagitan ng TypedValue.applyDimension. Kung wala ito, ang text at gradient ay magmumukhang iba sa mdpi at xxxhdpi na screen. Sa halimbawa, ang sukat ng text ay nakatakda sa sp, na awtomatikong umaangkop sa mga system setting ng sukat ng font ng user.