微信小程序 canvas层级过高覆盖原生组件

一、背景

微信小程序中使用signature第三方插件完成签名效果,但真机调试时发现canvas层级过高遮挡了按钮

二、具体问题

问题原因:签名后点击按钮无法生效

问题代码:

<template>
  <view class="sign_page" v-cloak>
    <view class="sign_body">
      <view class="cover">
        <view class="cover_text"
          :style="'transform: rotate( '+ rotate + 'deg);text-shadow: 10rpx 10rpx 5rpx ' + font_color+ ';'">{{uname}}
        </view>
      </view>
      <canvas class="sign_canvas" disable-scroll="true" canvas-id="handWriting"
        :style="bgImg ? 'background: url(' + bgImg + ');background-size:100% 100%;' : ''"
        @touchstart.stop="handWritingStart" @touchmove.stop="handWritingMove" @touchend.stop="handWritingEnd"></canvas>
    </view>
    <view class="sign_footer" :class="{'rotate': rotate == 90}">
      <view class="btn" @click="retDraw">清除</view>
      <view class="btn" @click="exportImg">确认</view>
    </view>
  </view>
</template>

真机调试效果:

说明:

canvas层级过高,遮住了按钮,签字后点击确认或清除按钮都无法触发选中事件

三、问题分析

在小程序中,canvas组件是由客户端创建的原生组件,原生组件层级是最高的。所以在页面中即使将 Z-index 设置很高都无法盖在canvas组件上

四、解决方法

该问题我想到了两种解决方法

方法1:将画布和按钮按需分配视图比例

原代码画布和按钮的宽度都为100%,将画布和按钮按需分配视图比例,如画布占页面的75%,按钮占页面的25%,解决画布遮挡按钮问题

方法2:使用 cover-view 实现覆盖

将需要覆盖在 Canvas 上的元素使用 cover-view 组件包裹起来,cover-view 可以覆盖在 Canvas 上方显示。

cover-view 可覆盖的原生组件包括 map、video、canvas、camera、live-player、live-pusher

小程序官方文档地址:cover-view | 微信开放文档

改造代码:

<template>
  <view class="sign_page" v-cloak>
    <view class="sign_body">
      <view class="cover">
        <view class="cover_text"
          :style="'transform: rotate( '+ rotate + 'deg);text-shadow: 10rpx 10rpx 5rpx ' + font_color+ ';'">{{uname}}
        </view>
      </view>
      <canvas class="sign_canvas" disable-scroll="true" canvas-id="handWriting"
        :style="bgImg ? 'background: url(' + bgImg + ');background-size:100% 100%;' : ''"
        @touchstart.stop="handWritingStart" @touchmove.stop="handWritingMove" @touchend.stop="handWritingEnd"></canvas>
    </view>
	<cover-view class="sign_footer" :class="{'rotate': rotate == 90}">
		<cover-view class="btn" @click="retDraw">清除</cover-view>
		<cover-view class="btn" @click="exportImg">确认</cover-view>
	</cover-view>
  </view>
</template>

css样式增加z-index解决兼容安卓机失效问题 

    .sign_footer {
      flex-shrink: 0;
      width: 100%;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
	  align-items: center;
      position: fixed;
      bottom: 30rpx;
      left: 0;
      height: 170rpx;
	  line-height: 170rpx;
	  z-index: 999;

      &.rotate {
        transform: rotate(90deg);
        bottom: 200rpx;
        left: -124rpx;
        width: 400rpx;
      }

      .btn {
        width: 150rpx;
        background: #0eb543;
        border-radius: 30rpx;
		text-align: center;
        color: #fff;
		padding: 25rpx 0;

        &:nth-child(1) {
          background-color: #c3c3c3;
          color: #000000;
        }
      }
    }

最终实现效果:无论签名文字书写的有多长,按钮都是在画布之上,签名完可以点击按钮触发事件

 最后:👏👏😊😊😊👍👍 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/469032.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

MATLAB编译器配置:MinGW

