程序丨用shader制作图表时，要注意这几个关于UV的坑

在开发过程中我们时不时的遇到一个比较常见的需求，那就是在一个平面上画线。画线分为好多种情况。直线，曲线，回环等等。但总会遇到一种问题，那就线粗细dw(宽度)的问题，因为已知dw你就可以根据点到线段最短距离决定点的去留。在讲述下面问题 的时候我们先回忆一下UV值的特性。那就是在Tiling默认的情况下，无论你是正方形还是长方形UV值都是均分[0,1]。UV不同平面情况如下图。

（1）在正方形区域画线

当在正常的正方形区域画线的时候非常简单的。只要你设定好线的宽度dw(宽度),因为平面是正方形网格，无论水平垂直还是斜对角，都是正常的。也不会出现什么异常，如下图。

 （2）在长方形区域画线

当你在长方形区域画线的时候如果不对UV值做调整，效果就会怪怪的。假定线的宽度dw(宽度)，我们只拿垂直和水平两条直线来说吧。呈现效果如下图。

解决问题：我们需要引入一个宽高的比值WidthDivHeight。对当前的UV的y值进行一个转变。y = WidthDivHeight * y;注意这个修改后的y值，只决定你这个像素的去留，或者说是alpha值。  不参与其他操作，比如采样。

（3）妄想在极坐标系中实现雷达图一样的效果图

雷达图其实就是折线图首位相连，首先我们会联想到极坐标系。想法没有问题。但实际是有问题的。 我们假定线宽为dw(宽度)。坐标系变换之后。y变成P（到原点距离），x变成e(角度)。在线水平情况下。并没有产生宽度走样的现象，因为之前的Y值在变换成p(到原点距离)后dy是定值。现象如下图。

当在非水平情况下变换之后，会出现走样的现象。因为在之前的X值变换成e（角度）后dx是根据p的值成线性增大的。因为 弧长 = K*半径*弧度。懂我意思吧。现象如下图。

上述问题有办法解决吗？

答案：

（1）竖直情况下，根据p的值来控制dw(宽度)这样可以解决走样。因为dx和p是呈线性增大的。很简单！

（2）在任意倾斜情况下：xLen = yLen*2*pi;  那么=> WidthDivHeight = 2*pi; 做一个规整之后，再根据dx和p是呈线性，来动态的更改 dw(宽度)6

----------------------

今日推荐

添加小编微信，可享双重福利

1.加入GAD程序猿交流基地

获取行业干货资讯，观看大牛分享直播

2.领取60G独家程序资料库，地址在小编朋友圈

包括腾讯内部分享、文章教程、视频教程等全套资料

↓长按添加小编GAD苏苏↓