如何绘制一个倾斜的Column
===============

#### 问题现象

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

#### 效果预览

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/25/v3/n9u7Cm1LRJ-vaQq10RJOFA/zh-cn_image_0000002628752850.png?HW-CC-KV=V1&HW-CC-Date=20260709T133936Z&HW-CC-Expire=86400&HW-CC-Sign=ED8A322FDB14F8F0FDC48F700B30F34F57BCEB64C90658CB2DD0A224E81FD26A "点击放大")

#### 背景知识

[transform](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-transformation#transform)：可用于显示二维变换时的矩阵变换。包含三维变换时应使用[transform3D](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-transformation#transform3d20)接口。参数可设置当前组件的变换矩阵。object当前仅支持[Matrix4Transit](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-matrix4#matrix4transit)矩阵对象类型。[matrix4](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-matrix4)：提供矩阵变换功能，支持对图形进行平移、旋转和缩放等。

#### 解决方案

通过给对应的[Column](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-column)添加transform属性，根据倾斜的角度计算出弧度，使用matrix4.[init](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-matrix4#matrix4init)创建一个四阶矩阵，将创建的四阶矩阵对象作为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%');
  }
}