QQ2014的气泡模式的实现方法

[lvxb_tiger]

猜测了下QQ的气泡模式的实现方法：

分为两层，上面一层是windowless richedit, 透明模式；下面一层一个容器，包含有用户头像和气泡图片；下面一层随richedit一起滚动。

添加每一个paragraph后，可以得到这个段落的rang的左上角和右下角，从而得到该paragraph所在的矩形区域rect。然后就在下层的容器中，插入一个气泡，设置其rect；richedit滚动的时候，下层容器处理下事件。

不知道对不对？

[hhhh63]

用html是不是简单一些？

[凌乱哥]

windowless就麻烦了，简单一点就是自绘按钮，不规则透明按钮，贴个图，然后在上面写字就行了

[喜欢吃一口烤肉的啵啵]

要实现的方法很多，最简单的方法，一个窗口搞掂。

[向立天]

不管对不对只要能实现就行

[xiaohuh421]

QQ是DirctUI, 完全自绘的. 只要能实现这样的效果就好, 别人怎么做的, 并不是很重要, 除非是你还处于研究阶段, 到是可以逆向一下, 研究别个怎么实现的.

[赵4老师]

无逆向，不分析。

[lvxb_tiger]

看大家的发言，动不动就自己写。 如果写一个比较完善的richedit，还是且花费不少时间呢。 这里，我不说自己如何实现。只是分析QQ气泡模式的实现方式！

[leeihcy]

曾经也以为是分两层实现的，但再想想这种方法很难做到与文字同步。
要做气泡，有两个难点：
1. 气泡背景怎么画
2. 文字如何布局

画气泡背景，这里要使用一个技巧，QQ里面应该大量采用了这种方式。将Ole的大小设置为(1,1)，用于占位，但在绘制的时候先将气泡画上，然后再调用m_spTextServices->TxDraw画上文字。
至于气泡的位置，在插入一段内容时要记录下这段内容的start cp、end cp，用这两个值去获取相应的坐标，计算出内容大小。

文字的布局，也以为是采用右对齐，但错了。后来通过一些方法拿到qq的richedit rtf流，发现采用的就是缩进而已，通过内容大小就也可以计算也相应的左右缩进。

[lvxb_tiger]

引用 9 楼 leeihcy 的回复:

曾经也以为是分两层实现的，但再想想这种方法很难做到与文字同步。 要做气泡，有两个难点： 1. 气泡背景怎么画 2. 文字如何布局 画气泡背景，这里要使用一个技巧，QQ里面应该大量采用了这种方式。将Ole的大小设置为(1,1)，用于占位，但在绘制的时候先将气泡画上，然后再调用m_spTextServices->TxDraw画上文字。 至于气泡的位置，在插入一段内容时要记录下这段内容的start cp、end cp，用这两个值去获取相应的坐标，计算出内容大小。 文字的布局，也以为是采用右对齐，但错了。后来通过一些方法拿到qq的richedit rtf流，发现采用的就是缩进而已，通过内容大小就也可以计算也相应的左右缩进。

插入大小为（1,1）的占位ole，你的意思是，气泡是一个ole吗？ QQ的应该不是。 烦请分享一下：插入占位Ole的目的是做什么的啊？

[leeihcy]

测试了下，的确不需要把气泡做成ole也行，只要让气泡维护文本的开始位置和结束位置就可以了。 不过我这个气泡现在还有一个bug，tab占用的宽度和它所处的位置有关系，如果一行中有tab制表符可能导致文本宽度计算错误.

[smilecabbage]

嘿嘿，这个功能表示已经实现了， 用的是html代码，简单很多， 你要是用MFC写，那真要命。

[lvxb_tiger]

引用 11 楼 leeihcy 的回复:

测试了下，的确不需要把气泡做成ole也行，只要让气泡维护文本的开始位置和结束位置就可以了。 不过我这个气泡现在还有一个bug，tab占用的宽度和它所处的位置有关系，如果一行中有tab制表符可能导致文本宽度计算错误.

可以这样： 插入到richedit的时候，通过ITextRange 的GetPoint获取 范围，然后根据edit的大小，设置小缩进。应该就可以了。

[hanzikai]

想问一下如果设置缩进的话，怎么在大小改变的时候动态设置呢？

[leeihcy]

引用 13 楼 hanzikai 的回复:

想问一下如果设置缩进的话，怎么在大小改变的时候动态设置呢？

例如一个右对齐的气泡，在窗口大小改变时，要重新更新缩进，可以这样： 1. 将这个气泡的内容左对齐，测量出正常状态下气泡内容的宽和高。 2. 然后用richedit的宽度减去气泡内容的宽度，就可以拿到缩进值了。把这个值作为新的left-indent即可 需要注意的是，在readonly状态下的richedit设置indent会失败，需要对readonly 状态做下修改

[hanzikai]

引用 14 楼 leeihcy 的回复:

[quote=引用 13 楼 hanzikai 的回复:] 想问一下如果设置缩进的话，怎么在大小改变的时候动态设置呢？

例如一个右对齐的气泡，在窗口大小改变时，要重新更新缩进，可以这样： 1. 将这个气泡的内容左对齐，测量出正常状态下气泡内容的宽和高。 2. 然后用richedit的宽度减去气泡内容的宽度，就可以拿到缩进值了。把这个值作为新的left-indent即可 需要注意的是，在readonly状态下的richedit设置indent会失败，需要对readonly 状态做下修改[/quote] readonly这个问题也有发现，现在还有的问题就是setindent会回调txsetscrollpos导致部分背景计算不准确（在拖拉改变对话框宽度的时候）。还有一个问题就是由于autovscroll同样导致txsetscrollpos回调，现在把autovscroll去掉自己来接管setsel，但这样drag-drop就不好做了，我的q913182446，想要请教一下把这个东西做好

[Sniper29]

能问下嘛，最后那个qq聊天气泡背景是怎么实现的？求指导