RoundRect是个什么鬼?一个没什么用的功能,居然还卖这么贵.....还不...-技术圈

效果示例

上图的游戏效果，你能看懂起个什么作用吗？请带着这个问题阅读本文！

00 概述

该源码案例核心是，演示如何快速创建圆角矩形网格；
提供了若干参数给用于调整，可实时的修改圆角矩形的形状，包括编辑器时和运行时；
兼容了不同数值混搭的正确性，随意拖拉数值均不会出现渲染问题；
添加了优化措施，以确保频繁调用时的性能问题；
做了良好的易用性处理，只需拖放即可使用，全程带有提示+注释；
单一文件，对外零依赖，方便导入项目，自带3个示例，可快速开始；
基于引擎API: utils.MeshUtils.createDynamicMesh 绘制(3.6版本开始支持)
可用于3D和2D场合，主要用于3D。

01 偶然的开端

话说有一天，开发者 negausagi 做了一个梦，需要一个框选3D节点的功能，但是缺少了一个选择框。

比如像这样子的
一个可以随意变化大小的选择框！不就是一个高级的九宫格嘛？而且边角都是一样的，只要一个角和一条边，再写点代码，让它们伸缩起来不就完事了? 但注意，这个九宫格可是3D的哦！结果这个梦一做就是三天，还醒不来。

02 拼接模型的方案

说干就干

打开 Blender 啪的一下！就做好了矩形和圆角的网格，估计是在梦里！

我变成Blender大神，整个拐弯还小Case

然后导入 Cocos Creator 就开始拼！拼！拼！

看我Ctrl+D大法，你也要会用哦！

在梦中我的手出了奇的快，如果是真实的话，赚钱速度肯定提升100倍。然后再写上一点小小的代码，让它们配合缩放，当然还要配合上射线检测坐标的逻辑，计算一下坐标和宽高。完成！！！

其实还可以的吧！

不过嘛...节点长这样...，说实话我是不满意的！
精神洁癖！

然后我发现，在Blender做的比例是以5为基础单位的，如果要换给其他项目用，好像以1基础为单位会好一点。
然后又写了一个BaseWidth，先把素材反算成基础单位，再通过Width换算回去。

一点点小问题

从美术资源导出，到最终使用，需要在场景里配合调整位置和层级；
为了方便的处理角度缩放等关系，又套了一层节点；
；美术资源是固定的，靠缩放只能处理半径，想修改线宽只能重新导入美术资源
最终一个功能需要依赖 美术/场景/代码 3个环节，实在是不够优雅。

实在是不够优雅

能不能做一个优雅舒服，可以自由调整属性，又不用折腾那么多美术资源和节点结构的圆角矩阵呢？

03 动态生成网格方案

最后还是想着折腾一下，试试动态生成。这样就能摆脱前面的问题了。测试了一下Cocos的API: utils.MeshUtils.createDynamicMesh ，好的可以正常画出一个quad，这还不动手开干?

说干就干x2，下面都是干货！打起十二分的精神

本以为是简简单单的，没想到结果状况百出......

* 计算顶点

首先是顶点计算各种踩坑，因为算法是不会有逻辑异常的，只有计算的结果不合理，然后出来的网格就是乱七八糟的，也不会告诉你哪里出问题，得自己梳理算法定位问题。写写单元测试，回顾高中数学，草稿纸写了几页，经过小半天的摸索，终于解决大部分的问题，可以在编辑器上看到渲染出来的正确的网格。

* 优化生成逻辑

研发算法的时候，肯定都是全删了重新生成的，但是实际使用的时候这样肯定不行呀，能缓存的都给缓存一下，这样子性能才会更好。折腾了几版，做了对象池，做了虚拟顶点虚拟面片，把纯顶点数据流改成了带序列顶点，做了多级dirty，主打一个延迟刷新，能不算的就不算，这下能放心的修改了吧。

* 处理数值关系

如果允许数值乱调，就会出现穿模和变形之类的问题

有些效果甚至还有点美感，但是有点失控

这样就得小心翼翼的修改参数，一不小心就爆炸，但是做太大限制的话，又会砍掉某些特效。为了能有实现多一点效果，又想使用的时候能够舒心一点，各种试验和检查，一边观察数值的相关性，一边小心翼翼的修改。比如线宽最终拆成2个值，半径也拆成2个值，又改了几版才优雅的解决了，最终实现了一个比较完善的方案，就算数值随便乱调，都会有优雅的形状。

* 优化编辑器使用

来到这里基本上能满足自己使用了，这时候想做成一个完整的插件功能，需要往产品的方向发散一下，调整编辑器上的功能。比如属性之间的显示关系，给属性加上注释和说明，有些手动初始化改成了自动判断，还有些小问题也没法放着。比如说 是否显示圆角 这个功能，极端情况下有点小bug，但是又不舍得去掉，最后还是老老实实修复了。