使用 MATLAB 2022b版本&#xff0c;查询编译器时如上&#xff0c;想安装个MinGW编译器&#xff0c;自带的附加资源管理不好使&#xff0c;只能换个别的法子&#xff0c;经过一些参考&#xff0c;总结如下。 步骤1.在这里下载一个MinGW.最新版本是10.3.0.然后默认安装&#xff…

【好用】Star超36.8k,一个的免费通用数据库管理工具

关于数据库管理工具&#xff0c;大家可能都在用SQLyog、Navicat、MySQL-Front、SQL Studio、MySQL Workbench等等&#xff0c;这些管理工具不是不好用&#xff0c;就是要变魔术才可以用&#xff0c;今天 V 哥给大家推荐一个即好用&#xff0c;又免费的可视化通用数据库管理工具…

手机备忘录怎么导出到电脑,如何将手机备忘录导出到电脑

备忘录是我们日常生活和工作中常用的工具之一&#xff0c;我们可以在手机上轻松地记录重要的事务、想法和灵感。然而&#xff0c;在某些情况下&#xff0c;我们可能需要将手机备忘录导出到电脑进行更详细的整理和管理。那么&#xff0c;手机备忘录怎么导出到电脑&#xff0c;如…

如何设计一个kafka(理解)

因业务需要而对消息中间件的频繁使用后&#xff0c;每次总会问自己一个问题&#xff1a;kafka为什么快&#xff1f;然后再去背一背八卦找找答案。直到近日终于能站在一个新奇的角度理解kafka&#xff0c;且积累的各种细节串通了起来&#xff0c;实属惊喜。 回到最开始的问题&am…

VS Code安装

VS Code 安装 一、下载 进入VS Code官网&#xff1a;https://code.visualstudio.com&#xff0c;点击 DownLoad for Windows下载windows版本 Stable&#xff1a;稳定版Insiders&#xff1a;内测版 二、安装 双击安装包&#xff0c;选择我同意此协议&#xff0c;再点击下一步 …

【办公类-22-15】周计划系列(5-6)“周计划-06 周计划打印pdf(docx删除内容转PDF)“ (2024年调整版本)

作品展示 背景需求&#xff1a; 前期用docx&#xff08;删除第一页反思部分内容&#xff09;转PDF转png&#xff08;第一页&#xff09;的方式获得上传网页用的图片。 【办公类-22-14】周计划系列&#xff08;5-5&#xff09;“周计划-05 上传周计划png&#xff08;docx转PDF…

2. IS-IS 基础实验

2.1 IS-IS 配置实验 2.1.1 实验介绍 2.1.1.1 学习目标 1. 实现 IS-IS 协议基本配置 2. 实现 IS-IS 协议 DIS 优先级修改 3. 实现 IS-IS 协议网络类型修改 4. 实现 IS-IS 协议外部路由引入 5. 实现 IS-IS 接口 cost 修改 6. 实现 IS-IS 路由渗透配置 2.1.1.2 实验组网介…

【每日一题】1793. 好子数组的最大分数-2024.3.19

题目&#xff1a; 1793. 好子数组的最大分数 给你一个整数数组 nums &#xff08;下标从 0 开始&#xff09;和一个整数 k 。 一个子数组 (i, j) 的 分数 定义为 min(nums[i], nums[i1], ..., nums[j]) * (j - i 1) 。一个 好 子数组的两个端点下标需要满足 i < k < …

【web前端】CSS语法

CSS语法 1. CSS语法格式 通常情况下语法格式如下: 选择器{属性名:属性值;属性名:属性值;属性名:属性值;... }2. CSS添加方式 2.1 行内样式 直接将样式写在本行的标签内。 <h1><p style"font-size: 48px; color:red;";>行内样式测试</p></…

抖音视频批量提取软件|无水印视频下载

抖音视频批量提取软件&#xff0c;让您高效下载精彩内容&#xff01; 您是否经常需要下载抖音视频&#xff0c;但传统的下载方式繁琐且低效&#xff1f;别担心&#xff0c;我们为您提供了一款强大而智能的抖音视频批量提取软件&#xff0c;让您轻松实现下载无水印的精彩内容&am…

