Flutter绘制指南05-图形的路径添加

本节目标

[1].了解如何通过移动路径形成形状:直线运动。圆弧运动。圆锥曲线运动。贝塞尔曲线运动
[2].了解路径的【绝对运动】和【相对运动】
[3].了解已经在已有的路径中添加其他形状: 添加矩形,圆角矩形,椭圆圆弧,其他路径
[4]. 使用path绘制坐标系

一、路径加入方法

下面是路径形成的基础方法,包括路径的移动、加入直线、圆弧、圆锥曲线、贝塞尔曲线
对这些API的掌握程度.直接决定你使用路径的能力.

1、moveTo和lineTo画线

下面画布已经到了屏幕中心,并且Y轴正下方。想象以下,你现在手里面拿着一支笔。
moveTo相当于提起笔落到纸上的目标位置。并且坐标以画布原点为参考系。
lineTo相当于从落笔点画直线到期望的坐标点。并且坐标以画布原点为参考系

实现代码

void drawRectangle(Canvas canvas){
    Path path=Path();
    Paint paint=Paint()
      ..color=Colors.deepPurpleAccent
      ..style=PaintingStyle.fill;
    path
      ..moveTo(0, 0)
      ..lineTo(60, 80)
      ..lineTo(60, 0)
      ..lineTo(0, -80)
      ..close();
    canvas.drawPath(path, paint);
    paint
      ..style=PaintingStyle.stroke
      ..strokeWidth=2;
    path
      ..moveTo(0,0)
      ..lineTo(-60, 80)
      ..lineTo(-60, 0)
      ..lineTo(0, -80);
    canvas.drawPath(path, paint);
  }

2. relativeMoveTo和relativeLineTo相对画线

如果点位已经知道,使用moveTo和lineTo会比较方便。但是很多情况下是不能直接知道的
比如在某点的基础上,画一条线.要求左移10,上移60，这样的点位很难直接确定
使用relative系列方法就会非常的简单.如下的图形绘制.不用相对坐标就会很复杂
使用相对坐标会更加容易调整(左侧只需起点就可以全部移动)

代码实现

// 通过相对于其他图形的位置 我们来绘制图形。
  void drawRelativeRectangle(Canvas canvas){
    Path path=Path();
    Paint paint=Paint();
    path
      ..relativeMoveTo(0, 0)
      ..relativeLineTo(100, 120)
      ..relativeLineTo(-10, -60)
      ..relativeLineTo(60, -10);
    paint
      ..color=Colors.green
      ..style=PaintingStyle.fill;
    canvas.drawPath(path, paint);
    path.reset();
    paint
      ..style=PaintingStyle.stroke..color=Colors.green
      ..strokeWidth=2;
    path
      ..relativeMoveTo(-200, 0)
      ..relativeLineTo(100, 120)
      ..relativeLineTo(-10, -60)
      ..relativeLineTo(60, -10)..close();
    canvas.drawPath(path, paint);
  }

3. arcTo圆弧

arcTo用于指定圆弧路径,指定一个矩形区域，形成椭圆。
指定起始弧度和扫描弧度,就可以从椭圆上截取出圆弧
最后一参代表是否强行移动,如果为true，如图左,绘制圆弧的时候就会先移动到起点。

//绘制圆弧
  void drawArcRectangle(Canvas canvas){
    Path path=Path();
    Paint paint=Paint();
    paint
      ..color=Colors.purpleAccent
      ..strokeWidth=2
      ..style=PaintingStyle.stroke;
    var rect=Rect.fromCenter(center: Offset(0,0), width: 160, height: 160);
    path.lineTo(30, 30);
    path.arcTo(rect, 0, pi*1.5, true);
    canvas.drawPath(path, paint);
    path.reset();
    canvas.translate(200, 0);
    path.lineTo(30, 30);
    path.arcTo(rect, pi*.5, pi*1.5, false);
    canvas.drawPath(path, paint);
  }

4. arcToPoint和relativeArcToPoint定点弧

当想要画圆弧到某一个点,用arcToPoint会非常的方便
接受一个定点入参Offset,是圆弧的终点,可指定圆弧半径radius、是否使用优狐,是否顺时针
左侧: 使用优弧：largeArc: false,逆时针:clockwise:false
中间: 使用劣弧: largeArc:false.顺时针:clockwise:true
右侧使用优弧：largeArc:true,顺时针:clockwise:true

代码实现

// 绘制优弧、劣弧，展现不同的圆弧
  void drawGoodOrBadRectangle(Canvas canvas){
    Path path=Path();
    Paint paint=Paint()
      ..color=Colors.purpleAccent
      ..strokeWidth=2
      ..style=PaintingStyle.stroke;
    path.lineTo(80, -40);
    path
      ..arcToPoint(Offset(40, 40),
        radius: Radius.circular(60),
        largeArc: false
      )..close();
    canvas.drawPath(path, paint);
    path.reset();
    canvas.translate(-150, 0);
    // 绘制左侧
    path.lineTo(80, -40);
    path..arcToPoint(
      Offset(40, 40),
      radius: Radius.circular(60),
      largeArc: true,
      clockwise: false
    )..close();
    canvas.drawPath(path, paint);
    path.reset();
    canvas.translate(150+150.0, 0);
    path.lineTo(80, -40);
    path..arcToPoint(
      Offset(40, 40),
      radius: Radius.circular(60),
      largeArc: true
    )..close();
    canvas.drawPath(path, paint);
  }

relativeArcToPoint方法就是使用的时候更具相对位置来加入圆弧路径。参数含义与上面一致。

5. conicTo和relativeConicTo:圆弧曲线

conic接受5个参数用于ui之圆锥曲线,包括椭圆线、抛物线和双曲线
其中前面两个参数是控制点，三四个参数是结束点,第五个参数是权重.
当权重<1的时候,圆锥曲线是椭圆线,如左下图
当权重=1的时候,圆锥曲线是抛物线,如下中图
当权重>1的时候,圆锥曲线是双曲线,如下右图

void drawLastRectangle(Canvas canvas){
    final Offset p1=Offset(80,-100);
    final Offset p2=Offset(160, 0);
    Path path=Path();
    Paint paint=Paint();
    paint
      ..color=Colors.purpleAccent
      ..strokeWidth=2
      ..style=PaintingStyle.stroke;
    path.conicTo(p1.dx, p1.dy, p2.dx, p2.dy, 1);
    canvas.drawPath(path, paint);
    path.reset();
    canvas.translate(-180, 0);
    paint
      ..color=Colors.purpleAccent
      ..strokeWidth=2
      ..style=PaintingStyle.stroke;
    path.conicTo(p1.dx, p1.dy, p2.dx, p2.dy, 0.5);
    canvas.drawPath(path, paint);
    path.reset();
    canvas.translate(180+180, 0);
    paint
      ..color=Colors.purpleAccent
      ..strokeWidth=2
      ..style=PaintingStyle.stroke;
    path.conicTo(p1.dx, p1.dy, p2.dx, p2.dy, 1.5);
    canvas.drawPath(path, paint);
    path.reset();
  }