基础介绍

坐标

（注意Y轴正方向是向下，数学中是向上）

 

 

 CustomPaint

三层结构

CustomPaint(
  // 事件区域，如 GestureDetector 事件只能作用在 size 范围内
  size: Size.infinite,
  // 背景层
  painter: MyPainter(),
  // 中间层
  child: Text("hello"),
  // 前景层
  foregroundPainter: null,
)

核心方法

class MyPainter extends CustomPainter {

  /// [size] 为 [CustomPaint] 构造方法传入的 size
  @override
  void paint(Canvas canvas, Size size) {

  }

  @override
  bool shouldRepaint(MyPainter oldDelegate) => this != oldDelegate;
}

　　

 

各类图形的绘制

声明引入的包

import 'dart:math';
import 'dart:ui' as ui;

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

　　

绘制点

 

233