cocoscreator 利用Mask组件裁剪圆角矩形

效果预览:

1.只填入一个参数,会进行对四个角度进行裁剪,且圆弧度数一致
只填入一个参数,会进行对四个角度进行裁剪,且圆弧度数一致

2.填入两个参数,0控制左边两个角度,1控制右边两个角度
填入两个参数,0控制左边两个角度,1控制右边两个角度

3.输入四个角度的度数,控制的方向为左上开始以顺时针的顺序进行设置输入四个角度的度数,控制的方向为左上开始以顺时针的顺序进行设置

脚本使用方法:

1.创建一个空节点,然后把脚本添加到节点上
2.设置脚本节点的尺寸(设置方式与Mask的组件使用方法一致)
3.根据上图示例设置你需要裁剪的圆角尺寸
4.添加子节点

主要代码展示:

在这里插入图片描述

主要代码其实是继承Mask组件之后,拿到组件上的_graphics属性,然后重新绘制graphics更改Mask的裁剪形状,并进行渲染。

脚本文件(RectMask.js)

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
Cocos Creator采用JavaScript/TypeScript语言开发,本质上是单线程的。如果在同一帧加载或销毁过多的资源,可能会导致界面卡顿。为了解决这个问题,可以采用分帧加载的方法。 一个常见的分帧加载的例子是在点击按钮时创建1000个预制体,并获取预制体上的脚本并赋值。可以使用for循环来逐个创建预制体,并在每个预制体创建完毕后进行下一帧的加载。具体代码如下: ```javascript this.mask.active = true; this.animation.node.active = true; this.animation.play(); let count = 0; let totalCount = 1000; let batchSize = 10; // 每帧加载的数量 function loadBatch() { for (let i = 0; i < batchSize; i++) { if (count >= totalCount) { break; } let temp = cc.instantiate(this.hello); temp.parent = this.content; temp.getComponent('test2').label.string = count; count++; } if (count < totalCount) { requestAnimationFrame(loadBatch); } else { this.mask.active = false; this.animation.stop(); this.animation.node.active = false; } } requestAnimationFrame(loadBatch); ``` 在这个例子中,我们使用了`requestAnimationFrame`函数来实现分帧加载。首先,我们将加载动画打开,并播放加载动画。然后,我们使用一个计数器`count`来记录已经加载的预制体数量。在每一帧中,我们使用一个循环来创建一批预制体,并将计数器递增。如果还有剩余的预制体需要加载,我们使用`requestAnimationFrame`函数来请求下一帧的加载。当所有预制体都加载完毕后,我们关闭加载动画。 通过这种分帧加载的方式,可以避免在同一帧中加载过多的资源,从而提高界面的流畅性。 #### 引用[.reference_title] - *1* [Cocos Creator 分帧加载(js - schedule)](https://blog.csdn.net/qq_14965517/article/details/107846189)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [Cocos Creator 2.1.1 性能优化 (二)](https://blog.csdn.net/weixin_43995470/article/details/103443928)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值