UISkew (斜切)组件参考

UI Skew 组件用于控制 UI 元素的斜切变换，可以通过设置水平和垂直方向的斜切角度来实现不同的视觉效果。

点击 属性检查器 下面的 添加组件 按钮，然后选择 UI/UISkew 即可添加 UISkew 组件到节点上。

属性

rotational

是否使用旋转类型的斜切算法 (默认关闭，此时效果兼容 2.x 版本)

skew

水平与垂直方向的斜切角度（类型: Vec2，x、y 值分别设置 X、Y 轴斜切角度）

UISkew 组件示例

使用方法如下:

• 第二个

• 第三个

代码设置

import { _decorator, Component, Node, UISkew } from "cc";
const { ccclass, property } = _decorator;

@ccclass("Example")
export class Example extends Component {
  start() {
    const uiSkew = this.getComponent(UISkew);
    if (uiSkew) {
      // 方法一
      uiSkew.setSkew(new Vec2(30, 15));

      // 方法二
      uiSkew.x = 30;
      uiSkew.y = 15;
    }
  }
}

注意事项:

• 节点的斜切变换会影响子节点的渲染，但不会改变节点的尺寸属性

• 节点进行倾斜变换时会发送 'transform-changed' 事件，可用于监听节点变换

• 斜切变换的过程需要进行多次三角函数运算，频繁执行斜切变换会增加游戏运行开销