QPainterPath 不规则提示框(二)

前一篇讲过不规则提示框,但是提示框的方向是固定的,不能达到随意变换方向的效果,本接讲述可以动态变换方向的提示框

先看效果图

图1

图2

图3

图4

如上图1所示,上一篇文章的代码可以达到类似效果

?本片文章我只介绍变动部分,尽可能的做到详细吧

??我先说原理,整个窗口包含两个布局器,水平布局和垂直布局,还有2个空间填充器,最后一个当然是显示消息的窗口,显示消息的窗口可以定制

图5

?

整个窗口可以使用ui来做,也可以使用纯代码来控制,我使用了ui做布局部分,如图5,空间填充器是动态加入到布局中的??,代码如下

?

  1 case TOPLEFT://箭头朝左上
  2
  3 {
  4
  5 ui->horizontalLayout->addSpacerItem(new QSpacerItem(size().width() / 8, 0
  6
  7 , QSizePolicy::Maximum, QSizePolicy::Minimum));
  8
  9 ui->horizontalLayout->addWidget(_p->messageWidget);//消息显示窗口
 10
 11 ui->horizontalLayout->setStretch(0, 1);//设置空格和窗口长度比例
 12
 13 ui->horizontalLayout->setStretch(1, 7);
 14
 15 ui->verticalLayout->insertSpacerItem(0, new QSpacerItem(0, size().height() / 2
 16
 17 , QSizePolicy::Minimum, QSizePolicy::Maximum));
 18
 19 ui->verticalLayout->setStretch(0, 1);
 20
 21 ui->verticalLayout->setStretch(1, 1);
 22
 23 }
 24
 25 break;
 26
 27 case BOTTOMLEFT://箭头朝左下
 28
 29 {
 30
 31 ui->horizontalLayout->addSpacerItem(new QSpacerItem(size().width() / 8, 0
 32
 33 , QSizePolicy::Maximum, QSizePolicy::Minimum));
 34
 35 ui->horizontalLayout->addWidget(_p->messageWidget);
 36
 37 ui->horizontalLayout->setStretch(0, 1);
 38
 39 ui->horizontalLayout->setStretch(1, 7);
 40
 41 ui->verticalLayout->addSpacerItem(new QSpacerItem(0, size().height() / 2
 42
 43 , QSizePolicy::Minimum, QSizePolicy::Maximum));
 44
 45 ui->verticalLayout->setStretch(0, 1);
 46
 47 ui->verticalLayout->setStretch(1, 1);
 48
 49 }
 50
 51 break;
 52
 53 case BOTTOMRIGHT://箭头朝 右下
 54
 55 {
 56
 57 ui->horizontalLayout->addWidget(_p->messageWidget);
 58
 59 ui->horizontalLayout->addSpacerItem(new QSpacerItem(0, 0
 60
 61 , QSizePolicy::Expanding, QSizePolicy::Minimum));
 62
 63 ui->horizontalLayout->setStretch(0, 7);
 64
 65 ui->horizontalLayout->setStretch(1, 1);
 66
 67 ui->verticalLayout->addSpacerItem(new QSpacerItem(0, 0
 68
 69 , QSizePolicy::Minimum, QSizePolicy::Expanding));
 70
 71 ui->verticalLayout->setStretch(0, 1);
 72
 73 ui->verticalLayout->setStretch(1, 1);
 74
 75 }
 76
 77 break;
 78
 79 case TOPRIGHT://箭头朝右上
 80
 81 {
 82
 83 ui->horizontalLayout->addWidget(_p->messageWidget);
 84
 85 ui->horizontalLayout->addSpacerItem(new QSpacerItem(0, 0
 86
 87 , QSizePolicy::Expanding, QSizePolicy::Minimum));
 88
 89 ui->horizontalLayout->setStretch(0, 7);
 90
 91 ui->horizontalLayout->setStretch(1, 1);
 92
 93 ui->verticalLayout->insertSpacerItem(0, new QSpacerItem(0, 0
 94
 95 , QSizePolicy::Minimum, QSizePolicy::Expanding));
 96
 97 ui->verticalLayout->setStretch(0, 1);
 98
 99 ui->verticalLayout->setStretch(1, 1);
100
101 }
102
103 break;

