• 7946阅读
  • 28回复

基于QtWidget的聊天气泡 [复制链接]

上一主题 下一主题
离线nigoole
 

图酷模式  只看楼主 倒序阅读 楼主  发表于: 2019-06-16
1、更新表情插入功能。
2、重新调整算法。
3、较之前的版本完善了很多功能
老版本:聊天气泡

新版展示,功能未完善,陆续更新中。





1、目前表情缺陷,暂时不支持动态播放。
有句话说得好:好好学习,天天向上。加油~~!有上船的朋友联系企鹅393320854
离线liudianwu

只看该作者 1楼 发表于: 2019-06-16
倪大侠牛逼啊!
欢迎关注微信公众号:Qt实战 (各种开源作品、经验整理、项目实战技巧,专注Qt/C++软件开发,视频监控、物联网、工业控制、嵌入式软件、国产化系统应用软件开发)QQ:517216493  WX:feiyangqingyun  QQ群:751439350
离线nigoole

只看该作者 2楼 发表于: 2019-06-16
回 liudianwu 的帖子
liudianwu:倪大侠牛逼啊![表情] [表情] [表情]  (2019-06-16 13:40) 

感谢刘总捧场~!
有句话说得好:好好学习,天天向上。加油~~!有上船的朋友联系企鹅393320854
离线gaoheyang

只看该作者 3楼 发表于: 2019-06-17
文本能选择吗
离线305750665

只看该作者 4楼 发表于: 2019-06-17
倪总太牛逼了
雨田哥: 群号:853086607
QQ: 3246214072

刘典武-feiyangqingyun:专业各种自定义控件编写+UI定制+输入法定制+视频监控+工业控制+仪器仪表+嵌入式linux+各种串口网络通信,童叟无欺,量大从优,欢迎咨询购买定制!QQ:517216493
离线305750665

只看该作者 5楼 发表于: 2019-06-17
倪总也玩梦幻西游?
雨田哥: 群号:853086607
QQ: 3246214072

刘典武-feiyangqingyun:专业各种自定义控件编写+UI定制+输入法定制+视频监控+工业控制+仪器仪表+嵌入式linux+各种串口网络通信,童叟无欺,量大从优,欢迎咨询购买定制!QQ:517216493
离线listen342325

只看该作者 6楼 发表于: 2019-06-17
能不能复制?widget不断重绘会不会高cpu?
Qt 不错的选择
离线文华在线

只看该作者 7楼 发表于: 2019-06-17
不错的界面
离线nigoole

只看该作者 8楼 发表于: 2019-06-17
回 gaoheyang 的帖子
gaoheyang:文本能选择吗
 (2019-06-17 08:30) 

选择功能正在改进!~目前支持单个item的文本操作,具体的拖拽划线选择还在改进中。
有句话说得好:好好学习,天天向上。加油~~!有上船的朋友联系企鹅393320854
离线nigoole

只看该作者 9楼 发表于: 2019-06-17
回 305750665 的帖子
305750665:倪总也玩梦幻西游? (2019-06-17 09:10) 

很多年前的回忆了~抓了张以前的照片出来!应该是13年的
有句话说得好:好好学习,天天向上。加油~~!有上船的朋友联系企鹅393320854
离线nigoole

只看该作者 10楼 发表于: 2019-06-17
回 文华在线 的帖子
文华在线:不错的界面[表情]  (2019-06-17 10:17) 

感谢,继续努力中。。。
有句话说得好:好好学习,天天向上。加油~~!有上船的朋友联系企鹅393320854
离线nigoole

只看该作者 11楼 发表于: 2019-06-17
回 listen342325 的帖子
listen342325:能不能复制?widget不断重绘会不会高cpu? (2019-06-17 09:31)

纯文本的数据,cpu波动不大,如果多放几张高清大图消耗还有得看,不过图片可以处理,显示没必要加载高清,可以先图片弄成预览的分辨率,点击查看高清大图。
另外列表也在改进中,会做成只会刷新固定的个数的item,滚动切换当前显示的item,这样大大减少CPU开支!
有句话说得好:好好学习,天天向上。加油~~!有上船的朋友联系企鹅393320854

只看该作者 12楼 发表于: 2019-06-17
倪总厉害,单纯的技术没有任何广告点赞,要是贴上代码就更完美了
离线nigoole

