如何在Flutter中使用quadraticBezierTo绘制到中点的线条？

你当前使用quadraticBezierTo的方式，本质是以p2为控制点，绘制从p1到p3的二次贝塞尔曲线，线条不会经过p2，这和预期效果不符。根据需求不同，有两种解决方案：

1. 绘制依次经过三个点的折线 #

如果预期是线条直接连接p1→p2→p3，无需使用贝塞尔曲线，直接用lineTo即可：

final path = Path();
path.moveTo(p1.x, p1.y);
path.lineTo(p2.x, p2.y);
path.lineTo(p3.x, p3.y);

2. 绘制平滑经过三个点的连续曲线 #

如果预期是一条平滑曲线且经过p1、p2、p3三个点，可通过以下两种方式实现：

方案A：拆分二次贝塞尔曲线 #

计算相邻点的中间控制点，实现曲线平滑过渡：

final path = Path();
// 取p1与p2的中点作为第一段曲线的控制点
final control1 = Offset((p1.x + p2.x) / 2, (p1.y + p2.y) / 2);
// 取p2与p3的中点作为第二段曲线的控制点
final control2 = Offset((p2.x + p3.x) / 2, (p2.y + p3.y) / 2);

path.moveTo(p1.x, p1.y);
path.quadraticBezierTo(control1.x, control1.y, p2.x, p2.y);
path.quadraticBezierTo(control2.x, control2.y, p3.x, p3.y);

方案B：使用三次贝塞尔曲线 #

调整两个控制点，让曲线经过p2点：

final path = Path();
path.moveTo(p1.x, p1.y);
// 计算靠近p1和p3的控制点，确保曲线经过p2
final c1 = Offset(p1.x + (p2.x - p1.x) * 2/3, p1.y + (p2.y - p1.y) * 2/3);
final c2 = Offset(p3.x + (p2.x - p3.x) * 2/3, p3.y + (p2.y - p3.y) * 2/3);
path.cubicTo(c1.x, c1.y, c2.x, c2.y, p3.x, p3.y);

内容的提问来源于stack exchange，提问作者Surime