HarmonyOS 鸿蒙Next中相互遮挡的组件，怎么露出【一部分】，类似刮刮卡？

HarmonyOS 鸿蒙Next中相互遮挡的组件，怎么露出【一部分】，类似刮刮卡？

A组件遮挡B组件，怎么让A露出【一部分】B组件？

比如下面例子中，只能看到红色组件，我希望有一个区域，能看到下层蓝色组件，

效果类似刮刮卡，橡皮擦，也就是不能修改A组件尺寸位置什么的。

安卓有类似PhotoShop蒙版的功能，鸿蒙怎么实现呢？

@Component
struct Test01 {
  build() {
    Stack() {
      Text('下层蓝色').width(300).height(300).backgroundColor('#ffbde1ea')
      Text('上层红色').width(300).height(300).backgroundColor('#fff8d3c5')
    }
  }
}

更多关于HarmonyOS 鸿蒙Next中相互遮挡的组件，怎么露出【一部分】，类似刮刮卡？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

10 回复

基于Stack布局和Canvas绘图实现刮刮乐效果，通过PixelMap将结果图片放至Canvas底层，灰图（遮盖图）放至Canvas图层，使用Canvas的绘制能力将灰图逐渐去除，以此实现刮刮乐刮奖效果。

demo 地址

https://developer.huawei.com/consumer/cn/doc/architecture-guides/scratch_effect-0000002320935777

可以参考一下

更多关于HarmonyOS 鸿蒙Next中相互遮挡的组件，怎么露出【一部分】，类似刮刮卡？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


通过Canvas的onTouch事件调用擦除动效scratch方法擦除灰图，实现刮奖效果。

scratch(event: TouchEvent) {
  // 判断是否开始绘制
  if (!this.isDrawing) {
    return
  }
  const touch = event.touches[0]
  // 开始一个新的绘图路径
  this.context.beginPath()
  // 绘制并填充路径
  this.context.arc(touch.x, touch.y, 20, 0, Math.PI * 2)
  this.context.fill()
  // 闭合当前的路径，完成图形的绘制
  this.context.closePath()
}

官方示例效果：https://developer.huawei.com/consumer/cn/doc/architecture-guides/scratch_effect-0000002320935777#section1093619322154

标题

这是段落一。

这是段落二。

cke_112.png

你说的是这个意思吗？

代码如下，仅供参考：

Stack() {
    Text('下层蓝色').width(300).height(300).backgroundColor('#ffbde1ea')
    Rect().fillOpacity(0).border({width:50,color:"#fff8d3c5"}).width(300).height(300)
}

如果有帮助，记得采纳

基于Stack布局和Canvas绘图实现刮刮乐效果，通过PixelMap将结果图片放至Canvas底层，灰图放至Canvas图层，使用Canvas的绘制能力将灰图逐渐去除。

构建灰图，使用createPixelMap创建PixelMap对象，封装getPixmapFromMedia方法，传入遮盖图。

private async getPixmapFromMedia(resource: Resource) {
    // 使用getcontext函数获取当前应用的上下文
    // 并通过这个上下文的resourcemanager获取指定资源的媒体内容并存储在Uint8Array中
    let unit8Array = await getContext(this)?.resourceManager?.getMediaContent({
        bundleName: resource.bundleName,
        moduleName: resource.moduleName,
        id: resource.id
    })
    // 定义图像解码参数
    let decodingOptions: image.DecodingOptions = {
        editable: true,
        desiredPixelFormat: 3,
        desiredSize: { width: vp2px(296), height: vp2px(296 / 3.5) }
    }
    // 使用Uint8Array的数据创建一个图像源（ImageSource）
    let imageSource = image.createImageSource(unit8Array.buffer.slice(0, unit8Array.buffer.byteLength))
    // 根据图像解码参数创建像素图（PixelMap）
    let createPixelMap: image.PixelMap = await imageSource.createPixelMap(decodingOptions)
    // 释放图像资源
    await imageSource.release()
    return createPixelMap
}

通过Canvas的onTouch事件调用擦除动效scratch方法擦除灰图，实现刮奖效果。

scratch(event: TouchEvent) {
    // 判断是否开始绘制
    if (!this.isDrawing) {
        return
    }
    const touch = event.touches[0]
    // 开始一个新的绘图路径
    this.context.beginPath()
    // 绘制并填充路径
    this.context.arc(touch.x, touch.y, 20, 0, Math.PI * 2)
    this.context.fill()
    // 闭合当前的路径，完成图形的绘制
    this.context.closePath()
}

源码下载：https://developer.huawei.com/consumer/cn/doc/architecture-guides/scratch_effect-0000002320935777#section19153548132011

应该是使用canvas绘制一个镂空效果, 这个应该可以帮助你

https://developer.huawei.com/consumer/cn/doc/harmonyos-faqs-V5/faqs-arkui-346-V5

标题

这是第一段内容。

这是第二段内容。

标题

文本内容

关键字: 关键词1, 关键词2

基本信息

  • 创建时间: 2022-01-01
  • 最后更新: 2022-01-02

详细信息

  • 信息1
  • 信息2

在HarmonyOS Next中实现类似刮刮卡效果，可使用Stack组件配合Clip组件控制显示区域。Clip的clipper参数设置自定义裁剪区域，通过手势事件动态修改裁剪路径。示例代码：

Stack() {
  Image($r('app.media.under')) 
  Clip({ clipper: new MyClipper() }) {
    Image($r('app.media.cover'))
  }
}
.gesture(TapGesture().onAction(() => { /* 更新裁剪区域 */ }))

MyClipper需实现Clipper接口的clipPath方法返回Path对象，动态调整Path即可控制露出区域。

在HarmonyOS Next中实现类似刮刮卡的效果，可以通过以下两种方式实现：

  1. 使用Clip组件实现局部裁剪：
@Component
struct Test01 {
  build() {
    Stack() {
      Text('下层蓝色').width(300).height(300).backgroundColor('#ffbde1ea')
      Clip() {
        Text('上层红色').width(300).height(300).backgroundColor('#fff8d3c5')
      }
      .clip(new Rect({width: 50, height: 50})) // 设置裁剪区域
      .position({x: 100, y: 100}) // 设置裁剪位置
    }
  }
}
  1. 使用Mask组件实现蒙版效果：
@Component
struct Test01 {
  build() {
    Stack() {
      Text('下层蓝色').width(300).height(300).backgroundColor('#ffbde1ea')
      Text('上层红色')
        .width(300)
        .height(300)
        .backgroundColor('#fff8d3c5')
        .mask(
          new Circle({width: 50, height: 50}) // 圆形蒙版
            .position({x: 100, y: 100}) // 蒙版位置
        )
    }
  }
}

这两种方法都可以实现在不改变组件尺寸和位置的情况下，让下层组件部分显示出来。Clip是直接裁剪组件，而Mask则是通过蒙版控制显示区域。

回到顶部