只看该作者 13楼 发表于: 2019-06-17
回 青春的年代 的帖子
青春的年代:倪总厉害,单纯的技术没有任何广告点赞,要是贴上代码就更完美了 (2019-06-17 11:45) 

暂时还没打算开源!~后面再说吧~~毕竟还是雏形!
有句话说得好:好好学习,天天向上。加油~~!有上船的朋友联系企鹅393320854
离线nigoole

只看该作者 14楼 发表于: 2019-06-17
简单介绍下富文本的绘制吧:
QTextDocument+QPainter完成的,
  1. QTextDocument document;
  2.     QTextOption option;
  3.     option.setAlignment(Qt::AlignJustify);
  4.     option.setWrapMode(QTextOption::WordWrap);
  5.     document.setHtml(item->m_strText);
  6.     document.setDefaultTextOption(option);
  7.     document.setDefaultFont(item->m_font);
  8.     document.setDocumentMargin(2);
  9.     document.setTextWidth(bubbleRect.width());
  10.     document.setDefaultStyleSheet(QString("*{color: %1;}").arg(item->m_strTextColor));
  11.     painter->translate(bubbleRect.topLeft());
  12.     document.drawContents(painter);// 绘制

另外试了下gif动图,目前只能依赖QMovie实现,效果勉强能接受,但是执行效率有点头疼,后面在研究改进算法

有句话说得好:好好学习,天天向上。加油~~!有上船的朋友联系企鹅393320854
离线mengkun

只看该作者 15楼 发表于: 2019-06-18
换用新版的 QQ 小表情吧,感觉好看些

新版QQ小表情.zip (616 K) 下载次数:68

离线nigoole

只看该作者 16楼 发表于: 2019-06-18
回 mengkun 的帖子
mengkun:换用新版的 QQ 小表情吧,感觉好看些
[图片]
[图片] (2019-06-18 08:45) 

OK!~感谢捧场
有句话说得好:好好学习,天天向上。加油~~!有上船的朋友联系企鹅393320854
离线nigoole

只看该作者 17楼 发表于: 2019-06-20
技术更新(GIF图像刷新解析)
1、最开始用的QMovie做了个demo,效果差强人意。
2、最后通过几个qt大佬的指点总结,用定时器来完成。
感谢雨田大佬lgao622的技术指点

具体操作步骤:
1、首先文本(包括表情)数据肯定是用QTextDocument来缓存。
2、判断文本数据是否包含gif图像资源,如果有,用QImageReader将图像文件每帧图像缓存到map映射表中,同时需要注意将每下一帧的延迟累加做成一个时间轴,每个时间点插入当前帧的图像,完事用QMap缓存。
3、列表里面启动一个定时器,间隔10毫秒。
4、遍历item的gif缓存数据,每到一个时间点抓取当前帧的图像,修改textdocumet的resouce资源,然后重新update下列表完成。

代码片段:
图像解析
  1. /**
  2. * @brief BubbleItemInfo::ReadGifPixmaps
  3. * 读取Gif图像文件每帧的图像数据,缓存到队列
  4. * @param strName
  5. */
  6. void BubbleItemInfo::ReadGifPixmaps(const QString &strName)
  7. {
  8.     if (strName.isEmpty()) return;
  9.     QImageReader reader;
  10.     reader.setFileName(strName);
  11.     if (reader.supportsAnimation())
  12.     {
  13.         QMap<int,QPixmap> pixmaps;
  14.         int nCount = reader.imageCount();
  15.         int ndelay = 0;
  16.         for (int i = 0; i < nCount; i++) {
  17.             // 跳到顺序号为i的图像
  18.             reader.jumpToImage(i);
  19.             // 读取图像
  20.             if (reader.canRead())
  21.             {
  22.                 QImage image = reader.read();
  23.                 ndelay += reader.nextImageDelay();
  24. //                image.save(QString("ttt_%1.png").arg(ndelay));
  25.                 pixmaps.insert(ndelay, QPixmap::fromImage(image));
  26.             }
  27.         }
  28.         m_gifIndex.insert(strName, 0);
  29.         m_gifInfos.insert(strName, pixmaps);
  30.     }
  31. }
