小程序 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+人已关注加入我们
- 微信二次开发Java自定义菜单事件实现
- 微信OAuth授权获取用户OpenId-JAVA(个人经验)
- 【手写文字识别】-JavaAPI示例代码
- 【Python3-API】情感倾向分析示例代码
- SpringMVC+Hibernate +MySql+ EasyUI实现CRUD(一)
- 【Python3-API】通用文字识别示例代码
- Python入门教程之安装MyEclipse插件和安装Python环境
- AutoFlowLayout-多功能流式布局与网格布局控件
- RBAC新解:基于资源的权限管理(Resource-Based Access Control)
- 基于开源项目搭建属于自己的技术堆栈
- Redis整合Spring项目搭建实例
- SpringMVC+Hibernate +MySql+ EasyUI实现POI导出Excel(二)
- Nginx+Tomcat+Redis负载均衡Session共享实现超级简单(CentOS6.9系统 Java版本)
- Apache Ignite——新一代数据库缓存系统
- 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 数组属性和方法
- 小程序返回的时间戳转化成时间
- 小程序使用 组件库 vant-weapp详细教程
- 小程序数据渲染根据返回值计算百分比并且显示
- JS获取当前系统时间戳的方法
- TensorFlow 2建立神经网络分类模型——以iris数据为例
- 突击并发编程JUC系列-阻塞队列 BlockingQueue
- Matlab建立SVM,KNN和朴素贝叶斯模型分类绘制ROC曲线
- Python安装TensorFlow 2、tf.keras和深度学习模型的定义
- TensorFlow2 keras深度学习:MLP,CNN,RNN
- Flutter ListView 局部刷新数据、ListView点赞收藏
- R语言公交地铁路线网络图实现数据挖掘实战
- R语言风险价值VaR(Value at Risk)和损失期望值ES(Expected shortfall)的估计
- R语言机器学习实战之多项式回归
- 5000字!带你零距离接触websocket!
- 使用 GitLab CI 和 Docker 自动部署 Spring Boot 应用