HarmonyOS Canvas想要擦除圆形区域,但目前只有clearRect

在换头像的场景中,需要用Canvas绘制一个蒙层,中间一个圆形区域高亮,四周为半透明(#60000000)遮罩。实现思路是用Canvas,整个@Component通过fillRect填充半透明遮罩,再用clear方法擦除中中心的圆形高亮区域。但目前官方sdk只提供了clearRect,无法简单的擦除出一个圆形。是否能通过fill方法去实现,或者有什么其他建议?

HarmonyOS
2024-10-16 11:40:28
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zxjiu

可以利用context的globalCompositeOperation属性的'xor'值:重叠的部分会变成透明。但是如果填充颜色设置为#60000000,带透明度的会有问题,所以使用 '#000000'设置为填充色,通过Canvas() .opacity(0.6) 来设置半透明。

请参考以下代码:

import { display } from '@kit.ArkUI'  
@Entry  
@Component  
struct ClearRect {  
  private settings: RenderingContextSettings = new RenderingContextSettings(true)  
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)  
  build() {  
    Stack({alignContent:Alignment.TopStart}) {  
      Canvas(this.context)  
        .width('100%')  
        .height('100%')  
        .onReady(() =>{  
          this.context.globalCompositeOperation = 'xor'  
          this.context.beginPath();  
          this.context.rect(0,0,px2vp(display.getDefaultDisplaySync().width),px2vp(display.getDefaultDisplaySync().height)-40);  
          this.context.closePath();  
          this.context.fillStyle = '#000000';  
          this.context.fill();  
          this.context.beginPath();  
          this.context.arc(px2vp(display.getDefaultDisplaySync().width)/2,px2vp(display.getDefaultDisplaySync().height)/2,100,0,6.28);  
          this.context.closePath();  
          this.context.fillStyle = '#7AfFFF';  
          this.context.fill();  
        })  
        .opacity(0.6)  
    }  
    .backgroundColor(Color.Yellow)  
    .width('100%')  
    .height('100%')  
  }  
}

参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-offscreencanvasrenderingcontext2d-V5#globalcompositeoperation

分享
微博
QQ
微信
回复
2024-10-16 18:31:54
相关问题
HarmonyOS 怎么设置圆形边框
9浏览 • 1回复 待解决
根据官网的目前只有Android的jks证书了
8128浏览 • 1回复 待解决
HarmonyOS 如何设置图片为圆形
9浏览 • 1回复 待解决
HarmonyOS 如何较好的实现圆形头像
84浏览 • 1回复 待解决
HarmonyOS image如何把图片裁剪成圆形
49浏览 • 1回复 待解决
想要Harmonyos实战的书
9608浏览 • 3回复 待解决
HarmonyOS Canvas 实现动画
56浏览 • 1回复 待解决
HarmonyOS Canvas怎么刷新
74浏览 • 1回复 待解决
HarmonyOS 想要实现图中这样的UI
257浏览 • 1回复 待解决
HarmonyOS tabbar 区域遮挡问题
60浏览 • 1回复 待解决
HarmonyOS canvas画图问题
10浏览 • 0回复 待解决
HarmonyOS 仓颉目前成熟吗?
35浏览 • 2回复 待解决