用cocos graphics画一个和uitransform的size一样的矩形
时间: 2024-02-06 14:10:00 浏览: 32
可以使用以下代码来在 Cocos Creator 中使用 Graphics 组件绘制一个和 UITransform 的 size 一样的矩形:
```javascript
// 获取 UITransform 组件
let uiTransform = node.getComponent(cc.UITransform);
// 获取矩形的宽度和高度
let width = uiTransform.width;
let height = uiTransform.height;
// 创建 Graphics 组件
let graphics = node.addComponent(cc.Graphics);
// 设置矩形的填充颜色和透明度
graphics.fillColor = cc.Color.WHITE;
graphics.fillColor.a = 100;
// 绘制矩形
graphics.rect(-width / 2, -height / 2, width, height);
graphics.fill();
```
在这个代码中,我们首先获取了节点上的 UITransform 组件,然后获取了矩形的宽度和高度。接着,我们创建了一个 Graphics 组件,并设置了矩形的填充颜色和透明度。最后,我们使用 Graphics 组件的 rect 方法绘制了矩形,并使用 fill 方法填充矩形。注意,我们在绘制矩形时,将矩形的左下角坐标设置为 (-width / 2, -height / 2),这是因为在 Cocos Creator 中,节点的锚点默认为 (0.5, 0.5),因此我们需要将矩形的坐标进行调整。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)