使用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这一段即为我们的尖角路径： M 0 0 从上方简短的路径能看出，我们的尖角路径是完备的整合在整个SVG气泡路径中的，以是就不会担忧会呈现CSS的 clip-path 方案的题目。 NO.9 可视化器材 方案看起来仿佛已经搞定了需求中的尖角样式，然而你也许会嗣魅这尖角路径是怎样发生，莫非必要通过强盛的数学手段推导出来？如下三次贝塞尔曲线就已经不敢直视了，更况且四次、五次... 以是想共同的我们必然要产出可视化器材来实现这路径天生进程，得益于D3.js器材库操纵SVG方面的强盛成果，我们开拓完的 天生器材地点 (https://market.m.taobao.com/app/fdilab/svg-tool-demo/pages/index/index.html) 如下： 对付认识SVG的path呼吁的同窗来嗣魅这个操纵不难，假如不认识的保举看下下方的参考文章，相识了曲线呼吁后就能画出油滑的曲线。 10 总结 至此在ToolTips这块根基已经满意了计划的需求，同时也沉淀了SVG路径天生器材。行使SVG来实现ToolTips能包围 CSSclip-path不能美满办理的几个场景。在此出格感激大漠先生的指导。 11 参考文章 D3官网(https://d3js.org.cn/) 曲线篇: 贝塞尔曲线(https://zhuanlan.zhihu.com/p/136647181 ) Tooltips using SVG Path(https://medium.com/welldone-software/tooltips-using-svg-path-1bd69cc7becd ) SVG渐变(https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Gradients ) 深度把握SVG路径path的贝塞尔曲线指令(https://www.zhangxinxu.com/wordpress/2014/06/deep-understand-svg-path-bezier-curves-command/ ) css drop-shadow(https://www.zhangxinxu.com/wordpress/2016/05/css3-filter-drop-shadow-vs-box-shadow/ ) 到此这篇关于行使SVG实现提醒框成果的示例代码的文章就先容到这了,更多相干svg 提醒框内容请搜刮剧本之家早年的文章或继承赏识下面的相干文章，但愿各人往后多多支持剧本之家！ （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
