Jetpack Compose Academy · บทเรียน

drawWithCache และประสิทธิภาพ

หลีกเลี่ยงการสร้างออบเจ็กต์การวาดใหม่ทุกเฟรม

drawWithCache และประสิทธิภาพ เป็นบทเรียน Jetpack Compose Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Jetpack Compose Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Jetpack Compose Academy มีบทเรียนทั้งหมด 4 บทเรียน

บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ

Drawing Runs Often

Your Canvas lambda can run on every frame. Rebuilding heavy objects there, frame after frame, quietly drags down performance.

The Costly Objects

Things like Path, Brush, and Paint are not free to create. Allocating them on each draw wastes work the GPU never needed.

Enter drawWithCache

The drawWithCache modifier lets you build expensive objects once and reuse them. It splits setup from the actual drawing step.

Modifier.drawWithCache {
    // build once here
    onDrawBehind { /* draw each frame */ }
}

Build Block Runs Rarely

Code in the cache block only re-runs when the size or your read state changes. Put your Path and Brush creation right here.

Modifier.drawWithCache {
    val brush = Brush.linearGradient(colors)
    onDrawBehind { drawRect(brush) }
}

onDrawBehind

Use onDrawBehind to paint underneath the Composable's content. It gives you a DrawScope that runs on each frame, cheaply.

onDrawBehind {
    drawCircle(color = Color.Blue)
}

onDrawWithContent

Need to mix your art with the actual UI? onDrawWithContent lets you draw, call drawContent, and draw again around it.

onDrawWithContent {
    drawContent()
    drawRect(color = Color.Black, alpha = 0.2f)
}

Cache the Path

A chart Path is a classic win. Build it once in the cache block, then just drawPath it every frame without rebuilding.

val path = Path().apply { /* shape */ }
onDrawBehind { drawPath(path, Color.Green) }

React to Size

Inside the cache block you can read size safely. When the canvas resizes, your block re-runs and rebuilds objects to fit.

Avoid State Reads in Draw

Reading state during drawing can trigger extra work. Keep your draw block lean and move setup into the cache block instead.

Measure, Do Not Guess

Before optimizing, profile. The Layout Inspector and frame timings tell you what really stutters, so you fix the right thing.

Reuse Wherever You Can

The golden rule: build heavy objects once and reuse them. drawWithCache makes that pattern easy and your animations buttery smooth.

Quick Check

Where should you create an expensive Brush so it is not rebuilt every frame?

Recap

You learned to keep drawing fast: build heavy objects in the drawWithCache block, draw cheaply in onDrawBehind, and always measure first. Smooth frames! ⚡

คำถามที่พบบ่อย

บทเรียน “drawWithCache และประสิทธิภาพ” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “drawWithCache และประสิทธิภาพ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Jetpack Compose Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Jetpack Compose Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “drawWithCache และประสิทธิภาพ”

หลีกเลี่ยงการสร้างออบเจ็กต์การวาดใหม่ทุกเฟรม คุณปฏิบัติ Jetpack Compose Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Jetpack Compose Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Jetpack Compose Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “drawWithCache และประสิทธิภาพ” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Jetpack Compose Academy นี้ได้ไหม

ได้ บทเรียน Jetpack Compose Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Jetpack Compose Academy