HarmonyOS 不规则形状裁剪

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

HarmonyOS
1天前
浏览
收藏 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
微信
回复
1天前
相关问题
视频列表的不规则排列
735浏览 • 1回复 待解决
HarmonyOS 如何做不规则的流水布局
27浏览 • 1回复 待解决
编写一个页面,实现不规则列表
817浏览 • 1回复 待解决
HarmonyOS 包名规则
32浏览 • 1回复 待解决
HarmonyOS 图像裁剪的demo
317浏览 • 1回复 待解决
HarmonyOS 有没有图片裁剪控件?
83浏览 • 1回复 待解决
HarmonyOS har包混淆规则
42浏览 • 1回复 待解决
HarmonyOS 混淆规则的问题
163浏览 • 1回复 待解决
HarmonyOS 模块之间混淆规则
41浏览 • 1回复 待解决
HarmonyOS 相册,相机拍照并裁剪
92浏览 • 1回复 待解决
HarmonyOS 选择图片,裁剪的功能
30浏览 • 1回复 待解决
HarmonyOS 如何限制TextInput的规则
441浏览 • 1回复 待解决
HarmonyOS 日历重复规则如何设置
27浏览 • 1回复 待解决
如何实现图片裁剪、旋转
504浏览 • 1回复 待解决
HarmonyOS image如何把图片裁剪成圆形
65浏览 • 1回复 待解决
RelativeContainer组件auto对齐规则
364浏览 • 1回复 待解决