ข้อมูลเบื้องต้นเกี่ยวกับการวาดในช่องการเขียน
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
ดูวิธีวาดสิ่งที่กำหนดเองในเครื่องมือเขียน การวาดภาพที่กำหนดเองช่วยให้คุณปรับปรุงรูปลักษณ์ของแอปได้เมื่อองค์ประกอบในตัวไม่ครอบคลุมสิ่งที่แอปต้องการ
ข้อมูลสำคัญ
DrawScope
เป็น API การวาดแบบประกาศสถานะคงที่เพื่อวาดรูปร่าง เส้นทาง และอื่นๆ โดยไม่ต้องดูแลรักษาสถานะของคอมโพเนนต์ด้วยตนเอง
- ตัวแก้ไขการวาดหลายรายการช่วยให้คุณเข้าถึง
DrawScope
ซึ่งช่วยให้คุณวาดร่วมกับคอมโพสิเบิลอื่นๆ ได้ ดังนี้
drawBehind
: วาดหลังเนื้อหาคอมโพสิเบิล
drawWithContent
: มีประโยชน์สำหรับการเรียงลำดับเนื้อหาใหม่ คุณเลือกเวลาเรียกใช้เนื้อหาของคอมโพสิเบิลได้ ไม่ว่าจะก่อนหรือหลัง
drawWithCache
: แคชออบเจ็กต์จนกว่าขนาดจะเปลี่ยนแปลงหรือตัวแปรสถานะที่อ่านภายในจะเปลี่ยนแปลง
- ระบบพิกัดใน Compose จะเหมือนกับระบบมุมมอง
- การเรียกใช้การวาดและเลย์เอาต์ทั้งหมดจะดำเนินการในค่าพิกเซล ไม่ใช่
dp
หากต้องการวาดภาพในหน้าจอต่างๆ ให้สอดคล้องกัน ให้ใช้ dp
และแปลงเป็นพิกเซลก่อนวาด
- การเรียกใช้การวาดจะสัมพันธ์กับคอมโพสิเบิลหลักเสมอ
คอลเล็กชันที่มีคู่มือนี้
คู่มือนี้เป็นส่วนหนึ่งของคอลเล็กชันคู่มือฉบับย่อที่มีการดูแลจัดการ ซึ่งครอบคลุมเป้าหมายการพัฒนา Android ที่กว้างขึ้น ดังนี้
แสดงรูปภาพ
ดูเทคนิคการใช้ภาพสดใสที่ดึงดูดความสนใจเพื่อให้แอป Android ของคุณมีรูปลักษณ์ที่สวยงาม
ตัวอย่างเนื้อหาและโค้ดในหน้าเว็บนี้ขึ้นอยู่กับใบอนุญาตที่อธิบายไว้ในใบอนุญาตการใช้เนื้อหา Java และ OpenJDK เป็นเครื่องหมายการค้าหรือเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2025-02-06 UTC
[[["เข้าใจง่าย","easyToUnderstand","thumb-up"],["แก้ปัญหาของฉันได้","solvedMyProblem","thumb-up"],["อื่นๆ","otherUp","thumb-up"]],[["ไม่มีข้อมูลที่ฉันต้องการ","missingTheInformationINeed","thumb-down"],["ซับซ้อนเกินไป/มีหลายขั้นตอนมากเกินไป","tooComplicatedTooManySteps","thumb-down"],["ล้าสมัย","outOfDate","thumb-down"],["ปัญหาเกี่ยวกับการแปล","translationIssue","thumb-down"],["ตัวอย่าง/ปัญหาเกี่ยวกับโค้ด","samplesCodeIssue","thumb-down"],["อื่นๆ","otherDown","thumb-down"]],["อัปเดตล่าสุด 2025-02-06 UTC"],[],[],null,["# Intro to drawing in Compose\n\n\u003cbr /\u003e\n\nLearn how to draw something custom in Compose. With custom drawing, you can\nimprove the look and feel of your app when the built-in components don't cover\nexactly what your app needs. \n\nKey points\n----------\n\n- [`DrawScope`](/reference/kotlin/androidx/compose/ui/graphics/drawscope/DrawScope) is a declarative, stateless drawing API to draw shapes, paths, and more without needing to maintain the state of the component manually.\n- Several drawing modifiers give you access to `DrawScope`, letting you draw with other composables:\n - [`drawBehind`](/reference/kotlin/androidx/compose/ui/draw/package-summary#(androidx.compose.ui.Modifier).drawBehind(kotlin.Function1)): draws behind the composables content.\n - [`drawWithContent`](/reference/kotlin/androidx/compose/ui/draw/package-summary#(androidx.compose.ui.Modifier).drawWithContent(kotlin.Function1)): useful for rearranging content. You can choose when to call the content of the composable, either before or after.\n - [`drawWithCache`](/reference/kotlin/androidx/compose/ui/draw/package-summary#(androidx.compose.ui.Modifier).drawWithCache(kotlin.Function1)): caches the objects until the size changes or the state variables read inside change.\n- The coordinate system in Compose is the same as the view system.\n- All draw and layout calls are performed in pixel values, not [`dp`](/reference/kotlin/androidx/compose/ui/unit/package-summary#(kotlin.Int).dp()). To draw consistently across screens, use `dp` and convert to pixels before drawing.\n- Draw calls are always relative to the parent composable.\n\nCollections that contain this guide\n-----------------------------------\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\n### Display images\n\nDiscover techniques for using bright, engaging visuals to give your Android app a beautiful look and feel. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-images) \n\nHave questions or feedback\n--------------------------\n\nGo to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts. \n[Go to FAQ](/quick-guides/faq) [Leave feedback](https://issuetracker.google.com/issues/new?component=1573691&template=1993320)"]]