小程序 Canvas 层级问题
时间:2022-07-24
本文章向大家介绍小程序 Canvas 层级问题,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
“
在使用 canvas 编辑图片,使用添加弹框来自定义添加文字,在微信开发工具上是正常弹窗不会被挡到,到手机上测试,发现弹框一直会在 canvas 组件后面
”
在官方文档中可以看到 原生组件说明:
- 原生组件的层级是最高的,所以页面中的其他组件无论设置
z-index
为多少,都无法盖在原生组件上。- 后插入的原生组件可以覆盖之前的原生组件。
- 原生组件还无法在 picker-view 中使用。
- 基础库 2.4.4 以下版本,原生组件不支持在 scroll-view、swiper、movable-view 中使用。
- 部分CSS样式无法应用于原生组件,例如:
- 无法对原生组件设置 CSS 动画
- 无法定义原生组件为
position: fixed
- 不能在父级节点使用
overflow: hidden
来裁剪原生组件的显示区域
- 原生组件的事件监听不能使用
bind:eventname
的写法,只支持bindeventname
。原生组件也不支持 catch 和 capture 的事件绑定方式。 - 原生组件会遮挡 vConsole 弹出的调试面板。 在工具上,原生组件是用web组件模拟的,因此很多情况并不能很好的还原真机的表现,建议开发者在使用到原生组件时尽量在真机上进行调试。
这就知道了为什么弹框会一直被挡住了,在小程序里面,原生组件的层级最高。
虽然提供了 cover-view
和 cover-image
组件,可以覆盖在原生组件上。但是不符合我的业务逻辑,我就没有用,在 google
之后,很多方式都是首先 canvas
组件转换为临时图片,然后用 <image></image>
将图片显示出来,但是这样无法继续编辑 canvas
。
所以我想了用将 canvas
和 imgae
一起用,代码如下:
## .wxml
<view>
<canvas-drag class="{{radarImg ? 'gun' : ''}}" id="canvas-drag" graph="{{graph}}" width="750" height="1030">
</canvas-drag>
<image class="{{!radarImg ? 'gun' : ''}} radarImg" src='{{radarImg}}'></image>
<view class="btn" bindtap="showModal">添加文字</view>
</view>
一开始不需要 image
组件,所以我们让他 .gun
到屏幕外面去了。同样,需要用到 image
的时候,我们会让 canvas
也 .gun
出屏幕外去
## .wxss
.radarImg {
width: 750rpx;
height: 1030rpx;
}
.gun {
position: absolute;
left: -999px;
top: -0px;
}
在点击 添加文字
的时候,然后保存成临时文件,放到 image 组件里去,canvas 组件隐藏,弹出弹框,点击确定,canvas 组件重新回来。这样可以重新编辑,也可以弹框。
目前10000+人已关注加入我们
- 解决Tomcat数据连接池无法释放
- hdu----(1075)What Are You Talking About(trie之查找)
- hdu--(1247)Hat’s Words(trie树)
- HDU----(4519)郑厂长系列故事——体检
- 张戈博客成功启用移动端主题:Mobile Pack
- Oracle数据库性能障碍分析利器:SYSTEMSTATE DUMP介绍
- hdu ---(4517)小小明系列故事——游戏的烦恼(Dp)
- HTTP加速器varnish安装小记(1)
- 手把手教你估算深度神经网络的最优学习率(附代码&教程)
- 批处理判断第一个硬盘的最后一个分区并进入
- MVCC原理探究及MySQL源码实现分析
- 关于热点数据导出与加载的影响,多的是你不知道的事
- 【Python】30行代码教你将微信变成智能回复机器人
- 【python爬虫】知乎互联网话题问答内容可视化分析
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法