flutter_Canvas绘制基本图形

创建 CustomPaint

CustomPaint(
    size: Size(
        200,
        200,
    ),

    /// 后置图层（暂时只用一个图层）
    painter: null,

    /// 前置图层
    foregroundPainter: ForegroundPainter(),

    /// dom层（暂时不用）
    child: null,
)

创建 ForegroundPainter

import 'package:flutter/material.dart';

class ForegroundPainter extends CustomPainter {

  /// 画笔
  Paint painter = Paint()
    ..isAntiAlias = true /// 抗锯齿
    ..strokeCap = StrokeCap.round /// 折线连接处圆滑处理
    ..strokeJoin = StrokeJoin.round /// 点形状
    ..style = PaintingStyle.stroke /// stroke 连线模式，fill 填充模式
    ..color = Colors.red /// 线颜色
    ..strokeWidth = 4; /// 线宽度

  ForegroundPainter();

  /// 绘制方法，每次重绘都会调用
  @override
  void paint(Canvas canvas, Size size) {

  }

  /// 是否重新绘制，加入缓存来提高性能，但是删除的时候会出现无法移除的情况，要特殊处理
  @override
  bool shouldRepaint(ForegroundPainter oldDelegate) {
    return true;
  }
}

flutter_Canvas绘制基本图形

1. 画直线

void paint(Canvas canvas, Size size) {

    Offset p1 = Offset(0, 0);
    Offset p2 = Offset(100, 100);

    /// 画线
    canvas.drawLine(Offset(0, 0), Offset(100, 100), painter);

    /// 画矩形
    Rect r = Rect.fromLTRB(p1.dx, p1.dy, p2.dx, p2.dy);
    canvas.drawRect(r, painter);

    /// 画圆角矩形
    RRect rr = RRect.fromLTRBXY(p1.dx, p1.dy, p2.dx, p2.dy, 10, 10);
    canvas.drawRRect(rr, painter);

    /// 画圆
    canvas.drawCircle(p1, (p1.dx - p2.dx).abs(), painter);

    /// 画椭圆
    r = Rect.fromLTRB(p1.dx, p1.dy, p2.dx, p2.dy);
    canvas.drawOval(r, painter);

    /// 画三角形
    Path path = Path();

    /// 顶点
    path.moveTo((p1.dx + (p1.dx - p2.dx).abs() / 2).abs(), p1.dy);

    /// 第二个点
    path.lineTo(p1.dx, p2.dy);

    /// 第三个点
    path.lineTo(p2.dx, p2.dy);

    /// 回到起点
    path.lineTo((p1.dx + (p1.dx - p2.dx).abs() / 2).abs(), p1.dy);
    canvas.drawPath(path, painter);

    /// 画菱形
    path = Path();

    /// 第一个点
    path.moveTo((p1.dx + (p1.dx - p2.dx).abs() / 2).abs(), p1.dy);

    /// 第二个点
    path.lineTo(p1.dx, p1.dy + ((p2.dy - p1.dy) / 2).abs());

    /// 第三个点
    path.lineTo(p1.dx + ((p2.dx - p1.dx) / 2).abs(), p2.dy);

    /// 第四个点
    path.lineTo(p2.dx, p1.dy + ((p2.dy - p1.dy) / 2).abs());

    /// 回到起点
    path.lineTo((p1.dx + (p1.dx - p2.dx).abs() / 2).abs(), p1.dy);
    canvas.drawPath(path, painter);
}