用户头像右下方需要添加一个vip标示的小图标：
我更倾向的vip头像样式
但是一开始弄成了下边这样子的，
并不喜欢的样式
初看没什么区别，但是仔细看的话，两图还是有差别的，下边的图没有切圆角，就能明显看出差别了，
并不喜欢的样式未切圆
上图中，小圆的圆心经过大圆的圆弧，而下图中，小圆与大圆圆弧相交的两点正好与小圆圆心在一条直线上，故而上图的小图片位置比下图中的位置更靠下一点，
未切圆
图片小的时候看着并不觉得别扭，但是放大之后，就多少有点看着不爽了，
并不喜欢的样式小圆放大版
小圆放大版
以下是我喜欢的样式的位置计算简单分析，蓝白黄线条组成的直角三角形，能计算出两圆的圆心距，灰线白线和红线也组成了一个直角三角形，我这里是45°角，所以直接把上边得到的圆心距的平方除以2再开方就算出小圆圆心在xy轴相对大圆圆心的位置了，再减去个小圆自己的半径就可以当成origin设置给小图标了
简单分析
以下是简单创建两个小圆的示例截图
简单创建
用户头像右下方需要添加一个vip标示的小图标： 但是一开始弄成了下边这样子的， 初看没什么区别，但是仔细看的话，两...
直接贴代码 原理为画边框,波纹圆形和圆形头像 然后波纹圆形和圆形头像一起播放动画.
目前在应用开发中，矩形的头像基本没有了，大多是圆形或圆角矩形，本文简简单单轻轻松松帮你搞定圆形或圆角矩形的头像。 ...
首先是圆形头像，这个简单 border-radius: 50%; :hover {transform: rotat...
HTML： // canvas画海报var loading;funct...
CircleAvatar 圆形头像
圆形头像ＯＲ方形头像 知乎上有人问圆形头像ｏｒ方形头像选择背后的设计理论，我也掺和了一脚： 问题地址：http:/...
自定义View 简单实践-03 圆形头像 1.成品展示 呃，这头像有点大，不过，就这个意思了。。。。。。 2.思路...
需求千奇百怪，对于登录后账户的头像，要求圆形、多边形、带描边、带 VIP 标示等等，所以实现一个 N 边形玩玩，效...
前提 以前都是用CircleImageView来显示圆形头像，近来发现经常用的Glide也可以显示圆形头像，就在项...
本文标题：圆形头像右下方的VIP小图标位置简单计算
本文链接：https://www.haomeiwen.com/subject/lviwpxtx.html
网友评论