实现类似人脸认证时中间镂空,四周颜色变换闪烁的效果

实现类似人脸认证那种中间镂空,四周颜色变换闪烁的效果

HarmonyOS
2024-05-26 14:35:16
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
e_leaner

实现类似人脸认证那种中间镂空,四周颜色变换闪烁的效果

使用的核心API

OffscreenCanvasRenderingContext2D.clearRect(x: number, y: number, w: number, h: number): void

OffscreenCanvasRenderingContext2D.beginPath(): void

OffscreenCanvasRenderingContext2D.lineTo(x: number, y: number): void

OffscreenCanvasRenderingContext2D.stroke(path?: Path2D): void

核心代码解释

画图思路 : 1.清空画布;2.设置填充颜色;3.开始路径 移动画笔到左上角,开始画外框;4.移动画笔到圆开始的地方,开始画圆(圆从右边起来开始画);5.结束路径并填充。

@Entry 
@Component 
struct Index { 
private settings: RenderingContextSettings = new RenderingContextSettings(true) 
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 
@State bgColor: Color = Color.Red 
@State circleCenterX: number = 0 
@State circleCenterY: number = 0 
@State circleRadius: number = 100 
private colorList: string[] = ["#ff8787", "#f783ac", "#da77f2", "#228be6", '#40c057', '#f59f00'] 
​ 
drawCircle(fillColor: string) { 
  this.context.clearRect(0, 0, this.context.width, this.context.height) 
  this.context.fillStyle = fillColor 
​ 
  this.context.beginPath() 
  this.context.moveTo(0, 0) 
  this.context.lineTo(0, this.context.height) 
  this.context.lineTo(this.context.width, this.context.height) 
  this.context.lineTo(this.context.width, 0) 
  this.context.lineTo(0, 0) 
  this.context.arc(this.circleCenterX, this.circleCenterY, this.circleRadius, 0, Math.PI * 2) 
  this.context.fill() 
  this.context.closePath() 
​ 
  console.log("drawCircle" + fillColor) 
} 
​ 
build() { 
  Column() { 
    Button("开始闪烁").onClick(() => { 
      this.colorList.forEach((item: string, index: number) => { 
        setTimeout(() => { 
          this.drawCircle(item) 
        }, index * 500) 
      }) 
    }) 
    Stack() { 
      Image($r("app.media.startIcon")).width(100).height(100) 
      Canvas(this.context) 
        .width('100%') 
        .aspectRatio(1) 
        .backgroundColor(Color.Transparent) 
        .onReady(() => { 
          this.circleCenterX = this.context.width / 2 
          this.circleCenterY = this.context.height / 2 
          // 绘制底色 
          this.drawCircle(this.colorList[0]) 
        }) 
    } 
  }.width("100%") 
  .height("100%") 
} 
}

实现效果


分享
微博
QQ
微信
回复
2024-05-27 19:46:57
相关问题
如何实现类似keyframes效果
726浏览 • 1回复 待解决
类似边框颜色线性渐变
261浏览 • 1回复 待解决
相机人脸检测(FACE_DETECTION)
395浏览 • 1回复 待解决
如何实现组件边缘颜色渐变
642浏览 • 1回复 待解决
PopWindow效果实现有哪些?
288浏览 • 1回复 待解决
如何实现列表页单选效果
1001浏览 • 0回复 待解决
解决Canvas画布缩放时闪烁
397浏览 • 1回复 待解决
如何实现类似插槽功能
621浏览 • 1回复 待解决
canvas如何实现水印效果
391浏览 • 1回复 待解决
如何实现星级评分效果
45浏览 • 1回复 待解决
引导遮罩效果实现最佳方案
334浏览 • 1回复 待解决
滑动组件如何实现单边spring效果
518浏览 • 1回复 待解决