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
相关问题
根据官网的目前只有Android的jks证书了
7991浏览 • 1回复 待解决
想要Harmonyos实战的书
9481浏览 • 3回复 待解决
HarmonyOS Canvas如何重置clip
177浏览 • 1回复 待解决
HarmonyOS 想要实现图中这样的UI
139浏览 • 1回复 待解决
HarmonyOS svg、canvas 的使用详情
345浏览 • 1回复 待解决
HarmonyOS 如何扩大组件点击区域
347浏览 • 1回复 待解决
HarmonyOS 目前是否支持cordova
503浏览 • 1回复 待解决
HarmonyOS canvas支持画圆角矩形吗
254浏览 • 1回复 待解决
HarmonyOS使用canvas如何使文字垂直居中
480浏览 • 1回复 待解决
如何操作canvas重新绘制
955浏览 • 1回复 待解决
canvas如何实现水印效果
858浏览 • 1回复 待解决
怎么让Canvas刷新呀?
282浏览 • 1回复 待解决
The <canvas> component does not exist.
8310浏览 • 3回复 待解决
canvas 貌似不识别啊?
6551浏览 • 1回复 待解决