[视频] 带你理解云托管的基础概念，为更顺利使用云托管建立基础，适合无容器经验的同学学习。

[代码]cc.Graphics[代码] 画线也能加纹理了？文末附送完整代码。 初步实现 在 初探精灵中的网格渲染模式 ！ 中简单分析了 [代码]Sprite[代码] 组件的渲染模式 [代码]Mesh[代码] 。 [图片] 这次，我们应用 [代码]Sprite[代码] 渲染模式 [代码]Mesh[代码] 和 [代码]cc.Graphics[代码] ，实现画线纹理的操作。 先看看效果如何。 [图片] 先在场景创建一个 [代码]cc.Graphics[代码] 节点。并添加一个子节点 [代码]cc.Sprite[代码] ，渲染模式改为 [代码]Mesh[代码] 。 [图片] 因为 [代码]Mesh[代码] 中计算的坐标是从左上角，而 [代码]Graphics[代码] 画图是从中心开始画的。 所以 [代码]cc.Sprite[代码] 节点， [代码]Scale[代码] 调整为 [代码](1,-1)[代码]， [代码]Anchor[代码] 调整为 [代码](0,1)[代码]。 为了使纹理超出边界后可以重复填充，这个纹理大小得是 [代码]2[代码] 的 [代码]n[代码] 次方，并设为 [代码]Repeat[代码]。 [图片] 画纹理肯定需要坐标位置信息。 来一起看看，[代码]Graphics[代码] 的 [代码]webgl[代码] 实现。 [图片] [代码]Graphics[代码] 中有一个 [代码]_impl[代码] 变量。 这个 [代码]_impl[代码] 里有一个 [代码]_paths[代码] 变量，记录了所有画线路径，和对应的画线的点。 而 [代码]lineTo[代码] 和 [代码]moveTo[代码] 都会往 [代码]_paths[代码] 塞入画线的点数据。 对于 [代码]circle[代码] 和 [代码]arc[代码] 以及 [代码]rect[代码] 等接口，最终还是调用 [代码]lineTo[代码] 和 [代码]moveTo[代码] 。 所以有了这个 [代码]_paths[代码] 我们画纹理的时候，可以先把点遍历出来。 [代码]for (let index = 0; index < _impl._paths.length; index++) { const path = _impl._paths[index]; const pathPoints = path.points; if (pathPoints.length < 2) continue; for (let index2 = 1; index2 < pathPoints.length; index2++) { // 当前点 const p = cc.v2(pathPoints[index2].x, pathPoints[index2].y); // 上一个点 const p_pre = cc.v2(pathPoints[index2 - 1].x, pathPoints[index2 - 1].y); } } [代码] 如何画纹理呢？ 先考虑相邻的两个点，再根据线宽 [代码]w[代码] 画一个长方形。长方形有四个点，我们要求出这四个点的坐标。 先算出这两个点的方向。 [代码]const dir = p.sub(p_pre); //方向 [代码] 接着求出一个垂直方向的向量(根据向量内积为0求出)，长度为线宽一半。 [代码]const cross_dir = (dir.y == 0 ? cc.v2(0, 1) : cc.v2(1, -dir.x / dir.y).normalize()).mulSelf(w / 2); //垂直方向 [代码] [图片] 根据两个点和垂直方向可以求出这个长方形的四个顶点。 [代码]const p_r_t = p.add(cross_dir); //右上 const p_r_b = p.sub(cross_dir); // 右下 const p_l_t = p_pre.add(cross_dir); // 左上 const p_l_b = p_pre.sub(cross_dir); // 左下 [代码] 最后根据四个点填充 [代码]sprite.spriteFrame[代码] 中的数据 [代码]vertices[代码] ，如果不理解的话，可以参考初探精灵中的网格渲染模式 ！ [图片] 对于 [代码]uv[代码] 纹理坐标，这边就直接使用顶点坐标的缩放一个系数。参考代码如下。 [代码]const uv_mul = 50; const i_offset = vertices.x.length; vertices.x.push(p_r_t.x, p_r_b.x, p_l_t.x, p_l_b.x); vertices.y.push(p_r_t.y, p_r_b.y, p_l_t.y, p_l_b.y); vertices.nu.push(p_r_t.x / uv_mul, p_r_b.x / uv_mul, p_l_t.x / uv_mul, p_l_b.x / uv_mul); vertices.nv.push(p_r_t.y / uv_mul, p_r_b.y / uv_mul, p_l_t.y / uv_mul, p_l_b.y / uv_mul); vertices.triangles.push(i_offset + 0); vertices.triangles.push(i_offset + 1); vertices.triangles.push(i_offset + 2); vertices.triangles.push(i_offset + 1); vertices.triangles.push(i_offset + 2); vertices.triangles.push(i_offset + 3); [代码] 这么画长方形存在一个问题，对于画圆弧，如果分隔太大，或者线宽比较大，会出现分割的问题。 [图片] 怎么解决这个问题呢？ 一是可以参考源码，把连接处补上。 另一种方式是直接用 [代码]GraphicsAssembler[代码] 中的 [代码]buffers[代码] 数据，重新组织一下。 [图片] 当然，这些等我研究出来再分享给大家(日常挖坑)！ 以上为白玉无冰使用 [代码]Cocos Creator v2.3.3[代码] 关于 [代码]"画线纹理的一种简单实现！"[代码]的技术分享。如果对你有点帮助，欢迎分享给身边的朋友。 原文链接 画线纹理之连接优化 对转角处加一层处理，就可以更加平滑了。。。。 先看看效果。 [图片] 在 画线纹理的一种简单实现！ 中介绍了可以使用 [代码]Sprite[代码] 渲染模式 [代码]Mesh[代码] 和 [代码]cc.Graphics[代码] ，实现画线纹理。 不过在连接处存在缝隙。 [图片] 那么怎么处理这个缝隙呢？ 只需要在连接点画一个圆，这样缝隙就能去掉了。 [图片] 那么怎么画圆呢？可以把圆看成是正多边形，根据半径和圆心的关系，可以确认位置坐标。可参考 shader 动画之 loading 特效!这篇文章。 [图片] 半径刚好就是画线宽度的一半，某个圆上的坐标转成代码如下。 [代码]// 角度 const r = 2 * Math.PI * index3 / count; // 先算方向向量，在加上圆心坐标就是，圆上的点。 const pos_circle = cc.v2(w / 2 * Math.cos(r), w / 2 * Math.sin(r)).addSelf(p); [代码] 怎么确定顶点索引呢？ 其实可以按照圆心走，画一个个三角形就行啦。 [图片] 当然这是其中一种索引方式，转成代码如下。 [代码]//画圆 const count = 12; i_offset = vertices.x.length; vertices.x.push(p.x); vertices.y.push(p.y); vertices.nu.push(p.x / uv_mul); vertices.nv.push(p.y / uv_mul); for (let index3 = 0; index3 < count; index3++) { const r = 2 * Math.PI * index3 / count; const pos_circle = cc.v2(w / 2 * Math.cos(r), w / 2 * Math.sin(r)).addSelf(p); vertices.x.push(pos_circle.x); vertices.y.push(pos_circle.y); vertices.nu.push(pos_circle.x / uv_mul); vertices.nv.push(pos_circle.y / uv_mul); if (index3 === 0) { // 0 - count -1 vertices.triangles.push(i_offset, i_offset + 1 + index3, i_offset + count); } else { // 0 - index3 - (index3-1) vertices.triangles.push(i_offset, i_offset + 1 + index3, i_offset + index3); } } [代码] 以上只是实现简单画线纹理的效果，如果要实现绳子这种效果，那就需要重新计算纹理坐标，和位置/方向/长度等有关系。 [图片] 这个暂时还没想好，留给大家讨论吧哈哈～ 以上为白玉无冰使用 [代码]Cocos Creator v2.3.3[代码] 关于 [代码]"画线纹理之连接优化！"[代码] 的技术分享。如果对你有点帮助，欢迎分享给身边的朋友。 画线纹理之绳子 为绳子任意方向的拖动添加纹理～ 效果预览 [图片] 前置教程 这次的纹理是使用 [代码]Sprite[代码] 组件的渲染模式 [代码]Mesh[代码] ，前文 初探精灵中的网格渲染模式 ！ 介绍了这个用法。 [图片] 绘制的数据要用到 [代码]_poins[代码] 来画长方形，前文 画线纹理之简单实现 中有介绍。 [图片] 在连接处画个圆达到平衡效果，前文 画线纹理之连接优化 中有讲到处理方法。 [图片] 回顾一下这三篇文章有助于本文的理解哦～ 实现原理 前几篇已经实现了画线纹理，这次主要的目标是计算正确的 [代码]uv[代码] 坐标。 因为这个线有方向，有长度，都会影响纹理坐标的计算。 这里想到的一个思路是，[代码]把所有的线段拉成一条直线，并放到一个方向[代码]。 [图片] 为了使这个纹理能从尾部带动头部的效果，拉直后，最后一个点作为纹理的起始点。 所以遍历这个点的时候，要从尾部开始，并记录一下每节的长度。 [图片] 纹理坐标 [代码]v[代码] 的两个点是 [代码]0[代码] 和 [代码]1[代码] 。 纹理坐标 [代码]u[代码] (水平方向) 根据绳子的长度去推算。 [代码]// 从最后一点开始计算 for (let index2 = pathPoints.length - 1; index2 > 0; index2--) { // 省略部分代码 vertices.x.push(p_r_t.x, p_r_b.x, p_l_t.x, p_l_b.x); vertices.y.push(p_r_t.y, p_r_b.y, p_l_t.y, p_l_b.y); // 计算uv vertices.nu.push(offsetX.x * uv_mul, offsetX.x * uv_mul, (offsetX.x + dirLen) * uv_mul, (offsetX.x + dirLen) * uv_mul); vertices.nv.push(1, 0, 1, 0); // 省略部分代码 offsetX.addSelf(cc.v2(dirLen, 0)); // 记录已经画的长度长度 } [代码] 这么倒着遍历会出现一个问题，就是尾巴的纹理会被头覆盖。 [图片] 所以计算长方形的顶点索引后，要整体反转，让他从头开始画。主要代码如下。 [代码]let trianglesCache: number[][] = []; for (let index2 = pathPoints.length - 1; index2 > 0; index2--) { // 省略部分代码 triangles.push(i_offset + 0); triangles.push(i_offset + 1); triangles.push(i_offset + 2); triangles.push(i_offset + 1); triangles.push(i_offset + 2); triangles.push(i_offset + 3); trianglesCache.push(triangles); } trianglesCache.reverse(); // 顶点索引反转 trianglesCache.forEach(v => { // 真正的顶点索引顺序 vertices.triangles.push(...v) }) [代码] 反转后，绳子的纹理就正确了。 [图片] 对于连接处画圆(实际是多边形)，需要注意每个点都要旋转，这样才能让圆的纹理方向正确。 [图片] 参考代码如下。 [代码]//画圆 const dir_angle = dir.signAngle(cc.v2(-1, 0));//与x轴的负方向的夹角 const count = 12; i_offset = vertices.x.length; // 这里是圆心 vertices.x.push(p.x); vertices.y.push(p.y); vertices.nu.push(offsetX.x * uv_mul); vertices.nv.push(0.5); for (let index3 = 0; index3 < count; index3++) { const r = 2 * Math.PI * index3 / count; // 圆心到各个边的向量 const pos_circle = cc.v2(w / 2 * Math.cos(r), w / 2 * Math.sin(r)); vertices.x.push(pos_circle.add(p).x); vertices.y.push(pos_circle.add(p).y); // 对于圆的uv需要旋转 vertices.nu.push((pos_circle.rotate(dir_angle).x + offsetX.x) * uv_mul); vertices.nv.push(pos_circle.rotate(dir_angle).y / w + 0.5); if (index3 === 0) { triangles.push(i_offset, i_offset + 1 + index3, i_offset + count); } else { triangles.push(i_offset, i_offset + 1 + index3, i_offset + index3); } } [代码] 最后，给大家画个星吧～ [图片] 小结 把弯的掰直！ 这个绳子纹理的整个思路就是把所有弯的线，都转化成直的后，再计算纹理坐标。 以上为白玉无冰使用 [代码]Cocos Creator v2.3.3[代码] 关于 [代码]"画线纹理之绳子！"[代码] 的技术分享。如果对你有点帮助，欢迎分享给身边的朋友。 欢迎关注白玉无冰的微信公众号～ [图片] 画线纹理1 画线纹理2 画线纹理3 完整代码（详细见readme） 原创文章导航

写在前面： 大家不要将ICP证和ICP备案搞混了。 ICP证指的是【电信增值业务经营许可证】，这个资质需要企业主体至少100万注金，去工信部办理，比较难办理；社交-交友需要ICP证。 而ICP备案，【非经营性互联网信息服务备案核准】仅仅是指企业主体的域名备案，可以简单的按以下步骤免费办理成功，其他社交类目如社区、论坛、笔记等，只需要ICP备案即可。 1､在腾讯云注册一个账号并认证企业主体（不吹不黑，开发小程序当然首选腾讯云，好用）。http://www.qcloud.com/ 如果你是个人主体，就不要往下看了，没必要折腾了。 2､找到腾讯云免费活动页：https://cloud.tencent.com/act/free?from=10107 3､选择一款云服务器，180天免费试用。 云服务器申请成功后，它的使命就完成了，没用了，让它自生自灭吧。 在整个备案过程中，也不需要部署网站（域名都没有备案，哪来的网站？）。 [图片] 云服务器180天到期后，可以自己决定是否续费，每个月也才99元，促销期甚至更低，完全可以接受吧。 备案成功后，该服务器就没什么作用了，让它180天后自然欠费销毁得了。 服务器销毁后会有什么影响？答：没有任何影响。 但是。。。。。 你备案的域名最后还得指向一个网站，因为腾讯云会应工信部的要求定期检查网站是否合规，所以你还是要建一个简单的网站，（备案期间，可以暂时不管网站的事，等将来需要的时候再管理）。 至于有多简单，答，多简单都行。此时你可以在七牛、腾讯云、阿里云租点免费的对象存储空间，做个简单的网站。 4､在进行ICP备案之前，你需要在腾讯云注册你的域名地址，如果你已有域名，但不在腾讯云，建议先将要域名过户到腾讯云的账号上。 5､进入控制台，开始ICP备案，这个流程就不介绍了，因为完全一看就懂。而且现在使用备案小程序后，不需要幕布或现场拍照了，极其方便，大家跟着流程走就一点问题没有，有人脸识别和在线拍一段小视频。另外，大家可以随便作，随便填，填错或者填得不合适也不用怕，会有专门的备案客服打电话告诉你哪哪要改，还会告诉你应该怎么填才更容易通过工信部的审核，客服的态度好得发指。 仅说一点其中的几个小坑： a､人脸识别的时候，白色背景、白色背景、白色背景，笔者在人脸识别的时候，满世界找白墙，结果还被打回来重拍了3次。 b､网站用途一律写：公司官网，好通过工信部审核。 6､腾讯云提交资料到工信部审核。这是一个漫长的让人无语的等待，20-30天。笔者最近两次都是20天才过审；不要幻想会有可能提前完成审核，这是政府部门在审核，提前完成说明某政府人员的工作安排有问题，会犯错误的。 7､备案成功后，会有短信通知你，但是，你需要去工信部网站查询结果，并将结果切屏拷贝下来，因为小程序类目审核需要上传这张图片。http://beian.miit.gov.cn/publish/query/indexFirst.action [图片] 把上面这张图片保存好，小程序类目审核的时候需要上传。收到通知后，如果在这里查不到结果，也别急，据说需要24小时。 8､接下来是小程序上线审核。 因为ICP备案的小程序内容肯定涉及到社交，最后小程序上线时还要提交到工信部审核，还需要7天左右的时间，加上前面ICP备案的时间，加起来怎么也得30-40天。大家估计时间，别影响小程序上线。这7天也是政府部门在审核，不要幻想会提前。  9､计算一下时间： 腾讯云注册账号和认证：1-3天； 域名备案：腾讯云环节：1-3天； 域名备案：工信部环节：20-30天； 小程序添加服务类目：社交类目审核：1-3天； 小程序上线审核：腾讯环节：1-2天； 小程序上线审核：工信部环节：7+天； 总天数：30-40天； 10、节省时间的一些建议： 在开发小程序之前，就开始备案工作，小程序可以同时开发，相互不影响； 在开发完成之前一、两星期之内，先发布一版小程序，别管功能是不是完整，能通过审核就行，这样会有7天的等待类目审核的时间，这个时间里，小程序可以照常开发，不影响进度； 只要是社交类，基本需要有文字和图片安全检查功能，别忘了加上，别到时审核通过不了。 11、结束。 [图片]