flutter_Canvas绘制基本图形

# flutter_Canvas绘制基本图形

### 创建 CustomPaint

```dart

CustomPaint(

size: Size(

200,

200,

),

/// 后置图层（暂时只用一个图层）

painter: null,

/// 前置图层

foregroundPainter: ForegroundPainter(),

/// dom层（暂时不用）

child: null,

)

```

### 创建 ForegroundPainter

```dart

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. 画直线

```dart

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);

}

```