遍历刷新:
  1. /**
  2. * @brief BubbleItemInfo::RefreshDocumentResource
  3. * @param bOk 返回true,表示有刷新
  4. */
  5. void BubbleItemInfo::RefreshDocumentResource(bool &bOk)
  6. {
  7.     for (int i = 0; i < m_listEmotionUrl.size(); i++) {
  8.         QString strFile = m_listEmotionUrl.at(i);
  9.         if (!m_gifInfos.contains(strFile)) continue;
  10.         int index = m_gifIndex.value(strFile);
  11.         QMap<int, QPixmap> pixmaps = m_gifInfos.value(strFile);
  12.         if (index > pixmaps.lastKey()) {
  13.             index = 0;
  14.         }
  15.         // 更新time id,累加,步进10
  16.         m_gifIndex.insert(strFile, index + 10);
  17.         if (pixmaps.contains(index)) {
  18.             QPixmap pixmap = pixmaps.value(index);
  19.             if (pixmap.isNull()) { continue; }
  20.             bOk = true;
  21.             m_document->addResource(QTextDocument::ImageResource, QUrl(strFile), pixmap);
  22.         } /*else if (0 == index && pixmaps.size() > 2) {
  23.             bOk = true;
  24.             m_document->addResource(QTextDocument::ImageResource, QUrl(strFile), pixmaps.first());
  25.         }*/
  26.     }
  27. }



本帖提到的人: @lgao622 @305750665
有句话说得好:好好学习,天天向上。加油~~!有上船的朋友联系企鹅393320854
离线liuchangyin

只看该作者 18楼 发表于: 2019-06-20
    
离线305750665

只看该作者 19楼 发表于: 2019-06-20
倪总又谦虚了。谈不上指点,就相互交流学习
雨田哥: 群号:853086607
QQ: 3246214072

刘典武-feiyangqingyun:专业各种自定义控件编写+UI定制+输入法定制+视频监控+工业控制+仪器仪表+嵌入式linux+各种串口网络通信,童叟无欺,量大从优,欢迎咨询购买定制!QQ:517216493
离线fzw003

只看该作者 20楼 发表于: 2019-06-21
QFrame 插入QTextEdit【git上面有demo,移库后 以前的帖子都丢了】 QFrame上面爱放什么东西放什么东西。纯widget+QtextEdit,基本上得把QtextEdit功能摸个遍的玩。
离线nigoole

只看该作者 21楼 发表于: 2019-06-21
回 fzw003 的帖子
fzw003:QFrame 插入QTextEdit【git上面有demo,移库后 以前的帖子都丢了】 QFrame上面爱放什么东西放什么东西。纯widget+QtextEdit,基本上得把QtextEdit功能摸个遍的玩。 (2019-06-21 08:07) 

方法很多,自己想尝试不一样的方法,或者说想用自己的想法去做一些尝试!~学习学习呗~
有句话说得好:好好学习,天天向上。加油~~!有上船的朋友联系企鹅393320854
离线nigoole

只看该作者 22楼 发表于: 2019-06-21
昨天按照qq的表情框做了一份表情选择界面,同样采用QWidget完成的,鼠标悬停的时候,如果是gif会自动播放。
动图上传不了,来2个截图吧!



表情数据加载是直接加载目录,指定目录即可。
有句话说得好:好好学习,天天向上。加油~~!有上船的朋友联系企鹅393320854
离线ustone

只看该作者 23楼 发表于: 2019-10-25
图片是怎么绘制的?支持右键保存吗?
离线nigoole

只看该作者 24楼 发表于: 2019-10-25
回 ustone 的帖子
ustone:图片是怎么绘制的?支持右键保存吗? (2019-10-25 12:44) 

支持另存的
有句话说得好:好好学习,天天向上。加油~~!有上船的朋友联系企鹅393320854
离线ustone

只看该作者 25楼 发表于: 2019-10-25
代码开源吗?
离线deandx

只看该作者 26楼 发表于: 2020-01-03
代码开源吗,想学习下
离线nigoole

只看该作者 27楼 发表于: 2020-01-07
回 deandx 的帖子
deandx:代码开源吗,想学习下 (2020-01-03 16:18) 

上一个完整版本开源了的,你可以先看看!~这个实现方式大致相同,只是换了种思路而已!
有句话说得好:好好学习,天天向上。加油~~!有上船的朋友联系企鹅393320854
离线jobfind

只看该作者 28楼 发表于: 2021-10-18
圣骑士 牛X 啊    
快速回复
限100 字节
 
上一个 下一个