绘制贝塞尔曲线
最近想要实现一个温度的走势图,第一种方法是使用线段连接两个点的方法实现,第二种方法使用三阶贝塞尔曲线以达到平滑的效果。实际效果见下图:
主要的代码如下:
...
QPoint start_pos; // 开始点
QPoint end_pos; // 结束点
QPainterPath path(start_pos);
// 控制点
QPoint c1((start_pos + end_pos).x() / 2, start_pos.y());
QPoint c2((start_pos + end_pos).x() / 2, end_pos.y());
path.cubicTo(c1 ,c2 ,end_pos);
painter.drawPath(path);
...
也可以根据三次方贝塞尔曲线公式,将坐标代入公式:
QPoint p0 = QPoint(330, 140);
QPoint p1 = QPoint(463, 140);
QPoint p2 = QPoint(468, 308);
QPoint p3 = QPoint(614, 314);
for (double t=0; t<=1.0; t+=0.01)
{
double t1 = 1-t;
int x = p0.x()*pow(t1, 3) + 3*p1.x()*t*pow(t1, 2) + 3*p2.x()*pow(t, 2)*t1 + p3.x()*pow(t, 3);
int y = p0.y()*pow(t1, 3) + 3*p1.y()*t*pow(t1, 2) + 3*p2.y()*pow(t, 2)*t1 + p3.y()*pow(t, 3);
painter->drawPoint(x, y);
}
代码效果图,红色的线就是画出的贝塞尔曲线: