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

9 回复

基于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


你说的是这个意思吗？

代码如下，仅供参考：

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

找HarmonyOS工作还需要会Flutter的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：BV1S4411E7LY/?p=17

标题

这是段落一。

这是段落二。

标题

这是第一段文本。

这是第二段文本。

在HarmonyOS Next中，要实现组件相互遮挡时部分漏出，可以使用zIndex属性控制层级，结合clip属性控制裁剪。例如：

Column() {
  Text('底层文本')
    .zIndex(1)
    .clip(false) // 允许内容溢出
  
  Text('顶层文本')
    .zIndex(2)
    .margin({top: -10}) // 向上偏移露出部分底层
}

关键点：

  1. 设置zIndex明确层级关系
  2. 通过clip(false)允许内容溢出父组件边界
  3. 使用margin或position进行微调，

在HarmonyOS Next中实现组件部分遮挡效果，可以使用clip属性结合Shape组件来实现类似蒙版的效果。以下是实现代码示例：

@Component
struct Test01 {
  build() {
    Stack() {
      // 下层蓝色组件
      Text('下层蓝色')
        .width(300)
        .height(300)
        .backgroundColor('#ffbde1ea')

      // 上层红色组件，使用clip裁剪出圆形区域
      Stack() {
        Text('上层红色')
          .width(300)
          .height(300)
          .backgroundColor('#fff8d3c5')
        
        // 使用Shape作为蒙版，圆形区域会显示下层内容
        Shape() {
          Path()
            .width(100)
            .height(100)
            .commands('M50 0 A50 50 0 1 1 50 100 A50 50 0 1 1 50 0')
        }
        .position({x: 150, y: 150}) // 圆形位置
        .clip(new Circle({width: 100, height: 100})) // 圆形裁剪区域
      }
    }
  }
}

这个实现原理是：

  1. 保持原有Stack布局结构
  2. 在上层组件中使用Shape定义要"擦除"的区域形状
  3. 通过clip属性应用圆形裁剪，使该区域透明显示下层内容

你可以根据需要调整Shape的路径命令来创建不同形状的"擦除"效果，如矩形、多边形等。这种方法不需要修改原有组件的尺寸和位置，符合刮刮卡效果的需求。

回到顶部