整个窗口背景色透明后需要自己绘制窗口颜色,长款北京形状创建代码如下

  1 QPainterPath rectPath, triPath;
  2
  3 switch (posStyle)
  4
  5 {
  6
  7 case 1:
  8
  9 {
 10
 11  rectPath.addRoundRect(QRect(size.width() / 8
 12
 13  , size.height() / 2
 14
 15  , size.width() / 8 * 7
 16
 17  , size.height() / 2)
 18
 19  , 10);
 20
 21  triPath.moveTo(0, 0);
 22
 23  triPath.lineTo(size.width() / 4, size.height() / 2);
 24
 25  triPath.lineTo(size.width() / 8 * 3, size.height() / 2);
 26
 27  triPath.lineTo(0, 0);
 28
 29 }
 30
 31 break;
 32
 33 case 2:
 34
 35 {
 36
 37  rectPath.addRoundRect(QRect(0
 38
 39  , size.height() / 2
 40
 41  , size.width() / 8 * 7
 42
 43  , size.height() / 2)
 44
 45  , 10);
 46
 47  triPath.moveTo(size.width(), 0);
 48
 49  triPath.lineTo(size.width() / 4 * 3, size.height() / 2);
 50
 51  triPath.lineTo(size.width() / 8 * 5, size.height() / 2);
 52
 53  triPath.lineTo(size.width(), 0);
 54
 55 }
 56
 57 break;
 58
 59 case 3:
 60
 61 {
 62
 63  rectPath.addRoundRect(QRect(0
 64
 65  , 0
 66
 67  , size.width() / 8 * 7
 68
 69  , size.height() / 2)
 70
 71  , 10);
 72
 73  triPath.moveTo(size.width(), size.height());
 74
 75  triPath.lineTo(size.width() / 4 * 3, size.height() / 2);
 76
 77  triPath.lineTo(size.width() / 8 * 5, size.height() / 2);
 78
 79  triPath.lineTo(size.width(), size.height());
 80
 81 }
 82
 83 break;
 84
 85 case 4:
 86
 87 {
 88
 89  rectPath.addRoundRect(QRect(size.width() / 8
 90
 91  , 0
 92
 93  , size.width() / 8 * 7
 94
 95  , size.height() / 2)
 96
 97  , 10);
 98
 99  triPath.moveTo(0, size.height());
100
101  triPath.lineTo(size.width() / 4, size.height() / 2);
102
103  triPath.lineTo(size.width() / 8 * 3, size.height() / 2);
104
105  triPath.lineTo(0, size.height());
106
107 }
108
109 break;
110
111 }
112
113 rectPath.addPath(triPath);    //添加子闭合路径
114
115 return rectPath;

如此创建的提示窗口,在使用过程中需要用户根据箭头的指向 自己去移动窗口?,paintEvent函数没有变化

================================================?

前边介绍的这两种不规则图形的绘制都是直接绘制在窗口上的,接下来我再介绍一种绘制不规则图形的方式?,只做大概讲述,具体实现代码我就不做过多的讲解 了,这种方式的原理就是贴图,我们把想要绘制的不规则图形先绘制到图片上,然后对图片做各种处理,比如旋转、镜像、平移等操作,然后在把图片绘制到窗口 上,这样做的好处是,这个不规则的形状可以随意变化,而不需要更改很多的代码。下面我写一下这种方式的伪代码

void 窗口重回函数()

{

根据QImage构造QPainter对象或者指针

构造如图1所示的不规则QPainterPath路径

使用绘图对象把该路径绘制到QImage上?

使用绘图对象把QImage绘制到窗口上?

}?

?

时间: 2024-10-27 12:40:18

QPainterPath 不规则提示框(二)的相关文章

QPainterPath 不规则提示框

