Flutter 關(guān)于Canvas和Paint基本練習(xí)

Flutter 的畫布和Android的幾乎一致。寫了下小練習(xí)。記錄一下

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 畫布變換和狀態(tài)
  void canvasTranslate(Canvas canvas, Size size) {
    var paint = Paint()
      ..style = PaintingStyle.fill
      ..color = Colors.blue;
    //畫布起點(diǎn)移動到屏幕中心
    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();
  }

  ///畫網(wǎng)格  todo 記得先把原點(diǎn)移動到中心位置
  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();

    ///原點(diǎn)鏡像
    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);
      //旋轉(zhuǎn)是按照弧度來的
      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),
  ];

  ///繪制點(diǎn)
  ///【1】 繪點(diǎn): drawPoints
  ///PointMode.lines : 線段模式   線段模式下：每兩個點(diǎn)一對形成線段。如果點(diǎn)是奇數(shù)個，那么最后一個點(diǎn)將沒有用。
  ///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);
  }

  ///繪制坐標(biāo)點(diǎn)
  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);
    //左定點(diǎn)和寬高
    Rect rectFromLTWH = Rect.fromLTWH(-120, 80, 40, 40);
    canvas.drawRect(rectFromLTWH, paint..color = Colors.amber);

    //中心  內(nèi)切圓
    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);

    //繪制一個矩形，使每一個角落都設(shè)置特定的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);
  }

  ///繪制兩個圓角矩形差閾   核心是找到兩個圓角的區(qū)域，前者減去后者。

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

    ///繪制一個外矩形扣 去一個內(nèi)矩形的環(huán)
    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);

    ///繪制一個外矩形扣 去一個內(nèi)矩形的環(huán)
    canvas.drawDRRect(RRect.fromRectXY(outRect2, 10, 10),
        RRect.fromRectXY(inRect2, 10, 10), paint..color = Colors.green);
  }

  ///繪制圓  一個中心點(diǎn)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);

    //畫矩形區(qū)域
    canvas.save();
    canvas.translate(200, 0);
    //drawArc(矩形區(qū)域，起始弧度，掃描弧度，是否連接中心，畫筆)
    //連接中心就是完整的封閉圖形，不連接就是開口的
    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 表示內(nèi)部涂色
   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);
 }

 ///畫布的裁剪
 ///畫布裁剪后，只有裁剪部分才會生效畫的內(nèi)容
 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);
 }
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容