# 组件设置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属性前后效果图对比：

注释前：

注释后：

#### 效果预览

#### 背景知识

*   通用属性maskShape是用于为组件添加指定形状的遮罩，遮罩后，组件显示为遮罩的形状（即若指定圆形遮罩，则组件最终显示为圆形），遮罩形状从组件的左上角开始绘制。
*   在指定遮罩形状时可以通过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)
  }
}
```