Qt 实现画线笔锋效果详细原理及示例代码

所属分类: 软件编程 / C 语言 阅读数: 56
收藏 0 赞 0 分享

前言

之前写过一篇文章介绍Qt中绘制平滑曲线的两种方式,文章在这里。这篇文章详细介绍了绘制的原理和实现方式,那么,如果要在此曲线上实现笔锋效果怎么做呢?

所谓的笔锋效果,就是钢笔书写抬笔时的笔尖,也就是说,绘制曲线抬笔时形成一个笔尖的效果。

话不多说,直接来看效果:

动画效果如下:

实现原理

要实现该效果,需要完成以下几个关键步骤:

1.每两个点形成一个贝塞尔曲线path进行绘制

2.最新的一条path绘制细线(笔锋最细处的宽度)

3.倒数第二条path绘制粗线(正常的线条宽度)

4.在两条path连接处补充点使其过渡平滑

接下来一步步的分析,首先第一条,每两个点形成一个贝塞尔曲线path进行绘制,这个比较简单,就不多讲了吧,也就是说,在move事件中,每来一个新点,就让该点和前一个点生成一个贝塞尔曲线,使用QPainterPath中的quadTo函数,之所以要用贝塞尔曲线,是为了解决折线问题,这个在前面的文章中已经介绍过了。这里就不重复说咯。

我们直接来看第二条: 最新的一个path绘制细线。

这个怎么理解呢?看一个图示:

以上是线条放大的效果,最新的path,也就是上面的newPath,通过当前点和前一个点生成的这条path,绘制一条细线,这条线就作为笔锋,假如这时候抬笔,那么newPath就是最后一条线段,那么笔锋就是这条线来形成的。

做完第二步,我们看一下绘制效果:

第三步:倒数第二条path绘制粗线(正常的线条宽度)
从上面的图示可以看到,我们将最新的newPath绘制细线,那么如果这时候又出现一个新的点,形成了新的path,而之前的newPath就会变成前一个path,这里命名为lastPath,由于该path还是细线,所以这里我们需要将前一个path重新补充绘制成正常的粗线,图示如下:

这里的黄线,也就是我们补充绘制的线条,而最新的path依然是细线,根据以上示意图就很容易明白了。

所以简单来说,就是不断的将最新path绘制成细线,然后将前一个path补充绘制成粗线。

看一下效果:

为了区分不同的path,这里采用了不同的颜色来代表,每一段颜色代表一个path,最新的path就是右边的绿色线条,可以看到最新的path和前一条path由于线宽不同, 所以连接处并不平滑,所以要解决这个问题,需要做最后一步:补点。

什么是补点,就是说我们需要在连接处 根据最新path的线条路径来绘制一系列的点进行填充,使其连接处看起来平滑,图示如下:

上面的圈圈就是补充的点,点与点之间距离越小,看起来就越平滑,而圈圈的圆心点是跟随最新的path线条走的,就是path线的线条高度的中心点,圈圈的半径大小逐渐变小。

再看看补充点后的效果:

可以看到,笔尖黑色的地方线条就是通过补充点来实现的。

那么,问题来了,如何知道最后这条path的路径呢?
其实Qt已经提供了接口,我们通过QPainterPath来生成的曲线,这个类提供了一个函数叫pointAtPercent,定义如下:

这个接口就是返回在path曲线上的坐标点,通过传入百分比来调用,很方便了吧。
我这里的补充点实现方式,就是通过循环的不断的绘制:

//在两个path连接处绘制补充点,使其连接处平滑
void WbCanvasItem::drawPatchPoint(QPainter * painter,QPainterPath path)
{
 qreal temp = (PENWIDTH-3)/100.;
 int k = 0;
 for (qreal i = 0;i < 1; i+=0.01) {
  k++;
  painter->setPen(QPen(Qt::black,PENWIDTH-temp*k, 
        Qt::SolidLine, Qt::RoundCap, Qt::RoundJoin));
  painter->drawPoint(path.pointAtPercent(i));
 }
}

前三步骤代码:

QPainterPath lastPath = obj->StrokeLastPath(PENWIDTH);
m_pRealPainter->fillPath(lastPath,Qt::red);//填充轮廓
path = obj->StrokePath(3);
m_pRealPainter->fillPath(path,Qt::red);//填充轮廓
drawPatchPoint(m_pRealPainter,obj->path());

ok ,整个实现方式已介绍完成,本文主要讲解原理,代码未整理,就不上传了,用到的关键函数已经介绍过,只要明白原理过后,根据原理一步步的操作,就可以实现了。

Qt 实现钢笔画线效果详细原理

更多精彩内容其他人还在看

C语言数组入门之数组的声明与二维数组的模拟

这篇文章主要介绍了C语言数组入门之数组的声明与二维数组的模拟,数组学习的同时也要相应理解C语言指针的作用,需要的朋友可以参考下
收藏 0 赞 0 分享

C语言中变量与其内存地址对应的入门知识简单讲解

这篇文章主要介绍了C语言中变量与其内存地址对应的入门知识简单讲解,同时这也是掌握指针部分知识的基础,需要的朋友可以参考下
收藏 0 赞 0 分享

讲解C语言编程中指针赋值的入门实例

这篇文章主要介绍了讲解C语言编程中指针赋值的入门实例,通过const int i与int *const pi这样两个例子来分析指针的赋值和地址指向,需要的朋友可以参考下
收藏 0 赞 0 分享

C语言中的结构体的入门学习教程

这篇文章主要介绍了C语言中的结构体的入门学习教程,以struct语句定义的结构体是C语言编程中的重要基础,需要的朋友可以参考下
收藏 0 赞 0 分享

C语言编程入门之程序头文件的简要解析

这篇文章主要介绍了C语言编程入门之程序头文件的简要解析,包括头文件重复包含问题等方面的说明,需要的朋友可以参考下
收藏 0 赞 0 分享

C语言编程中的联合体union入门学习教程

这篇文章主要介绍了C语言编程中的联合体union入门学习教程,也是C语言入门学习中的基础知识,需要的朋友可以参考下
收藏 0 赞 0 分享

C语言中数组作为函数的参数以及返回值的使用简单入门

这篇文章主要介绍了C语言中数组作为函数的参数以及返回值的使用简单入门,这里以一维数组作为基本条件进行例子讲解,需要的朋友可以参考下
收藏 0 赞 0 分享

MySQL的内存表的基础学习教程

这篇文章主要介绍了MySQL的内存表的基础学习教程,包括内存表的创建以及使用限制等等,需要的朋友可以参考下
收藏 0 赞 0 分享

C++中头文件的概念与基本编写方法

这篇文章主要介绍了C++中头文件的概念与基本编写方法,是C++入门学习中的基础知识,需要的朋友可以参考下
收藏 0 赞 0 分享

jQuery移动页面开发中主题按钮的设计示例

这篇文章主要介绍了jQuery移动页面开发中主题按钮的设计示例,jQuery是当今最具人气的JavaScript开发类库,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多