当前位置:   article > 正文

Qt桌面白板工具其二(荧光笔的实现方法并解决透明度导致的重合深色点问题)_qt 白板开发

qt 白板开发

上一篇文章:Qt桌面白板工具其一(解决曲线不平滑的问题——贝塞尔曲线)

一、前言:
我比较啰嗦,可能会说很多废话。在上一篇文章中,我主要分享了有关贝塞尔算法解决曲线不平滑的问题,简单来说我们可以通过算法,对所搜集的一系列点进行重新绘制,在画布中绘制我们需要的QPaintPath路径。这个过程中,我一直有在考虑荧光笔的实现问题。荧光笔,简单来说就是绘制一条半透明的线段,常见于需要对一些显示文本进行高亮提示。而采用上述贝塞尔整条路径线条绘制的方法,确实能实现。不过一旦放弃整段路径绘制,转而采用线段叠加的方式绘制线条,就难免会出现因为多条不透明线段叠加,所产生的重复点颜色较深的情况,如图:
在这里插入图片描述
经过尝试,一旦整段路径,也就是QPaintPath中添加的线段过多,单次绘制的时候会产生比较严重的耗时。这在鼠标拖动moveevent和刷新显示paintevent中,是不能忍受的。如果需要采用贝塞尔算法,我会选择在鼠标move过程中先采用线段叠加法,在鼠标release释放的时候再统一绘制所采集的点集和线段。又或者将线段拆开,但难免会有凸点和重合点。
上面都是题外话了,本篇文章中想要实现的,是在move过程中,即便采用线段叠加,也能实现荧光笔的效果。这个要求,需要我实现线段叠加的时候,不能产生重合区域颜色较深现象。这个问题在过往很长一段时间内困扰了我很久,但现在终于是解决了。

二、混合模式
首先,分享一个概念QPainter.CompositionMode(附带链接),这是QPainter的绘制混合模式。
被绘制的画布叫做“目标”,需要绘制上去的东西叫做“源”。
而一般来说,QPainter默认的是CompositionMode_SourceOver,即覆盖模式。如果底部有一条实色的红线,你绘制一条半透明绿线,将会产生叠加色。
在这里插入图片描述
图一
而如果选择CompositionMode_Source,则是重合部分都只显示“源”,而忽略“目标”的部分。
在这里插入图片描述
图二
可以看出,虽然绿线是半透明的,但实际上重合部分已经没有了红色。
所以,本文第一张图的绿色重合点,就能完美解决了,即半透明绿色线段的叠加,重合部分只会显示后一条线段的颜色,透明度通道不会产生叠加,进而形成一条完整的半透明统一透明度的线条。
好啦,以上其实只是为了绘制绿色线段而已,不要被这两张图的红线绿线混淆了,实际上我们需要实现的是图一的效果。

三、简单代码分享
以下是我的操作步骤

//画布资源
QImage *draw_image = nullptr;       //qimage画布,最终结果
QImage last_image;                  //记录动作开始前的原图
QImage temp_image;                  //中间的临时图片
QImage layer_image;                 //中间图层,单个动作的图层
QVector<QPointF> ployline_points;	//移动中搜集的点集

void xxx::mousePressEvent(QMouseEvent *event)
{
	last_image = draw_image->copy();	//记录动作开始前的原图
    temp_image = last_image;			//move过程中临时显示的图片层
	layer_image.fill(Qt::transparent);	//图层层,填充透明
	ployline_points.clear();
	ployline_points.append(event->pos());
}

void xxx::mouseMoveEvent(QMouseEvent *event)
{
	//过滤密集点(会影响效果)
    if(qAbs(ployline_points.last().x()-event->pos().x())>15 || qAbs(ployline_points.last().y()-event->pos().y())>15)
    {
        ployline_points.append(event->pos());
        if(ployline_points.count()>=2){
            //画图层
            QPainter painter(&layer_image);										//绘制在透明图层上,不干扰原图
            painter.setCompositionMode(QPainter::CompositionMode_Source);		//这里直接用源来覆盖,不会收到目标的影响
            painter.setRenderHint(QPainter::Antialiasing, true);
            painter.setBackgroundMode(Qt::TransparentMode);						//设置背景模式  将画师的背景模式设置为给定模式
            painter.setPen(current_draw_mode->pen);
            //只画最后两个点线(短线段叠加,不会产生重合深色点)
            painter.drawLine(ployline_points[ployline_points.count()-2],ployline_points.last());
            painter.end();
            //复制原图
            temp_image = last_image;											//拷贝原图
            painter.begin(&temp_image);											//在临时图片层绘制
            painter.setCompositionMode(QPainter::CompositionMode_SourceOver);	//调整为正常的混合模式
            QRect rect = layer_image.rect();
            painter.drawImage(rect, layer_image);								//将图层绘制在临时图片层中
        }
    }
}

void xxx::mouseReleaseEvent(QMouseEvent *event)
{
	QImage image = last_image;		//拷贝原图
    QPainter painter(&image);		//在拷贝层重新绘制搜集点
    painter.setRenderHint(QPainter::Antialiasing, true);
    if(isBezier){
        //贝塞尔优化(也可以不优化,这里不提供代码了)
        QVector<QPointF> points;
        for(int i = 0; i < ployline_points.count(); i++){
            QPointF pt = ployline_points[i];
            if(points.count()<2){
                points.append(pt);
            }else{
                points.append((points.last()+pt)/2);
                points.append(pt);
            }
        }
        drawBezierPath(&painter,points);
    }else{
        drawPolyline(&painter,ployline_points);
    }
    
    //将重新绘制的图片赋给最终图片
    *draw_image = image;
    last_image = draw_image->copy();
    ployline_points.clear();
}

void xxx::paintEvent(QPaintEvent *event)
{
	if(is_drawing){//move中的标志
        QPainter painter(this);
        painter.setRenderHint(QPainter::Antialiasing, true);
        painter.setCompositionMode(QPainter::CompositionMode_SourceOver);
        QRect rect = this->rect();
        painter.drawImage(rect, temp_image, temp_image.rect());//move期间显示临时图片
        painter.end();
    }else{
        //画布源绘制
        if(draw_image)
        {
            QPainter painter(this);
            painter.setBackgroundMode(Qt::TransparentMode);
            painter.setCompositionMode(QPainter::CompositionMode_SourceOver);
            QRect rect = this->rect();
            painter.drawImage(rect, *draw_image);//move结束显示最终图片,即实际的画布源
            painter.end();
        }
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92

paintevent交由负责update的定时器触发,避免paint事件产生过多,绘制耗时导致move事件触发过少,采集点数过少,导致线条不流畅。这里不再赘述。
有什么问题可以在评论区提出,有关荧光笔怎么实现,应该是已经清楚啦。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/知新_RL/article/detail/91730
推荐阅读