type
status
date
slug
summary
tags
category
icon
password
说到实现圆形ui，可能大多数人都会想到image + mask，这确实也是最普遍的实现方式，是否还有其他实现方式呢，下面我们就来介绍一下。
一、Image + Mask
创建一个mask节点，添加Image组件和Mask组件，image组件的sprite随便放一个你想要的形状图片，如纯色的圆形图片，mask的show Mask Graphic属性不勾选，这样就不会显示出这张圆形图片。然后在mask节点下面创建一个img节点放你想要处理的图片，表现上就会变成圆形了。
但是这种做法其实有点影响效率，因为会额外消耗一个drawcall来创建mask，做像素剔除
Mask不利于层级合并，会将一个整体的ui分割成mask下的子ui和其他ui。
最后就是点击判断区域不准确的问题了，当点到圆形的四角时仍会触发点击，有缺陷。
二、自制CircleImage
Image组件默认以矩形渲染，如果能写一个特殊Image组件，重新写入圆形的渲染顶点、三角面片信息，那不需要Mask就能渲染出圆形Image。
众所周知，屏幕显示是通过GPU渲染出来的，而GPU渲染以三角面片为最小单元。所有的图形画面，本质是由无数三角面片组成的。那圆形就可以由若干个相同的以圆心为顶点的等腰三角面片组成正多边形，近似模拟出来。三角形面片越多，多边形的边越多，夹角越大，就越近似圆形。
而且点击不精确的问题我们可以用Ray-Crossing算法计算点击是否落在多边形内，这里的具体实现我后续会放在github中。
三、用Shader实现
这种方法门槛较高，需要编写shaderlab，具体实现后续会放在我的github中，用shader实现的优点很明显是性能，相比与mask他减少了额外的drawcall，其次就是可以实现一些更高级的效果如圆形渐变，边缘模糊等。
如图，左侧是circleImage实现的，右侧是shader实现，shader实现的可改变半径，但是要运行时生效，并且需要指定Image组件，而circleImage可以当成圆形Image组件直接挂上去用。
如果有其他的实现方法欢迎在评论区留言~
- Author:lzzd
- URL:https://lazy-zed.com/article/u3d_7
- Copyright:All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!
.png?table=block&id=19885e12-7d7c-80e0-9466-ccfdb68a297f&t=19885e12-7d7c-80e0-9466-ccfdb68a297f)
.png?table=block&id=19885e12-7d7c-8090-b2f9-d59fd470ae2a&t=19885e12-7d7c-8090-b2f9-d59fd470ae2a)
