简介： 最近一好友联系我，问我有没有基于 UGUI 做过类似 PS 里那种虚线选区框的效果，我们讨论了很多，脚本实现，着色器动态算，越想越复杂，实现越麻烦。最后想到了一个反扑归真的做法，十分简单，有手就行，而且不影响合批。
unity版本： 2022.3.14f1c1
管线： URP
思路
- 期初的想法是美术给一个 小的方形的选区样式，然后通过类似九宫拉伸的方式让四个角不动，四条边做循环平铺，但是 UGUI 自带的九宫效果，中间只有拉伸效果，没有做平铺的选项，貌似这条路，走不通
- 经过一段时间的潜意识后台自动推算，突然来了一个灵感，把一整张图切开，边是边，角是角，然后在一个 RectTransform 下面重新拼装，然后设置好每一部分的锚点位置和对齐方式即可，然后边使用自动拉伸，角使用简单填充就ok了。
- 再精简一下，如果四个角都一样，四条边效果一样，那么我们可以只保留一个角，和两条边，一个水平效果，一个垂直效果。
之所以要有保留一个水平边和一个垂直边，是因为我们借用了 UGUI 的布局中的自动拉伸功能，也就是边距对齐，而这个边距对齐调整的是对应的宽或高，如果我们只用一条边，然后通过旋转 90 度的方式得到另一条垂直边，那么旋转后的边的拉伸效果是错误的。这个可以自行尝试。
主要设置
- 容器： 一个控制的 RectTranform 对象，作为根节点，我们调节选区大小就是调节这个 RectTransfrom 的长和宽。
- 四个角：直接使用同一个角通过旋转即可获得，ImageType 设置为 Simple。每个角的某点位置调整到各自需要对应到的容器的边角，然后对齐方式也是，例如
- 左上角 对齐方式 top left，
- 右上角 对齐方式 top right，
- 左下角 对齐方式 bottom left，
- 右下角 对齐方式 bottom right
四个角的设置
- 四条边：水平的使用水平的纹理，垂直的使用垂直纹理，某点尽量设置为贴边。具体对齐方式如下
- 顶部虚线 对齐方式 top stretch
- 底部虚线 对齐方式 bottom strecth
- 左侧虚线 对齐方式 stretch left
- 右侧虚线 对齐方式 stretch right
四条边的设置
-
缺点， 没有反向框选的的效果，自动拉伸最小缩小到0，没有负选项
反向框选 -
素材图
边角和虚线
