本文为曾开发工具...仅作为回顾总结
- TTI 页面可交互时间监控
- Flutter FPS 监控
- （本文）颜色标尺
- 组件抓手（待填坑）
- 录屏分析
- 调试工具重构
举两个常见的UAT场景
【场景1】:
设计：间隔应该是10px，你多了1px
开发：我写的就是10px，不信你看
设计：[一张带着刻度的截图]
开发：啊？哦哦哦，明白了，这个控件本身有边距
【场景2】:
设计：这个颜色不对
开发：哪里不对，这里之前盖了个alpha为0.1的渐变视图，你看到的是你叠加起来的颜色
设计：这样啊，那我改一下
开发：......
每次进入UAT环节时，总会与设计进行拉锯战。但是更多时候是开发没有一套快捷的UAT自测工具。
工具介绍
【背景】：
开发阶段与UAT阶段均缺少一个可供参考的测量工具，尤其在UAT环节，设计标注不准确非实际需纠偏的数值，开发也无法对修改效果进行验证，经常UAT数轮后问题仍未解决。
【目标】：
实现一款像素级的UI测量小工具、对大小距离颜色等常规的UAT元素进行测量与提取。
【设计】：
通过两种模式去最大化兼容使用场景（标尺模式+放大模式）
【支持所有技术栈使用】：
使用Native开发
标尺模式
标尺模式设计为一个全局覆盖在屏幕上的小尺子，可拖动至任意位置进行测量，主要用于常规的尺寸测量（大小、距离），效果如图：
具体实现上没有难度，做好交互，主要的工作量都在放大模式。
放大模式
因存在非常细微的调整，例如0.5px、色值偏差这样的场景，需要可进行颜色提取的放大模式。在放大模式下可对界面进行放大，提取对应像素的色值。
交互上参考了很多APP中的图片编辑页的交互模式，可放大、拖动，在这基础上加上可同步放大系数的刻度线。
色值提取需要兼容例如0.5px像素的线这类非常细小的场景，需要放大的倍数较大。实际使用中，放大模式的缩放系数达到5倍时，已完全满足尺寸场景的使用，整体支持更大的缩放系数（10-20倍）没有任何意义。色值的提取是像素级非常小的范围，在放大模式下加一个独立的色值提取器可兼顾两者，最终效果如图所示。
坐标系联动
放大模式下的标尺与色值提取器是联动的，缩放系数不同（提取器缩放系数为标尺的2倍）。两个坐标系的“缩放系数”、“边界”、“大小”均不同，在放大模式下坐标系还可区分出“实际坐标系”与“可见坐标系”，均会影响到我们直接去取某个点的坐标。
排除掉所有干扰因素，仅需关注两个坐标系的相同点：“中心点”。使用一个坐标系的中心点去转换在缩放模式下并不可行，需以“坐标系中心点对应的非缩放视图坐标”作为两坐标系的联动参数。
总结
工具本身没什么难度，某次迭代结束间隙抽空完成，实际使用后效果还挺好，支持全业务线、全技术栈使用。给UAT阶段提供了一个易用且可靠的工具，极大降低了开发与设计的沟通成本，提升了UAT阶段的效率。
