组件设置maskShape不生效
================

#### 问题现象

设置组件的maskShape属性后，组件遮罩未生效且组件本身消失，注释该属性后组件恢复正常显示。

问题代码示例参考如下：

@Entry
@Component
struct Index {
  maskSize: string | number \= 180

  build() {
    Column() {
      Circle()
        .width(200)
        .height(200)
        .fill('#0D5AF5')
        .maskShape(new CircleShape({ width: this.maskSize, height: this.maskSize }).fill('#00000000'))
    }
    .width(300)
    .height(300)
  }
}

注释maskShape属性前后效果图对比：

注释前：

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/3c/v3/S0ApbEAcQB2w24vd1X7YKg/zh-cn_image_0000002658957193.png?HW-CC-KV=V1&HW-CC-Date=20260709T133941Z&HW-CC-Expire=86400&HW-CC-Sign=3A1F10B0B793023E7C7BA73A3624D44216BF5ECE412B6C62F24ADA227652FBAE "点击放大")

注释后：

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/6e/v3/KEIj9aCrTyexiVeTPLPTOw/zh-cn_image_0000002658837241.png?HW-CC-KV=V1&HW-CC-Date=20260709T133941Z&HW-CC-Expire=86400&HW-CC-Sign=CD6BCB9FFF4BF4C489079433AD12B161AF8641BBCFC99FE712E4FBD7F35BD96C "点击放大")

#### 效果预览

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/27/v3/LBO4B4mIRzC0Fbr4prR_UQ/zh-cn_image_0000002628597976.png?HW-CC-KV=V1&HW-CC-Date=20260709T133941Z&HW-CC-Expire=86400&HW-CC-Sign=68FC36F5AB1788809B778CED29EF8114712EC5A3ED5F6C00D524E7EF60867E32 "点击放大")

#### 背景知识

*   通用属性[maskShape](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-sharp-clipping#maskshape12)是用于为组件添加指定形状的遮罩，遮罩后，组件显示为遮罩的形状（即若指定圆形遮罩，则组件最终显示为圆形），遮罩形状从组件的左上角开始绘制。
*   在指定遮罩形状时可以通过[fill](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-drawing-components-circle#fill)属性填充形状颜色，使遮罩后的组件呈现不同的透明度；当填充的颜色为黑色（Color.Black或000000）、透明（Color.Transparent）或透明度为00（16进制颜色00XXXXXX）的颜色时，会将组件完全遮罩，组件不显示。

#### 问题定位

1.  排查maskShape是否设置了黑色、透明色或透明度为00的颜色；
2.  确认组件在遮罩后的位置有可显示的内容。

#### 分析结论

问题代码中，组件Circle设置的遮罩层形状CircleShape填充了颜色#00000000，即透明度为00的黑色，导致组件被完全遮罩，不显示。

#### 修改建议

调整maskShape形状的填充颜色，不设置为黑色、透明色或透明度为00的颜色。

import { CircleShape } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  maskSize: string | number \= 180;

  build() {
    Column() {
      Circle()
        .width(200)
        .height(200)
        .fill('#0D5AF5')
        .maskShape(new CircleShape().width(this.maskSize).height(this.maskSize).fill('#0000FF'))
    }
    .width(300)
    .height(300)
  }
}