Flutter 关于Canvas和Paint基本练习

Flutter 的画布和Android的几乎一致。写了下小练习。记录一下

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

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

class Paper extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: CustomPaint(
        painter: PaperPainter(),
      ),
    );
  }
}

class PaperPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
//   canvasCircle(canvas);
//     aboutPaint(canvas);
//    drawStrokeJoin(canvas);
    canvasTranslate(canvas, size);
//  canvasGrid(canvas, size);
    canvasBottomRight(canvas, size);
    drawDot(canvas);
    drawPoint(canvas);
    drawCoordinate(canvas, size);
//    drawRect(canvas);
//    drawRRect(canvas);
//    drawDRRect(canvas);
//    drawFill(canvas);
//    drawArcDetail(canvas);
    drawPaint(canvas, size);
//    drawShadow(canvas);
//    drawPath(canvas);
    clipCanvas(canvas);
  }

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

  ///画圆
  canvasCircle(Canvas canvas) {
    final Paint paint = Paint();
    canvas.drawCircle(
        Offset(180, 180),
        150,
        paint
          ..color = Colors.blue
          ..style = PaintingStyle.stroke
          ..strokeWidth = 50);

    canvas.drawCircle(
        Offset(180 + 360.0, 180),
        150,
        paint
          ..color = Colors.red
          ..style = PaintingStyle.fill
          ..strokeWidth = 50
          ..isAntiAlias = false);
  }

  ///画笔
  ///StrokeCap.butt - 不出头
  //StrokeCap.round - 圆头
  //StrokeCap.square - 方头
  void aboutPaint(Canvas canvas) {
    Paint paint = Paint();
    paint
      ..style = PaintingStyle.stroke
      ..strokeWidth = 20
      ..color = Colors.red;
    canvas.drawLine(
        Offset(50, 50), Offset(50, 150), paint..strokeCap = StrokeCap.butt);
    canvas.drawLine(Offset(50 + 50.0, 50), Offset(50 + 50.0, 150),
        paint..strokeCap = StrokeCap.round);
    canvas.drawLine(Offset(50 + 50.0 * 2, 50), Offset(50 + 50.0 * 2, 150),
        paint..strokeCap = StrokeCap.square);
  }

  ///线接类型
  ///StrokeJoin.bevel - 斜角、
  //StrokeJoin.miter - 锐角、
  //StrokeJoin.round - 圆角
  void drawStrokeJoin(Canvas canvas) {
    Paint paint = Paint();
    Path path = Path();
    paint
      ..style = PaintingStyle.stroke
      ..color = Colors.blue
      ..strokeWidth = 20;
    path.moveTo(50, 50);
    path.lineTo(50, 100);
    path.relativeLineTo(100, -50);
    path.relativeLineTo(0, 100);
//    canvas.drawPath(path, paint..strokeJoin = StrokeJoin.bevel);
//    canvas.drawPath(path, paint..strokeJoin = StrokeJoin.miter);
    canvas.drawPath(path, paint..strokeJoin = StrokeJoin.round);
  }

  ///Canvas 画布变换和状态
  void canvasTranslate(Canvas canvas, Size size) {
    var paint = Paint()
      ..style = PaintingStyle.fill
      ..color = Colors.blue;
    //画布起点移动到屏幕中心
    canvas.translate(size.width / 2, size.height / 2);
//    canvas.drawCircle(Offset(0, 0), 50, paint);
    canvas.drawLine(
        Offset(20, 20),
        Offset(50, 50),
        paint
          ..color = Colors.red
          ..strokeWidth = 5
          ..strokeCap = StrokeCap.round);
  }

  ///Canvas 缩放变换
  void canvasGrid(Canvas canvas, Size size) {
    Paint gridPait; //画笔
    final double step = 20; //小格边长
    final double strokeWidth = .5; //线宽
    final Color color = Colors.grey; //线颜色
    gridPait = Paint()
      ..style = PaintingStyle.stroke
      ..strokeWidth = strokeWidth
      ..color = color;

    canvas.save();
    for (int i = 0; i < size.height / 2 / step; i++) {
      canvas.drawLine(Offset(0, 0), Offset(size.width / 2, 0), gridPait);
      canvas.translate(0, step);
    }
    canvas.restore();

    canvas.save();
    for (int i = 0; i < size.width / 2 / step; i++) {
      canvas.drawLine(Offset(0, 0), Offset(0, size.height / 2), gridPait);
      canvas.translate(step, 0);
    }
    canvas.restore();
  }

  ///画网格  todo 记得先把原点移动到中心位置
  void canvasBottomRight(Canvas canvas, Size size) {
    canvasGrid(canvas, size);

    ///沿X轴镜像
    canvas.save();
    canvas.scale(1, -1);
    canvasGrid(canvas, size);
    canvas.restore();

    ///沿Y轴镜像
    canvas.save();
    canvas.scale(-1, 1);
    canvasGrid(canvas, size);
    canvas.restore();

    ///原点镜像
    canvas.save();
    canvas.scale(-1, -1);
    canvasGrid(canvas, size);
    canvas.restore();
  }

  ///画一圈太阳光 2* pi 是一圈的弧度
  void drawDot(Canvas canvas) {
    Paint paint = Paint()
      ..color = Colors.orangeAccent
      ..strokeWidth = 10
      ..style = PaintingStyle.stroke;
    canvas.save();
    for (int i = 0; i < 12; i++) {
      canvas.drawLine(Offset(80, 0), Offset(100, 0), paint);
      //旋转是按照弧度来的
      canvas.rotate(2 * pi / 12);
    }
    canvas.restore();
  }

  final List<Offset> points = [
    Offset(-120, -20),
    Offset(-80, -80),
    Offset(-40, -40),
    Offset(0, -100),
    Offset(40, -140),
    Offset(80, -160),
    Offset(120, -100),
  ];

  ///绘制点
  ///【1】 绘点: drawPoints
  ///PointMode.lines : 线段模式   线段模式下：每两个点一对形成线段。如果点是奇数个，那么最后一个点将没有用。
  ///PointMode.polygon : 多边形连线模式
  void drawPoint(Canvas canvas) {
    Paint paint = Paint()
      ..color = Colors.red
      ..style = PaintingStyle.stroke
      ..strokeWidth = 10
      ..strokeCap = StrokeCap.round;
    canvas.drawPoints(ui.PointMode.polygon, points, paint);
  }

  ///绘制坐标点
  void drawCoordinate(Canvas canvas, Size size) {
    //斜线长度
    double lineWidth = 8;
    Paint paint = Paint()..color = Colors.orange;
    paint.strokeWidth = 1.5;
    canvas.drawLine(Offset(0, 0), Offset(size.width / 2, 0), paint);
    canvas.drawLine(Offset(0, 0), Offset(0, size.height / 2), paint);
    canvas.drawLine(Offset(0, 0), Offset(-size.width / 2, 0), paint);
    canvas.drawLine(Offset(0, 0), Offset(0, -size.height / 2), paint);
    canvas.drawLine(Offset(size.width / 2 - lineWidth, -lineWidth),
        Offset(size.width / 2, 0), paint);
    canvas.drawLine(Offset(size.width / 2 - lineWidth, lineWidth),
        Offset(size.width / 2, 0), paint);
    canvas.drawLine(Offset(-lineWidth, size.height / 2 - lineWidth),
        Offset(0, size.height / 2), paint);
    canvas.drawLine(Offset(lineWidth, size.height / 2 - lineWidth),
        Offset(0, size.height / 2), paint);
  }

  ///绘制矩形
  void drawRect(Canvas canvas) {
    Paint paint = Paint()
      ..color = Colors.green
      ..strokeWidth = 1.5;
    //左上右下
    Rect rectFromLTRB = Rect.fromLTRB(-120, -120, -80, -80);
    canvas.drawRect(rectFromLTRB, paint);
    //矩形中心
    Rect rect = Rect.fromCenter(center: Offset(0, 0), width: 160, height: 160);
    canvas.drawRect(rect, paint..color = Colors.blue);
    //左定点和宽高
    Rect rectFromLTWH = Rect.fromLTWH(-120, 80, 40, 40);
    canvas.drawRect(rectFromLTWH, paint..color = Colors.amber);

    //中心  内切圆
    Rect rectCircle = Rect.fromCircle(center: Offset(100, -100), radius: 20);
    canvas.drawRect(rectCircle, paint..color = Colors.grey);

    Rect rectPoint = Rect.fromPoints(Offset(80, 80), Offset(120, 120));
    canvas.drawRect(rectPoint, paint..color = Colors.red);
  }

  ///绘制圆角矩形
  void drawRRect(Canvas canvas) {
    Paint paint = Paint();
    paint
      ..color = Colors.blue
      ..strokeWidth = 1.5;
    //圆角矩形fromRectXY
    Rect rect = Rect.fromCenter(center: Offset(0, 0), width: 160, height: 160);
    //每个角横向给40px的弯曲度，纵向给20px的弯曲度
    RRect rRect = RRect.fromRectXY(rect, 40, 20);
    canvas.drawRRect(rRect, paint);

    //绘制一个矩形，每一个x，y都是10
    canvas.drawRRect(RRect.fromLTRBXY(-120, -120, -80, -80, 10, 10), paint);

    //绘制一个矩形，使用半径为10
    canvas.drawRRect(RRect.fromLTRBR(120, 120, 80, 80, Radius.circular(10)),
        paint..color = Colors.red);

    //绘制一个矩形，使每一个角落都设置特定的radius
    canvas.drawRRect(
        RRect.fromLTRBAndCorners(80, 80, 120, 120,
            topRight: Radius.elliptical(20, 10),
            bottomRight: Radius.elliptical(10, 10)),
        paint..color = Colors.green);

    Rect rectPoint = Rect.fromPoints(Offset(-120, 80), Offset(-80, 120));
    canvas.drawRRect(
        RRect.fromRectAndCorners(rectPoint, bottomRight: Radius.circular(10)),
        paint..color = Colors.orange);
  }

  ///绘制两个圆角矩形差阈   核心是找到两个圆角的区域，前者减去后者。

  void drawDRRect(Canvas canvas) {
    Paint paint = Paint()
      ..color = Colors.blue
      ..strokeWidth = 1.5;
    Rect outRect =
        Rect.fromCenter(center: Offset(0, 0), width: 160, height: 160);
    Rect inRect =
        Rect.fromCenter(center: Offset(0, 0), width: 100, height: 100);

    ///绘制一个外矩形扣 去一个内矩形的环
    canvas.drawDRRect(RRect.fromRectXY(outRect, 20, 20),
        RRect.fromRectXY(inRect, 20, 20), paint);

    Rect outRect2 =
        Rect.fromCenter(center: Offset(0, 0), width: 60, height: 60);
    Rect inRect2 = Rect.fromCenter(center: Offset(0, 0), width: 40, height: 40);

    ///绘制一个外矩形扣 去一个内矩形的环
    canvas.drawDRRect(RRect.fromRectXY(outRect2, 10, 10),
        RRect.fromRectXY(inRect2, 10, 10), paint..color = Colors.green);
  }

  ///绘制圆  一个中心点Offset和半径组成，椭圆由一个矩形域确定
  void drawFill(Canvas canvas) {
    Paint paint = Paint();
    canvas.save();
    canvas.translate(-200, 0);
    canvas.drawCircle(Offset(0, 0), 60, paint);
    canvas.restore();

    //画椭圆
    Rect rect = Rect.fromCenter(center: Offset(0, 0), height: 100, width: 120);
    canvas.drawOval(rect, paint);

    //画矩形区域
    canvas.save();
    canvas.translate(200, 0);
    //drawArc(矩形区域，起始弧度，扫描弧度，是否连接中心，画笔)
    //连接中心就是完整的封闭图形，不连接就是开口的
    canvas.drawArc(rect, 0, pi / 2 * 3, false, paint);
    canvas.restore();
  }

  ///画弧线
  void drawArcDetail(Canvas canvas) {
    Rect rect = Rect.fromCenter(center: Offset(0, 0), height: 100, width: 100);
    Paint paint = Paint()
      ..strokeWidth = 2
      ..style = PaintingStyle.stroke;

    canvas.save();
    canvas.translate(-200, 0);
    canvas.drawArc(rect, 0, pi / 2 * 3, false, paint);
    canvas.restore();
    canvas.drawArc(rect, 0, pi / 2 * 3, true, paint);
    canvas.save();

    canvas.translate(200, 0);
    var a = pi / 8;
    canvas.drawArc(
        rect,
        a,
        2 * pi - a.abs() * 2,
        true,
        paint
          ..color = Colors.yellowAccent
          ..style = PaintingStyle.fill);
    canvas.translate(40, 0);
    canvas.drawCircle(Offset(0, 0), 6, paint);
    canvas.translate(25, 0);
    canvas.drawCircle(Offset(0, 0), 6, paint);
    canvas.restore();
  }

  ///绘制画笔  todo  看下什么原因
  void drawPaint(Canvas canvas, Size size) {
    var colors = [
      Color(0xFFF60C0C),
      Color(0xFFF3B913),
      Color(0xFFE7F716),
      Color(0xFF3DF30B),
      Color(0xFF0DF6EF),
      Color(0xFF0829FB),
      Color(0xFFB709F4),
    ];

    var pos = [1.0 / 7, 2.0 / 7, 3.0 / 7, 4.0 / 7, 5.0 / 7, 6.0 / 7, 1.0];
    Paint paint = Paint();
    paint
      ..shader = ui.Gradient.linear(
          Offset(0, 0), Offset(size.width, 0), colors, pos, TileMode.clamp)
      ..blendMode = BlendMode.lighten;
    canvas.drawPaint(paint);
  }

  ///绘制阴影  drawShadow
 void drawShadow(Canvas canvas){
   Path path = Path();
   path.lineTo(80, 80);
   path.lineTo(-80, 80);
   ///true 表示内部涂色
   canvas.drawShadow(path, Colors.red, 3, true);
   canvas.translate(200, 0);
   canvas.drawShadow(path, Colors.red, 3, false);
 }

 void drawPath(Canvas canvas){
    Path path = Path();
    path.lineTo(60, 60);
    path.lineTo(-60, 60);
    path.lineTo(60, -60);
    path.lineTo(-60, -60);
    path.close();
    Paint paint = Paint();
    canvas.drawPath(path, paint);
    canvas.translate(140, 0);
    canvas.drawPath(path, paint..style = PaintingStyle.stroke
    ..strokeWidth = 2);
 }

 ///画布的裁剪
 ///画布裁剪后，只有裁剪部分才会生效画的内容
 void clipCanvas(Canvas canvas){
    var rect = Rect.fromCenter(center: Offset.zero,width: 360,height: 240);
    canvas.clipRect(rect,doAntiAlias: true,clipOp: ui.ClipOp.intersect);
    var colors = [Color(0xFFF60C0C),
      Color(0xFFF3B913),
      Color(0xFFE7F716),
      Color(0xFF3DF30B),
      Color(0xFF0DF6EF),
      Color(0xFF0829FB),
      Color(0xFFB709F4),];

    var pos = [1.0 / 7, 2.0 / 7, 3.0 / 7, 4.0 / 7, 5.0 / 7, 6.0 / 7, 1.0];
    Paint paint = Paint();
    paint.shader = ui.Gradient.linear(rect.centerLeft, rect.centerRight, colors,pos,TileMode.clamp);
    paint.blendMode = BlendMode.lighten;
    canvas.drawPaint(paint);
 }
}