Just My Life & My Work

[Flutter] CustomPaint Widget

有時候我們需要在螢幕上繪圖,可以想像有著各式各樣畫筆、顏色、粗細等工具,此時我們可以怎麼做呢?🤔

可以使用 CustomPaint Widget,讓我們在畫布上隨意繪圖。

先來秀出我們最後的成果:

可以見到螢幕上有個黃色正方形,裡頭又有個綠色三角形。

首先來看一下完整的原始碼:

/*
  Author: HappyMan
  Date: 2022/02/14
  Topic: CustomPaint Class
 */

import 'package:flutter/material.dart';
import 'dart:math';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Happy Drawing Triangle'),
        ),
        body: Center(
          child: Container(
            color: Colors.yellow,
            child: CustomPaint(size: Size(300, 300), painter: DrawTriangle()),
          ),
        ),
      ),
    );
  }
}

class DrawTriangle extends CustomPainter {

  @override
  void paint(Canvas canvas, Size size) {

    var path = Path();
    path.moveTo(size.width / 2, Random().nextDouble() * (size.height / 2));
    path.lineTo(0, size.height);
    path.lineTo(size.height, size.width);
    path.close();
    canvas.drawPath(path, Paint()..color = Color(Random().nextInt(0xffffffff)).withAlpha(0xff));
  }

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

我在 Container 裡放了 CustomPaint,然後透過 Canvas 繪製 Path。

在 CustomPainter 擴展中必須實作兩個 Function:

  • void paint(Canvas canvas, Size size)
  • bool shouldRepaint(CustomPainter oldDelegate)

實際跑專案,在 Web 拖曳視窗大小,會改變顏色與三角點的位置;抑或是在 iOS 橫放或直放切換也會改變顏色與三角點的位置。

這裡是透過亂數也決定三角點的位置和改變顏色。

參考:

CustomPaint class

CustomPaint (Flutter Widget of the Week)

CustomPainter 與 CustomPaint

10.4 自定義繪畫與畫布

隨意留個言吧:)~

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

標籤雲

%d 位部落客按了讚: