小程序canvas层级过高遮挡元素问题

问题描述


想要实现的效果

实际显示的效果

这是一个canvans绘制的环形进度条,可以看到中间部分的view标签显示的文字被遮挡了,原因如下:

Canvans组件是由客户端创建的原生组件,原生组件的层级是最高的,所以其他元素无论怎么设置z-index属性都无法让元素显示在Canvas上面。

解决方案

  • 将要覆盖的元素改为cover-view标签。

cover-view标签能够让文本覆盖在原生组件上,比如canvas,map,video,camera等。但是只支持嵌套cover-viewcover-imagebutton

  • 如果改为cover-view标签后仍然未显示在上层,需要考虑Canvas的绘画流程,如果元素虚渲染早于canvans绘画,则元素会被canvans盖住。解决方式也非常简单:加入一个drawFinish的状态来控制cover-view渲染与否,在canvans渲染前设置false,渲染完成后更新状态为true

  • 如果将canvans抽取成了组件,将需要显示的文字内容通过slot传入的话,还需要进行额外处理。在canvans渲染完成后,新增finish事件传递出去,控制传入slot组件的元素在finish事件触发后再显示。

js 复制代码
<script setup>
import { ref } from 'vue'

const drawFinish = ref(false)

const drawFinished = () => {
    emits('finished')
    drawFinish.value = true
}
/**
* Circle组件渲染
* 当前进度值变化时重新渲染Circle组件
*/
const doReRender = () => {
  drawFinish.value = false;
  ... // 渲染逻辑
  // 渲染完成更新状态
  drawFinished();
}
</script>

<template v-if="drawFinish">
  <view v-if="!text" class="hd-circle-text">
    <!-- 自定义提示内容 -->
    <slot></slot>
  </view>
  <!-- #ifdef MP-WEIXIN -->
  <cover-view v-else class="hd-circle-text"> {{ text }} </cover-view>
  <!-- #endif -->
  <!-- #ifndef MP-WEIXIN -->
  <!-- eslint-disable-next-line vue/valid-v-else -->
  <text v-else class="hd-circle-text"> {{ text }} </text>
  <!-- #endif -->
</template>

简单代码贴在上面,这是我今天踩的坑,希望能让碰到这些问题的朋友少绕点弯路嘿嘿😊。

相关推荐
桃园码工2 天前
4_使用 HTML5 Canvas API (3) --[HTML5 API 学习之旅]
前端·html5·canvas
桃园码工8 天前
1_HTML5 Canvas 概述 --[HTML5 API 学习之旅]
前端·html5·canvas
码上佳人15 天前
Uniapp中canvas画图生成图片并下载到相册
uni-app·canvas
普兰店拉马努金19 天前
【Canvas与图标】乡土风金属铝边立方红黄底黑字图像处理图标
canvas·图标
SunFlower91420 天前
v3通过pdfjs-dist插件渲染后端返回的pdf文件流,并实现缩放、下一页
前端·svg·canvas·pdfjs-dist
普兰店拉马努金23 天前
【Canvas与雷达】点鼠标可暂停金边蓝屏雷达显示屏
canvas·雷达
Marshall35721 个月前
Canvas 和 SVG 的高级使用与性能优化
前端·svg·canvas
webmote1 个月前
做一个FabricJS.cc的中文文档网站——面向markdown编程
canvas·fabric·使用手册·中文·fabricjs
小黄人软件1 个月前
【AI协作】让所有用电脑的场景都能在ChatGPT里完成。Canvas :新一代可视化交互,让AI易用易得
人工智能·chatgpt·canvas
柳晓黑胡椒1 个月前
cesiusm实现 多图例展示+点聚合(base64图标)
css3·canvas·base64·cesium·animation