Flutter 绘制探索 | 扇形区域与点击校验

作者：张风捷特烈

0. 前言

今天来探索一个问题，如何绘制一块扇形区域路径，并且校验触点是否落在 扇形区域 之中。这个问题对于绘制 饼图 及处理手势事件校验非常重要。

1. 扇形区域的定义

首先来明确一下扇形区域的表示，如下图所示，一个 扇形区域 通过五个属性进行描述：

这里通过 SectorShape 类对扇区的属性进行维护， 定义如下：

class SectorShape {
  Offset center; // 中心点
  double innerRadius; // 小圆半径
  double outRadius; // 大圆半径
  double startAngle; // 起始弧度
  double sweepAngle; // 扫描弧度

  SectorShape({
    required this.center,
    required this.innerRadius,
    required this.outRadius,
    required this.startAngle,
    required this.sweepAngle,
  });
}

2. 绘制扇形区域

接下来看一下如何绘制扇形区域，思路是先生成 区域路径 ，然后绘制路径。在生成路径的过程中，需要知道四个端点的坐标，如下所示：

根据 SectorShape 的属性，可以很轻松地计算出四点的坐标，如下所示：其中 shape 是 SectorShape 类型对象：

double startRad = shape.startAngle;
double endRad = shape.startAngle + shape.sweepAngle;
double r0 = shape.innerRadius;
double r1 = shape.outRadius;

Offset p0 = Offset(cos(startRad) * r0, sin(startRad) * r0);
Offset p1 = Offset(cos(startRad) * r1, sin(startRad) * r1);
Offset q0 = Offset(cos(endRad) * r0, sin(endRad) * r0);
Offset q1 = Offset(cos(endRad) * r1, sin(endRad) * r1);

下面是通过四点形成扇形区域路径的过程，其中 arcToPoint 能做出指定终点的圆弧路径，详细介绍可免费参见 ： 《妙笔生花-第五章》 相关方法。

Path path = Path()
..moveTo(p0.dx, p0.dy)
..lineTo(p1.dx, p1.dy)
..arcToPoint(q1, radius: Radius.circular(r1), clockwise: false)
..lineTo(q0.dx, q0.dy)
..arcToPoint(p0, radius: Radius.circular(r0));

由于 SectorShape 的属性能唯一对应一种扇形区域。 使用为了使用方便，可以在 SectorShape 中提供一个 formPath 来生成路径：另外要注意，需要根据 sweepAngle 的正负确定顺时针与否；根据 sweepAngle 是否大于 pi ，确定区分取大弧。最后，根据 center 坐标对路径进行平移操作。