currentPosition()是最后一次绘制后的“结束点”(或初始点),使用moveTo()移动currentPosition()而不会添加任何元素. QPainterPath ?合并: 1.方法1:connectPath合并成一个路径,从第一个路径的最后一个点链接一条直线到第二个路径 2.方法2:addPath添加一个新路径作为子闭合路径 测试截图如下: 图1 addPath演示 图2 connectPath演示 上代码: 准备工作,设置窗口背景透明.置顶.无边框 setWindowFla

qt之自定义提示框(不规则提示框,右下角弹窗)

http://blog.sina.com.cn/s/blog_a6fb6cc90101e4r8.html http://blog.sina.com.cn/s/blog_a6fb6cc90101dtav.html

第三方框架MBProgressHUD-----实现各种提示框

程序运行显示如下 : 点击按钮实现对应的提示框: 这里只截取了其中一张图,有兴趣的可以自己运行程序,查看其他的几种提示框哟!!! 第三方框架MBProgressHUD的下载地址:https://github.com/jdg/MBProgressHUD 程序代码如下 : ////  ViewController.m//  第三方框架--提示框////  Created by mac1 on 15/10/5.//  Copyright (c) 2015年 www.iphonetrain.com. A

jQuery打造智能提示插件二(可编辑下拉框)

在上一篇 jQuery打造智能提示插件 上改进,增加下拉按钮,修复点击下拉区域外不隐藏BUG 效果 下拉按钮素材: js封装,注意红色部分为BUG修复,然后传入boxwidth不带px: /* /// <reference path="jquery-autocomplete2.0.js" /> zhangs 20140516 */ (function($) { $.fn.combox = function(options) { var KEY = { UP: 38, DOW

HTML5 微信二维码提示框

这是一个js的小案例,主要效果是显示一个微信二维码的提示框,非常简单实用. 源码如下: JS部分 <script src="js/jquery-1.8.3.min.js"></script> <style> *{padding: 0; margin: 0} .wb-box{ position: fixed; width: 100%; height: 100%; background: rgba(255,255,255,0.8); display: n

替代alert的消息框和提示框

alert提示框由于外观不太友好,所以一般都不用alert了. 我在这里使用bootstrap的样式,写了一个可以单独显示消息,也可以确认取消的提示框. 使用的外观如下: 一:单独显示消息: 二:确认和取消: 单独显示消息的方法传递类型,信息,显示时间以及回掉函数.其中通过重载可以只传递信息. 确认和取消的方法传递类型,信息以及回掉函数.其中可以通过重载可以只传递信息和确认后执行的回掉函数.如果点击取消就去隐藏该提示框. 下面是代码: 1 //success 成功 2 //info 信息 3 /

EasyUI系列学习(六)-Tooltip(提示框)

一.创建组件 0.Tooltip不依赖其他组件 1.使用class加载 <a href="#" class="easyui-tooltip" title="这是一个提示信息">Hover me</a> 2.使用js加载 <a href="#" id="tBox" title="这是一个提示信息">Hover me</a> <scrip

UI基础——提示框

提示框的种类有很多,废话不多说,直接上代码 一.文本提示框 运行结果如下: 代码实现如下: 1 @interface ViewController () 2 // 添加方法 3 - (IBAction)add; 4 // 移除方法 5 - (IBAction)remove; 6 // 商品容器 7 @property (weak, nonatomic) IBOutlet UIView *shopsView; 8 9 @property (weak, nonatomic) IBOutlet UIB

另类提示框

我这里说的提示框,就是当用户将鼠标移动到需要提示的图标时,就会在这图标的位置出现一个提示框了. 咦,那这有什么好说的呢? 如果你来实现这一效果,你会怎么做呢? 初步的做法嘛,就是利用PS制作一张提示框内容区域的png图片和一张指向位置的箭头png图片,然后利用这张图片作为提示背景,里面输入指定内容呗. 恩,想法简单粗暴,那我们就来初步实现以下吧. 首先你得有两张上述说的图片,图片制作结果如下:             图一                                  图二