最近想要实现一个温度的走势图,第一种方法是使用线段连接两个点的方法实现,第二种方法使用三阶贝塞尔曲线以达到平滑的效果。实际效果见下图:

bezier-curve1

bezier-curve2

主要的代码如下:

...
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);
...

也可以根据三次方贝塞尔曲线公式bezier-curve,将坐标代入公式:

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);
}

代码效果图,红色的线就是画出的贝塞尔曲线:

bezier-curve3

代码下载

标签: Qt, 贝塞尔曲线

添加新评论