---->[SectorShape#formPath]----
Path formPath() {
  double startRad = startAngle;
  double endRad = startAngle + sweepAngle;

  double r0 = innerRadius;
  double r1 = outRadius;
  Offset p0 = Offset(cos(startRad) * r0, sin(startRad) * r0);
  Offset p1 = Offset(cos(startRad) * r1, sin(startRad) * r1);
  Offset q0 = Offset(cos(endRad) * r0, sin(endRad) * r0);
  Offset q1 = Offset(cos(endRad) * r1, sin(endRad) * r1);

  bool large = sweepAngle.abs() > pi;
  bool clockwise = sweepAngle > 0;

 Path path = Path()
    ..moveTo(p0.dx, p0.dy)
    ..lineTo(p1.dx, p1.dy)
    ..arcToPoint(q1, radius: Radius.circular(r1), clockwise: clockwise, largeArc: large)
    ..lineTo(q0.dx, q0.dy)
    ..arcToPoint(p0, radius: Radius.circular(r0), clockwise: !clockwise, largeArc: large);
  return path.shift(center);
}

这样就可以很轻松的通过 SectorShape 对象，来展示一个扇形区域。其中你可以通过操作 Paint 画笔，来实现更多的效果：比如使用的 shader 在扇形区域内填充图片、渐变等，这些基础可参见小册。

Paint paint = Paint()
  ..style = PaintingStyle.stroke
  ..color = Colors.blue
  ..strokeWidth = 2;

SectorShape shape = SectorShape(
  center: Offset(size.width / 2, size.height / 2),
  innerRadius: 40,
  outRadius: 80,
  startAngle: 30 * pi / 180,
  sweepAngle: -80 * pi / 180,
);

canvas.drawPath(shape.formPath(), paint);

3. 扇形区域的点击校验

下面来思考一个问题：当手指或鼠标点在界面上，如何校验该点是否在 扇形区域 之内。如下图，很明显 p1 在其中，p2 不在。如何通过代码进行校验呢？

其实，思路很简单，点落在扇心区域内，需要满足两个条件：

[1]. 扇心与落点的距离 d 在 [innerRadius,outRadius]。
[2]. 扇心与落点的夹角在 [startAngle,startAngle+sweepAngle] 之间。

由于扇形区域的信息都存储在 SectorShape 类中，所以可以在其中定义 contains 方法，用于校验点是否在扇形区内：

---->[SectorShape#contains]----
bool contains(Offset p) {
  // Todo
}

下面，来实现如下效果，在按下时，落点在扇心区域内时，区域显示填充色示意，抬起时恢复：

校验逻辑如下，其中 校验环形区域 非常简单，落点与中心距离算出来比较一下即可。如果不再环中，就可以立刻判定为失败并返回。关于角度的校验：逆时针扫描时，终点小于起点；顺时针扫描时，终点大于起点；所以要根据 sweepAngle 区分判断：

---->[SectorShape#contains]----
bool contains(Offset p) {
  // 校验环形区域
  double l = (p - center).distance;
  bool inRing = l <= outRadius && l >= innerRadius;
  if (!inRing) return false;

  // 校验角度范围
  double a = (p - center).direction;
  double endArg = startAngle + sweepAngle;
  double start = startAngle;
  if(sweepAngle > 0){
    return a >= start && a <= endArg;
  }else{
    return a <= start && a >= endArg;
  }
}

这样在绘制时，只要通过下面 tag1 处代码，使用 shape.contains 方法，就能校验 p 点是否在扇形区内，如果在，则绘制扇形填充。核心的逻辑就是这些，想看详细的效果可参见源码： 【sector/02】

---->[Paper#paint]----
SectorShape shape = SectorShape(
  center: Offset(size.width / 2, size.height / 2),
  innerRadius: 40,
  outRadius: 80,
  startAngle: 30 * pi / 180,
  sweepAngle: 280 * pi / 180,
);

bool contain = shape.contains(p); // tag1

if(contain){
 canvas.drawPath(shape.formPath(), paint);
 Paint paint2 = Paint()..style=PaintingStyle.stroke;
 canvas.drawPath(shape.formPath(), paint2);
}

4. 几何校验与 Path 校验的区别

有些聪明的小伙伴可能会问：

能问出这个问题，说明对绘制的基础掌握的还是比较牢固的。Path#contains 方法对于不规则的图形校验是至上法宝。但对于标准图形，通过几何方法进行校验比较简单，就像到楼下超市买瓶饮料，没必要开车去买。

为此，我做了一个小测试，看看两者在 百万次校验下的表现。如下 tag1 是使用 Path 判断，tag2 是上面基于几何型的判断。进行了两组四项测试，表现如下：

SectorShape shape = SectorShape(
  center: Offset.zero,
  innerRadius: 40,
  outRadius: 80,
  startAngle: 30 * pi / 180,
  sweepAngle: 80 * pi / 180,
);

// Offset offset = const Offset(112.7, 148.4);
Offset offset = const Offset(0, 0);
Path path = shape.formPath();
int time = DateTime.now().millisecondsSinceEpoch;
for (int i = 0; i < 1000000; i++) {
  // path.contains(offset); // tag1
  // shape.contains(offset); // tag2
}
int endTime = DateTime.now().millisecondsSinceEpoch;
print('${endTime - time}ms');

可以看出通过几何形的判断要快一些，这也是最直接的方式。当初步校验不合格，可以直接结束判断，而且其中只是基本的运算符计算，没有涉及复杂的循环判断。对于标准图形来说，这种方式既有效，又便捷，是比较好的。

但千万别会错意，我并不是说 path.contains 方法耗时，百万次才耗时两三百毫秒，如果不是超大批量的路径遍历校验，基本上也没什么影响。一般界面上同时校验几十个路径就顶天了，所以也不用担心，就像一秒赚几百万，不必要为丢了一毛钱而忧心忡忡。

到这里，扇形区域路径的获取、绘制与点击校验就完成了。对于 饼状图 而言，相当于最基础的材料已经准备完毕。下一篇，将基于本文的扇形区域，简单实现一个 饼状统计图 。那本文就到这里，谢谢观看 ~