DrawScope: เส้น สี่เหลี่ยม และวงกลม
วาดรูปทรงพื้นฐานลงบนผืนผ้าใบ
DrawScope: เส้น สี่เหลี่ยม และวงกลม เป็นบทเรียน Jetpack Compose Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Jetpack Compose Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Jetpack Compose Academy มีบทเรียนทั้งหมด 4 บทเรียน
ทำความรู้จัก Canvas
Composable Canvas มอบพื้นผิววาดภาพว่างเปล่าให้คุณ ภายในนั้นคุณจะวาดพิกเซลโดยตรง แทนการซ้อน Composable อื่น ๆ
Canvas(modifier = Modifier.size(200.dp)) {
// drawing goes here
}ภายใน DrawScope
แลมบ์ดาที่คุณส่งให้ Canvas จะทำงานภายใน DrawScope ตัวรับนี้มอบฟังก์ชันวาดภาพและขนาดปัจจุบันให้คุณใช้งาน
รู้จักขนาดของคุณ
DrawScope เปิดให้ใช้ ขนาด ซึ่งเป็นพื้นที่ที่คุณวาดได้ อ่าน size.width และ size.height เพื่อให้งานวาดของคุณปรับตามพื้นที่ที่ได้รับ
Canvas(Modifier.fillMaxSize()) {
val w = size.width
val h = size.height
}วาดเส้น
ใช้ drawLine เพื่อเชื่อมจุดสองจุด คุณต้องส่งสี ค่า Offset เริ่มต้น ค่า Offset สิ้นสุด และความกว้างของเส้น
drawLine(
color = Color.Blue,
start = Offset(0f, 0f),
end = Offset(size.width, size.height),
strokeWidth = 4f
)พิกเซลเป็นค่าทศนิยม
พิกัดทุกค่าที่นี่เป็น Float ในหน่วยพิกเซล ไม่ใช่ dp จุดกำเนิด (0,0) อยู่ที่มุมซ้ายบน โดย x เพิ่มไปทางขวา และ y เพิ่มลงด้านล่าง
Offset บอกทิศทาง
Offset เป็นเพียงคู่ค่า x และ y คุณจะสร้างตำแหน่งของรูปร่างเกือบทุกชนิดจาก Offset ดังนั้นจึงพบสิ่งนี้อยู่ทั่วทั้งพื้นที่วาด
val center = Offset(size.width / 2, size.height / 2)วาดสี่เหลี่ยม
เรียกใช้ drawRect พร้อมสี ค่า Offset ของ topLeft และ Size หากไม่ระบุ topLeft ระบบจะเติมเต็มพื้นที่วาดทั้งหมดให้คุณ
drawRect(
color = Color.Green,
topLeft = Offset(20f, 20f),
size = Size(100f, 60f)
)วาดวงกลม
ใช้ drawCircle พร้อมสี รัศมี และ Offset จุดศูนย์กลาง จัดให้อยู่กึ่งกลางพื้นที่วาด แล้วคุณจะได้จุดที่วางไว้อย่างพอดี
drawCircle(
color = Color.Red,
radius = 50f,
center = center
)เติมสีหรือลากเส้นขอบ
รูปร่างแต่ละชนิดรับ รูปแบบ ค่าเริ่มต้นคือการเติมสีทึบ แต่ให้ส่ง Stroke เพื่อวาดเฉพาะเส้นขอบด้วยความกว้างที่คุณเลือก
drawCircle(
color = Color.Black,
radius = 50f,
style = Stroke(width = 6f)
)ควบคุมความโปร่งใส
ส่งค่า alpha ระหว่าง 0f ถึง 1f เพื่อทำให้รูปร่างจางลง หากวางวงกลมโปร่งแสงซ้อนกันหลายวง คุณจะได้แสงเรืองนุ่ม ๆ เป็นชั้น
drawCircle(color = Color.Magenta, radius = 60f, alpha = 0.4f)ลำดับคือการซ้อนชั้น
การเรียกวาดภาพจะวาดตามลำดับ ดังนั้นรูปร่างที่วาดภายหลังจะอยู่ ด้านบน ของรูปร่างก่อนหน้า ลองนึกภาพเหมือนวางชิ้นส่วนที่ตัดไว้ลงบนหน้ากระดาษทีละชิ้น
ตรวจสอบสั้น ๆ
ระบบพิกัดของพื้นที่วาดเริ่มต้นที่ใด
สรุป
คุณได้เรียนรู้พื้นฐานของ Canvas แล้ว: วาดภายใน DrawScope อ่านค่า size และวาดเส้น สี่เหลี่ยม และวงกลมด้วย Offset และพิกเซลแบบทศนิยม ลำดับมีความสำคัญอย่างยิ่ง 🎨
คำถามที่พบบ่อย
บทเรียน “DrawScope: เส้น สี่เหลี่ยม และวงกลม” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “DrawScope: เส้น สี่เหลี่ยม และวงกลม” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Jetpack Compose Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Jetpack Compose Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “DrawScope: เส้น สี่เหลี่ยม และวงกลม”
วาดรูปทรงพื้นฐานลงบนผืนผ้าใบ คุณปฏิบัติ Jetpack Compose Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Jetpack Compose Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Jetpack Compose Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “DrawScope: เส้น สี่เหลี่ยม และวงกลม” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Jetpack Compose Academy นี้ได้ไหม
ได้ บทเรียน Jetpack Compose Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- DrawScope: เส้น สี่เหลี่ยม และวงกลม
- เส้นพาธ ไล่ระดับสี และโหมดผสม
- drawWithCache และประสิทธิภาพ
- สร้างวงแหวนความคืบหน้าแบบสด