敞开成长之旅！这是我参与「日新计划 12 月更文应战」的第6天，点击检查活动概况

说起canvas,或许许多人都有过了解和运用. 本文主要意指详解canvas的能力.

准备工作

如果你正准备学习flutter的canvas, 那么无妨和笔者一样打开idea. 然后紧跟着内容自己也敲一遍.
ps: 友情提示,自己敲一遍, 影响更深刻哦~

首要创立一个widget,在其间回来一个CustomPaint

  Widget build(BuildContext context) {
    return CustomPaint(
      size: const Size(100, 100),
      painter: _DemoPainter(),
    );
  }

其次,咱们需求准备好画笔. 正所谓工欲善其事,必先利其器.

/// 创立画画的载体
class _DemoPainter extends CustomPainter {
  // 创立画布
  final Paint _paint = Paint()..color = Colors.blue;
  @override
  void paint(Canvas canvas, Size size) {
      // 这儿去正式的制作
  }
  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

准备好工具后,咱们还需求知道咱们画布是依据笛卡尔坐标系的.以咱们的手机为例.当手机正对咱们时, 手机的左上角即为原点, 从左上角到右上角即为正x轴,从左上角到左下角即为正y轴.

在了解完这些根底概念后,让咱们一同具体的探究canvas的世界吧!

探究

drawLine

drawLine(Offset p1, Offset p2, Paint paint) 即制作一条直线, 其间, p1为初始点,p2为终点来制作一条线段.

drawCircle

drawCircle(Offset c, double radius, Paint paint) 能够在画布上制作一个圆. 其间, c 代表者圆心, radius 代表者半径. paint 自然代表着咱们之前生成的画笔了(以下不再赘述该属性). 这儿的代码代表着咱们以往右和下别离偏移50dp的点为圆心, 以50为半径制作圆.

canvas.drawCircle(Offset(50.0, 50.0), 50.0, _paint);

drawRect

drawRect(Rect rect, Paint paint) 能够用来制作一个矩形.rect代表了矩形的描绘*. 它能够经过五种命名构造办法来简单

    // 制作矩形
    // 从偏移的中心动身，中心即为矩形中心，以长宽制作矩型
    // Rect.fromCenter(center: center, width: width, height: height);
    //
    // 从原点动身，离原点往右left，往下top单位为矩形左上角，往右right，往下bot// tom为右下角画矩型
    // Rect.fromLTRB(left, top, right, bottom);
    //
    // 从center为圆心，直径为长宽画矩形。实际上也便是正方形
    // Rect.fromCircle(center: center, radius: radius);
    //
    // 从原点往右left， 往下top为矩形左上角， width、height为长宽制作
    // Rect.fromLTWH(left, top, width, height);
    //
    // a.b别离为矩形的对角点
    // Rect.fromPoints(a, b);
    canvas.drawRect(Rect.fromCircle(center: Offset.zero, radius: 100), _paint);

ps: drawRRect 实际上和drawRect差不多, 它用来制作圆角矩形. 有兴趣的能够自己测验一下或许参阅一下结束中的源码.

drawOval

drawOval(Rect rect, Paint paint) 能够制作一个椭圆形.它供给了rect 的参数. rect 是用来描绘一个矩形的形状. 而制作的椭圆也便是以中心为圆心,轴对其.边贴边的一个椭圆.这儿制作的是一个以往右下各偏移50dp为中心,长为50,宽为100的矩阵画椭圆.

canvas.drawOval(Rect.fromCenter(center: Offset(50, 50), width: 100, height: 50), _paint);

drawArc

drawArc(Rect rect, double startAngle, double sweepAngle, bool useCenter, Paint paint) 能够制作圆弧.. 其间rect比较了解 这儿不赘述. startAngle便是制作的开始视点.这儿运用的是弧度制, 也便是0 -> 2pi. sweepAngle是扫过点视点, userCenter是是否衔接圆心. 这儿为了便利演示useCenter 的区别.需求改一下画笔的属性

    // 画笔的粗细
    _paint.strokeWidth = 5;
    // 画笔改成只画边缘不填充.这儿的区别便是圆弧是否填充
    _paint.style = PaintingStyle.stroke;
    canvas.drawArc(Rect.fromCircle(center: Offset(50, 50), radius: 50), 0, pi, true, _paint);

当userCenter 为true:

当userCenter 为false:

drawPaint

drawPaint(Paint paint) 即运用画笔填充画布色彩.比较简单不赘述.

drawPath

drawPath(Path path, Paint paint) 能够经过路径去制作. 这儿算是比较重要也比较有用的一个属性,许多制作都会经过path办法去制作.咱们这儿采用制作三角形的办法来讲解它.

    Path path = Path();
    /// 首要移到原点
    path.moveTo(0, 0);
    /// 然后直线衔接到(0,100)
    path.lineTo(0, 100);
    /// 最终再衔接到(100,100)
    path.lineTo(100, 100);
    /// 最终衔接到原点闭合
    path.close();
    canvas.drawPath(path, _paint);

drawPoints

drawPoints(PointMode pointMode, List points, Paint paint) 能够理解为点线图,其间pointMode包含三种:points、lines以及polygon.

  List<Offset> points = const [
      Offset(0, 0),
      Offset(10, 10),
      Offset(20, 20),
      Offset(30, 30),
      Offset(40, 40),
    ];
    canvas.drawPoints(PointMode.lines, points, _paint);

points:

lines:

polygon:

咱们能够别离对比下,三种形式下制作的差别.简单来说, points形式会制作每个点.lines会取每两个点为一个线段,如果是奇数的话,则会疏忽最终一个点.polygon则是制作一条线段

drawText

drawText实际上不是canvas供给的api, 不过这儿也引进这个概念. 咱们需求创立TextPainter 目标,然后经过该目标去完成制作.

    TextPainter painter = TextPainter(
      text: TextSpan(
          text: '制作文字', style: TextStyle(color: Colors.black, fontSize: 20)),
      textDirection: TextDirection.ltr,
    )..layout();
    painter.paint(canvas, Offset.zero);

other

实际上,canvas还包含了许多的api.包含制作Image、点九图、图集等等.这儿无妨自己做个测验.也算是一个家庭作业吧~ 一同尽力吧!骚年!!

源码

github.com/weniner/flu…

结语

这儿是WeninerIo,酷爱生活且酷爱游览.如果你对这次的分享感兴趣又或许有什么疑惑, 无妨谈论区留言 + 重视.等待下一次更好的相遇.