使用SVG实现提示框功能的示例代码

第一版方案我们基于Demo工具演示我们已经产出了ToolTips的SDK, 我们使用的单个参数arrowHeight传入来生成尖角。在应付上方两个样式是不可能的，尖角样式多变，如何来扩展性和易用性成为了一个问题，不可能多变的尖角样式都开发一个SDK。

NO.8

方案改进

要应付多变的气泡尖角一定要想办法把尖角抽离出原先的气泡外层路径，生成尖角路径后在整合到气泡上形成一个完整的闭合路径。

为了简单处理数值，我将原先的尖角(0，0)坐标定义更换到下方图示点：

所以接下来尖角可以自由设计了，只要保证从(0，0)出发最后回到（-arrowWidth,0）就行了，如下是一个尖角的路径：（M 0 0 C -10 0 -8 5 -12 5 S -14 0 -24 0）

通过设计不同的尖角路径我们就能组合成不同的气泡样式：

上方右侧的尖角气泡最终给出的路径字符串如下，其中Q -2 7 -9 10 Q -6 5 -7 0这一段即为我们的尖角路径：

（编辑：西安站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!