การใช้งาน Drawing Rabbit in Native GUI ในภาษา Dart แบบง่ายๆ

การเขียนโปรแกรมโดยใช้ภาษา Dart เป็นที่นิยมมากขึ้นในปัจจุบันเนื่องจากมีเอกลักษณ์ในการพัฒนาซอฟต์แวร์ที่ทำงานได้ทั้งบนเว็บไซต์และแอปพลิเคชันมือถือ ผ่านการใช้ Flutter ซึ่งเป็น Framework ที่ช่วยให้นักพัฒนาสามารถสร้าง UI ที่สวยงามอย่างรวดเร็ว ตัวอย่างที่เราจะนำเสนอในวันนี้คือการวาดภาพกระต่ายใน Native GUI โดยใช้ภาษา Dart

พื้นฐานของการวาดภาพใน Native GUI

การสร้าง GUI (Graphical User Interface) ใน Dart ไม่ใช่เรื่องซับซ้อนอีกต่อไปด้วยการใช้ Flutter และ Dart SDK ที่มี Framework ที่ช่วยให้นักพัฒนาสามารถสร้างภาพกราฟิกแบบ Vector ด้วยฟังก์ชันที่หลากหลาย ตัวอย่างเช่น การวาดรูปแบบเรียลไทม์ การสร้าง Animation และการจัดการ Event ต่าง ๆ

ขั้นตอนการสร้างโปรแกรมวาดกระต่าย

```bash

flutter create draw_rabbit

```

จากนั้นเข้าไปยังโฟลเดอร์ที่สร้างขึ้นใหม่

```bash

cd draw_rabbit

```

ตัวอย่างโค้ด

 import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Draw Rabbit',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Drawing Rabbit'),
        ),
        body: Center(
          child: CustomPaint(
            size: Size(300, 300),
            painter: RabbitPainter(),
          ),
        ),
      ),
    );
  }
}

class RabbitPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..color = Colors.brown
      ..style = PaintingStyle.fill;

    // วาดรูปร่างของกระต่าย
    canvas.drawOval(Rect.fromCenter(center: Offset(size.width / 2, size.height / 2), width: 100, height: 150), paint);

    paint.color = Colors.white;
    canvas.drawOval(Rect.fromCenter(center: Offset(size.width / 2 - 30, size.height / 2 - 20), width: 20, height: 30), paint);
    canvas.drawOval(Rect.fromCenter(center: Offset(size.width / 2 + 30, size.height / 2 - 20), width: 20, height: 30), paint);

    // ใส่การวาดหู
    paint.color = Colors.brown;
    canvas.drawRect(Rect.fromLTWH(size.width / 2 - 10, size.height / 2 - 70, 20, 50), paint);
    canvas.drawRect(Rect.fromLTWH(size.width / 2 - 40, size.height / 2 - 70, 20, 50), paint);

    // วาดหน้ากระต่าย
    paint.color = Colors.pink;
    canvas.drawOval(Rect.fromCenter(center: Offset(size.width / 2, size.height / 2 + 20), width: 40, height: 30), paint);

    // ใส่ตา
    paint.color = Colors.black;
    canvas.drawCircle(Offset(size.width / 2 - 15, size.height / 2 + 15), 5, paint);
    canvas.drawCircle(Offset(size.width / 2 + 15, size.height / 2 + 15), 5, paint);

    // วาดปาก
    paint.style = PaintingStyle.stroke;
    paint.strokeWidth = 2;
    canvas.drawLine(Offset(size.width / 2 - 10, size.height / 2 + 30), Offset(size.width / 2 + 10, size.height / 2 + 30), paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

อธิบายการทำงานของโค้ด

Use Case ในโลกจริง

การวาดรูปใน Native GUI มีการใช้งานทั่วไปในหลายอุตสาหกรรม เช่น:

สรุป

ด้วยภาษา Dart และการใช้ Flutter คุณไม่จำเป็นต้องเป็นนักพัฒนาระดับสูงเพื่อเริ่มต้นสร้างภาพกราฟิกได้ โปรแกรมวาดกระต่ายในบทความนี้ทำให้เห็นประโยชน์ของการใช้ฟังก์ชันที่มีประสิทธิภาพในการสร้างภาพ ซึ่งนอกจากจะสื่อสารได้ดีแล้ว ยังสามารถนำไปใช้ในงานต่าง ๆ ได้อย่างหลากหลาย

เริ่มต้นเรียนรู้โปรแกรมมิ่งกับ EPT ได้แล้ววันนี้!

หมายเหตุ: ข้อมูลในบทความนี้อาจจะผิด โปรดตรวจสอบความถูกต้องของบทความอีกครั้งหนึ่ง บทความนี้ไม่สามารถนำไปใช้อ้างอิงใด ๆ ได้ ทาง EPT ไม่ขอยืนยันความถูกต้อง และไม่ขอรับผิดชอบต่อความเสียหายใดที่เกิดจากบทความชุดนี้ทั้งทางทรัพย์สิน ร่างกาย หรือจิตใจของผู้อ่านและผู้เกี่ยวข้อง