CustomPaint

使用實例和代碼：

1.canvas.drawColor 繪制背景顏色

class MyPainter1 extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    //繪制背景顏色，整個UI 現(xiàn)在就是紅色的
    canvas.drawColor(Colors.red, BlendMode.srcATop);

  }

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

2.canvas.drawCircle 繪制圓

    final whitePaint = Paint()..color = Colors.red;
    //offset 位置，半徑
    canvas.drawCircle(const Offset(100, 100), 100, whitePaint);

3.canvas.drawRect繪四邊形

    //繪制四邊形
    final redPaint = Paint()..color = Colors.red;
    // left:距離左邊的距離, top：距離右邊的距離, width, height
    canvas.drawRect(Rect.fromLTWH(100, 100, 100, 100), redPaint);
    //center 中心點的位置， 寬高，
    canvas.drawRect(
        Rect.fromCenter(center: Offset(50, 50), width: 100, height: 100),
        redPaint);
    //radius 半徑
    canvas.drawRect(
        Rect.fromCircle(center: const Offset(50, 50), radius: 50), redPaint);

    canvas.drawRect(
        Rect.fromPoints(const Offset(50, 50), Offset(100, 100)), redPaint);

4.canvas.drawRRect 繪制圓角矩形

其他的方法可以自行嘗試，參數(shù)大同小異

// left, top, right, bottom, radius
    canvas.drawRRect(
        RRect.fromLTRBR(100, 100, 200, 200, Radius.circular(20)), redPaint);
//可以設定不同邊角弧度的
    canvas.drawRRect(
        RRect.fromLTRBAndCorners(100, 100, 200, 200,
            topLeft: const Radius.circular(20)),
        redPaint);

5.canvas.drawRRect 嵌套繪制

canvas.drawDRRect(
    RRect.fromLTRBR(100, 100, 300, 300, const Radius.circular(20)),
    RRect.fromLTRBR(150, 150, 200, 200, const Radius.circular(20)),
    redPaint);

6.canvas.drawOval 繪制橢圓形

//橢圓形
    canvas.drawOval(Rect.fromLTRB(100, 80, 400, 300), redPaint);

7.canvas.drawPath 繪制路徑

    final redPaint = Paint()
      ..color = Colors.red
      ..strokeWidth = 2.0
      ..style = PaintingStyle.stroke;

    // final path = Path()
    //   ..moveTo(100, 100) //起始點
    //   ..lineTo(200, 200) //鏈接到點
    //   ..lineTo(400, 400) //鏈接到點
    //   ..close(); //關閉
    // canvas.drawPath(path, redPaint);

    final path1 = Path()
      ..moveTo(400, 400) //起始點
      ..lineTo(400, 500) //鏈接到點
      ..lineTo(400, 400) //鏈接到點
      ..addRect(Rect.fromLTRB(500, 500, 100, 100)) //新增一個矩形，或者其他的也可以
      ..close(); //關閉
      //或者在這邊添加也可以
    // path1.addRect(Rect.fromLTRB(500, 500, 100, 100));
    // path1.close();
    canvas.drawPath(path1, redPaint);

8.canvas.drawArc 繪制弧形

// 繪制圓弧的形狀
    // rect:繪制一個矩形, startAngle：圓弧開始的角度, sweepAngle：開始到結束的角度大小, useCenter：是否閉合向著中心位置
    canvas.drawArc(
        Rect.fromPoints(Offset(0, 0), Offset(200, 200)), 0, 3.14, true, painit);

9.canvas.drawShadow繪制陰影

  final painit = Paint()
    ..color = Colors.red
    ..strokeWidth = 10;
  Path path = Path();
  path
    ..moveTo(8, 200)
    ..lineTo(320, 400)
    ..lineTo(200, 340)
    ..lineTo(100, 460)
    ..close();
  // path, color, elevation, transparentOccluder表示如果遮擋對象是透明的，應該為true，否則為false
  canvas.drawShadow(path, Colors.green, 8.0, false);
  canvas.drawPath(path, painit);

10.canvas.drawPoints 繪制點

    List<Offset> points = const [
      Offset(100, 100),
      Offset(200, 200),
      Offset(300, 300),
      Offset(100, 400),
      Offset(500, 500),
      Offset(441, 231),
    ];
    //兩個兩個點繪制為一條線
    // canvas.drawPoints(PointMode.lines, points, painit);
    // 繪制點
    // canvas.drawPoints(PointMode.points, points, painit);
    // 點按照順序連接起來
    canvas.drawPoints(PointMode.polygon, points, painit);

11.繪制五角星

繪制完成之后close,起始點和close 點會鏈接起來

   debugPrint("size.width ${size.width}");
    Path path = Path()..moveTo(size.width / 2, 200);
    path.lineTo(size.width / 4, 500);
    path.lineTo(size.width / 7 * 6, 320);
    path.lineTo(size.width / 7, 320);
    path.lineTo(size.width / 4 * 3, 500);
    path.close(); //閉合，沒有這個就不會閉合

    debugPrint(
        "point ${size.width / 2},200=${size.width / 4} 500=${size.width / 7 * 6} 320=${size.width / 7} 320==${size.width / 4 * 3} 500");

文章來源地址http://www.zghlxwxcb.cn/news/detail-639955.html

到了這里，關于【Flutter】【基礎】CustomPaint 繪畫功能，繪制各種圖形（二）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！