HarmonyOS 不规则形状裁剪

看如果想实现一张图片上盖一个镂空的遮罩层,然后镂空的部分做相应的裁剪形成一张新图。系统现在是否支持?

HarmonyOS
2024-12-25 07:39:18
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Excelsior_abit

可以参考此demo:

@Entry
@Component
struct List_Mask {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  @State isMask: boolean = false
  build() {
    Column(){
      Stack() {
        Image($r('app.media.background')).width(200).height(200)
        if (this.isMask) {
          Row() {
            Canvas(this.context)
              .width('100%')
              .height('100%')
              .onReady(() => {
                this.context.fillStyle = '#50000000';
                this.context.fillRect(0, 0, 200, 200);
                this.context.clearRect(50, 50, 100, 100);
              })
          }
          .height(200)
          .width(200)
        }
      }
      .width('100%')
      Button("开启/关闭遮罩").onClick(()=>{
        this.isMask = !this.isMask
      })
    }
  }
}

参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-drawing-customization-on-canvas-V5#%E4%BD%BF%E7%94%A8%E7%94%BB%E5%B8%83%E7%BB%84%E4%BB%B6%E7%BB%98%E5%88%B6%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9B%BE%E5%BD%A2

分享
微博
QQ
微信
回复
2024-12-25 09:37:49
相关问题
视频列表的不规则排列
1053浏览 • 1回复 待解决
HarmonyOS 如何做不规则的流水布局
344浏览 • 1回复 待解决
编写一个页面,实现不规则列表
931浏览 • 1回复 待解决
HarmonyOS PixelMap裁剪
302浏览 • 1回复 待解决
HarmonyOS 图片裁剪问题
189浏览 • 1回复 待解决
HarmonyOS 裁剪报错:62980109
43浏览 • 1回复 待解决
HarmonyOS 图像裁剪的demo
619浏览 • 1回复 待解决
HarmonyOS 包名规则
291浏览 • 1回复 待解决
HarmonyOS 有没有图片裁剪控件?
263浏览 • 1回复 待解决
HarmonyOS 如何进行图片裁剪
201浏览 • 1回复 待解决
HarmonyOS 选择图片,裁剪的功能
383浏览 • 1回复 待解决
HarmonyOS 相册,相机拍照并裁剪
356浏览 • 1回复 待解决