# 如何绘制一个倾斜的Column

#### 问题现象

UI开发中，如何绘制一个倾斜指定角度的Column？

#### 效果预览

#### 背景知识

transform：可用于显示二维变换时的矩阵变换。包含三维变换时应使用transform3D接口。参数可设置当前组件的变换矩阵。object当前仅支持Matrix4Transit矩阵对象类型。matrix4：提供矩阵变换功能，支持对图形进行平移、旋转和缩放等。

#### 解决方案

通过给对应的Column添加transform属性，根据倾斜的角度计算出弧度，使用matrix4.init创建一个四阶矩阵，将创建的四阶矩阵对象作为transform的参数传入，即可得到一个倾斜指定角度的Column。

```
import { matrix4 } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  private matrix1: matrix4.Matrix4Transit | undefined = undefined;

  aboutToAppear(): void {
    // 将角度转换为弧度（Math.tan需要弧度制）
    const angleRad = -14 * Math.PI / 180;
    // 计算倾斜角度对应的tan值
    const tanValue = Math.tan(angleRad);
    // 使用matrix4.init创建一个4x4的变换矩阵
    this.matrix1 = matrix4.init([
      1, tanValue, 0, 0, // 第一行：x方向倾斜
      0, 1, 0, 0, // 第二行：保持y不变
      0, 0, 1, 0, // 第三行：z不变
      0, 0, 0, 1 // 第四行：齐次坐标
    ]);
  }

  build() {
    Column() {
      Column() {
        Text('Column倾斜')
          .fontSize(16)
          .textAlign(TextAlign.Center);
      }
      .width(200)
      .height(400)
      .border({ width: 1, color: Color.Black })
      .transform(this.matrix1);
    }
    .justifyContent(FlexAlign.Center)
    .height('100%')
    .width('100%');
  }
}
```