瑞云渲染邀请码怎么用?

瑞云渲染邀请码是用来提供注册用户的特殊权限或优惠的代码。最近&#xff0c;瑞云渲染在注册页面开放了填写邀请码的功能。对于新用户而言&#xff0c;在注册账号时可能不太了解邀请码的具体作用以及如何获取邀请码。下面我们一起来了解一下吧&#xff01; 瑞云渲染是什么&…

C语言技能数(知识点汇总)

C语言技能数&#xff08;知识点汇总&#xff09; C 语言概述特点不足之处 标准编程机制 数据类型变量数据类型字符类型整数类型符号位二进制的原码、反码和补码 浮点类型布尔类型 常量字面常量const 修饰的常变量#define定义的标识符常量枚举常量 sizeofsizeof(结构体)不要对 v…

视频技术1:使用ABLMediaServer推流rtsp

ABLMediaServer定位是高性能、高稳定、开箱即用、商用级别的流媒体服务器 下边展示了如何把1个mp3作为输入源&#xff0c;转换为rtsp流的过程。 作用&#xff1a;用rtsp模拟摄像头的视频流 1、启动ABLMediaServer ABLMediaServer-2024-03-13\WinX64\ABLMediaServer.exe 配…

nodejs 使用express插件multer文件上传,接收不到文件的bug

把路径改成绝对路径即可 改成 temp是你想上传到文件夹的路径&#xff0c;一般是在项目根目录下

蓝桥杯-python-递归

递归&#xff1a;通过自我调用解决问题的函数 注意&#xff1a; #1.递归出口 #2.当前问题如何变成子问题 例子&#xff1a;利用递归写一个阶乘函数&#xff0c;F(n),求n的阶乘 def f(n):if n < 1:return 1ans n * f(n-1)return ans print(f(5)) 例子&#xff1a;汉诺塔…

伪原创软件哪个好,本文分享5款

在内容创作的领域中&#xff0c;伪原创软件成为了许多人关注的焦点。这些软件旨在帮助用户快速生成与原始内容相似但又有所不同的文章&#xff0c;以满足各种需求。然而&#xff0c;面对众多的伪原创软件&#xff0c;很多人会感到困惑&#xff0c;不知道该如何选择。本文将为大…

mysql查询条件包含IS NULL、IS NOT NULL、!=、like %* 、like %*%,不能使用索引查询,只能使用全表扫描,是真的吗???

不知道是啥原因也不知道啥时候, 江湖上流传着这么一个说法 mysql查询条件包含IS NULL、IS NOT NULL、!、like %* 、like %*%,不能使用索引查询&#xff0c;只能使用全表扫描。 刚入行时我也是这么认为的&#xff0c;还奉为真理&#xff01; 但是时间工作中你会发现还是走索引…

IDEA集成Github

1.分析工程到 Gitee 新建一个项目初始化本地库添加到暂存区添加到本地库 在 Gitee 上可以查看到刚才提交的内容 2 .将本地代码 push 到远程库 新建一个码云仓库新建一个项目初始化本地库添加到暂存区添加到本地库 到码云仓库查看 3.pull 拉取远程库到本地库 在码云…

git基础命令(三)之远程命令

目录 基础概念origin git clonegit remote add 添加远程存储库git remote 显示远程存储库列表git pushgit pushgit push origin mastergit push origin --allgit push -f origin mastegit push origin --tags git fetch获取远程仓库的更新查看远程分支的更新情况拉取特定远程分…

【IntelliJ IDEA】Idea版本控制修改文件后要让文件夹也随之变颜色的操作步骤

idea怎么让修改文件后所在的文件夹也跟着变色 新版本旧版本不一样 旧版本 新版本 全局设置 刚才的setting设置只是对当前项目&#xff0c;想对以后的每个项目都设置上&#xff0c;就要在这个设置里面再设置一下。 效果图