【thlink彩票源码】【雷霆战机源码】【微流量源码】圆角源码_圆角代码

来源:负120的源码

1.如何实现div圆角
2.Android 圆角、圆形 ImageView 实现

圆角源码_圆角代码

如何实现div圆角

       è¿™ä¸ª..很简单

       ä¸çŸ¥é“你有没有做过文字环绕"不规则"图片的那种布局..比如一朵花.然后要让花会放到页面的最左边.然后文字是浮动在右边.并且文字会贴着花的花瓣这样类似的..

       è¿™ä¸ªä¾‹å­ç”¨çš„跟那个是一样的技术.

       åœ¨æ¯ä¸ªå¤§å±‚的里面偶有一个rtop和rbottom,圆角源码圆角thlink彩票源码这2个在负责圆角的区域的.这2个层里面分别放4个小层.并且.4个小层的高只有1PX.并且给他们分别加上不同的margin值.因为没有指定他们的宽度.所以他们会自适应.宽度和大层是一样的...但是加上margin值之后.它们本身的宽度就会变小.由于4个小层的margin值都不一样.所以造成了他们的宽度都不一样,但是这种宽度的差异是很小的.只有2PX.分到2边就是每一边的端点都只相差一PX...这样就象把N个不同长度的线或者矩形叠加起来就会变成一个弧形

Android 圆角、圆形 ImageView 实现

        我们要实现的图片控件继承自 AppCompatImageView ,它是 ImageView 的子类,但提供了更好的兼容性,我们在此基础上添加了若干自定义的属性和方法以实现最终的 NiceImageView :

        要实圆角或者圆形的显示效果,就是对图片显示的内容区域进行“裁剪”,只显示指定的区域即可。如何做呢?

        一种比较直接的办法是这样的,由于图片是被绘制在画布上的,所以用 canvas 的 clipPath() 方法先将画布裁剪成指定形状,这样就能让图片按指定形状显示了,重新 draw() 方法即可:

        这样使用 src 、 background 属性给ImageView设置显示的图片都能达到预期的显示效果。但是由于 clipPath() 方法不支持抗锯齿,图片边缘会有明显的毛糙感,体验并不理想,所以需要寻找其它方法。

        另一种方法是使用图像的 Alpha 合成模式,即

PorterDuff来实现, 官方文档 。这里我们使用其中的DST_IN模式。整个过程就是先绘制目标图像,也就是图片;再绘制原图像,即一个圆角矩形或者圆形,这样最终目标图像只显示和原图像重合的区域。

        到这里就实现了显示为圆角或者圆形了。但是需要通过 src 属性或者对应的方法来设置图片,否则不能达到预期效果。

        绘制边框就相对容易理解了,只需要绘制一个指定样式的圆角矩形或者圆形即可:

        当图片显示为圆形时,还可以绘制一个内边框,但圆角矩形的话由于圆角大小的问题,目前只能设置一个边框咯。

        但是有个问题,绘制的边框会覆盖在图片上,如果边框太宽会导致图片的可见区域变小了,影像显示效果,像这样,左下角的花盆不见了:

        那么如何让边框不覆盖在图片上呢?可以在 Alpha 合成绘制前先将画布缩小一定比例,最后再绘制边框,这样问题就解决了。

        缩放后的ImageView显示区域的宽高就是原宽、高分别减去2倍的边框宽度,这样缩小的比例也就显而易见了。效果如下,左下角的花盆出来了:

        遮罩可以理解为一层带透明度的颜色,遮罩默认不绘制,当制定了遮罩颜色时才会绘制,实现很简单:

        例如加一个透明度%的红色遮罩后的效果:

        核心的实现逻辑就这些了,剩下的就是自定义属性和方法了,有兴趣的可以看源码,都很简单,希望对你有所帮助吧!

        更多细节及用法见GitHub: /SheHuan/NiceImageView

        如果你需要实现类似钉钉的圆形组合头像,例如:

文章所属分类:休闲频道,点击进入>>