自定义控件三部曲之绘图篇（五）Path之贝赛尔曲线和手势轨迹、水波纹效果

在自定义控件的绘图篇中，Path类配合Canvas可以用来实现各种复杂的图形和动画效果，其中贝塞尔曲线和手势轨迹绘制、水波纹效果是非常典型的例子。下面，我们将详细介绍如何在Android中使用Path来实现这些效果。

贝塞尔曲线

贝塞尔曲线是一种在计算机图形学中常用的曲线类型，它可以用来创建平滑的曲线路径。在Android中，Path类提供了quadTo()（二次贝塞尔曲线）和cubicTo()（三次贝塞尔曲线）方法来绘制这类曲线。

二次贝塞尔曲线

二次贝塞尔曲线需要一个起点、一个控制点和一个终点。控制点决定了曲线的弯曲程度。

Java

1Path path = new Path();
2path.moveTo(50, 50); // 起点
3path.quadTo(100, 200, 150, 50); // 控制点 (100, 200)，终点 (150, 50)
4canvas.drawPath(path, paint);

三次贝塞尔曲线

三次贝塞尔曲线则需要一个起点、两个控制点和一个终点，提供了更大的灵活性。

Java

1Path path = new Path();
2path.moveTo(50, 50); // 起点
3path.cubicTo(100, 200, 200, 200, 250, 50); // 第一控制点 (100, 200)，第二控制点 (200, 200)，终点 (250, 50)
4canvas.drawPath(path, paint);

手势轨迹绘制

手势轨迹绘制通常在处理触摸事件时进行，利用Path可以实时记录并绘制用户在屏幕上绘制的轨迹。

Java

1private Path touchPath;
2private float lastTouchX;
3private float lastTouchY;
4
5@Override
6public boolean onTouchEvent(MotionEvent event) {
7    int action = event.getAction();
8
9    if (action == MotionEvent.ACTION_DOWN) {
10        touchPath = new Path();
11        touchPath.moveTo(event.getX(), event.getY());
12        lastTouchX = event.getX();
13        lastTouchY = event.getY();
14    } else if (action == MotionEvent.ACTION_MOVE) {
15        touchPath.quadTo(lastTouchX, lastTouchY, (event.getX() + lastTouchX) / 2, (event.getY() + lastTouchY) / 2);
16        lastTouchX = event.getX();
17        lastTouchY = event.getY();
18        invalidate(); // 强制重绘
19    }
20    return true;
21}
22
23@Override
24protected void onDraw(Canvas canvas) {
25    super.onDraw(canvas);
26    canvas.drawPath(touchPath, paint);
27}

水波纹效果

水波纹效果可以通过动态改变Path中的点和Canvas的透明度来模拟。这里给出一个简化版的概念示例：

Java

1private List<Path> ripplePaths;
2private Paint ripplePaint;
3
4public RippleView(Context context) {
5    super(context);
6    ripplePaths = new ArrayList<>();
7    ripplePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
8    ripplePaint.setStyle(Paint.Style.STROKE);
9}
10
11@Override
12protected void onDraw(Canvas canvas) {
13    super.onDraw(canvas);
14
15    for (int i = 0; i < ripplePaths.size(); i++) {
16        Path path = ripplePaths.get(i);
17        ripplePaint.setAlpha((int) (255 * (1f - (i / 10f))));
18        canvas.drawPath(path, ripplePaint);
19    }
20    
21    // 更新波纹路径和重绘
22    updateRipples();
23    postInvalidateDelayed(16); // 每16ms刷新一次，类似于60fps
24}
25
26private void updateRipples() {
27    for (Path path : ripplePaths) {
28        // 假设每次更新时，波纹半径增加
29        path.reset();
30        path.addCircle(rippleCenterX, rippleCenterY, rippleRadius, Path.Direction.CW);
31        rippleRadius += 10;
32    }
33}

请注意，上述水波纹效果的代码只是一个概念性的示例，实际应用中可能需要考虑更多的细节，例如波纹的生命周期管理、性能优化等。

总结

使用Path类和Canvas，你可以实现从简单的贝塞尔曲线到复杂的手势轨迹绘制和水波纹效果等各种图形和动画。这些技巧对于开发具有丰富视觉效果的应用程序非常有帮助。通过实践和不断尝试，你将能够创作出更多创意十足的自定义控件。