小程序-canvas在IOS手机层级最高无法展示问题
要求的效果:
正面:
背面:
在开发者工具 利用css 和定位实现了一个版本
.topBox.on {
transform:rotateY(180deg); }
.topBox {
position:relative;
height:300rpx;
transform-style:preserve-3d;
transition:1s; }
.codeBg {
transform:rotateY(180deg);
-webkit-transform:rotateY(180deg);
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
position:absolute;
width:600rpx;
height:300rpx;
background:#fff; }
此时 在真机上测试 会发现出现问题
canvas在最上面 之后看官网api,原生组件的使用注意点,层级最高,其他组件的z-index无论为多少,都无法盖在原生组件上。
为了解决覆盖问题,在翻转在背面的时候 我进行了 对画布的清空,这样画布虽然在最上层 但是不会遮挡住后面的会员卡信息
但是会出现一个问题 翻转事件的触发问题,我的翻转事件是绑定在 最大的容器上 (包裹会员卡和二维码的大盒子容器)
<view class="topBox {{isTrans?'on':''}}" bindtap='toTrans'>
在安卓上,效果是可以实现的,在ios上,canvas所占领的位置 会无法触发翻转事件,为了解决这个问题 我在canvas上进行了方法绑定
<canvas class="canvas " canvas-id='canvas' bindtouchstart="moveStart" bindtouchmove="move" bindtouchend="moveEnd"></canvas>
监听了canvas的触摸事件,在确定为ios的设备上 进行事件触发
//画布的触摸事件
moveStart:function(){
var that=this; if (!that.isIOS()) { return }
console.log(1)
var a=setInterval(function(){
that.setData({
moveTime:that.data.moveTime++
})
console.log(that.data.moveTime)
},10) that.setData({
timeBar:a
})
},
move:function(){
if (!this.isIOS()) { return }
console.log('移动了')
}, moveEnd:function(){
var that=this; if (!that.isIOS()){return null}
console.log(this.data.moveTime)
if (this.data.moveTime<500){ clearInterval(that.data.timeBar)
that.setData({
moveTime: 0
}) this.toTrans();
}else{
clearInterval(that.data.timeBar)
that.setData({
moveTime: 0
})
}
},
设置一个定时器,获取触摸开始到结束的时间超过500ms为 长按不进行翻转事件的触发,小于500ms的确定为触发事件
isIOS: function () {
var flag = false;
wx.getSystemInfo({
success: function (res) {
if (res.platform == "ios") {
flag = true
}
}
})
return flag;
},
// 卡片旋转
toTrans:function(){
var that=this;
that.setData({
isTrans: !that.data.isTrans
}) if(that.data.isTrans){
that.getCode();
}else{
const ctx = wx.createCanvasContext('canvas')
ctx.clearRect(0, 0, 125, 125)
ctx.draw()
}
},
data里声明moveTime:0,
timeBar:null
这样就完成了 正反两面的翻转问题,但是还是有一点小问题 就是 清空canvas以后 会出现一瞬间的空白 暂时还没有好的办法解决 如果大家有好的方法 请一定留言告诉我
小程序-canvas在IOS手机层级最高无法展示问题的更多相关文章
- 小程序canvas生成海报保存至手机相册
小程序canvas画图保存至手机相册 (1)可直接展示生成的海报 .因手机分辨率不同可能导致生成的海报会有细微差别,这里隐藏canvas海报,页面正常设置海报样式保存时保存隐藏的canvas海报 (2 ...
- 微信小程序 | canvas绘图
1.新的尺寸单位 rpx rpx(responsive pixel): 可以根据屏幕宽度进行自适应. 规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则 ...
- 微信小程序map组件z-index的层级问题
说起微信小程序的map组件,可以说是良心之作了,一个组件解决了所以接入地图的所有麻烦,但是在实际小程序的试用过程中还是存在点问题的.如下情景:刚开始接入map组件的时候是在微信开发工具的模拟器上预览的 ...
- 微信小程序canvas生成并保存图片
---恢复内容开始--- 微信小程序canvas生成并保存图片,具体实现效果如下图 实现效果需要做以下几步工作 一.先获取用户屏幕大小,然后才能根据屏幕大小来定义canvas的大小 二.获取图 ...
- 小程序Canvas性能优化实战
以下内容转载自totoro的文章<小程序Canvas性能优化实战!> 作者:totoro 链接:https://blog.totoroxiao.com/canvas-perf-mini/ ...
- [技术博客]海报图片生成——小程序canvas画布
目录 背景介绍 canvas简介 代码实现 难点讲解 圆角矩形裁剪失败之PS的妙用 编码不要过硬 对过长的文字进行截取 真机首次生成时字体不对 drawImage只能使用本地图片 背景介绍 目标:利用 ...
- 原创:WeZRender:微信小程序Canvas增强组件
WeZRender是一个微信小程序Canvas增强组件,基于HTML5 Canvas类库ZRender. 使用 WXML: <canvas style="width: 375px; h ...
- 记录一下小程序canvas
小程序canvas学习 效果图: .wxml <canvas style="width: 100vw; height: 100vh;" canvas-id="fir ...
- 微信小程序-canvas绘制文字实现自动换行
在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为 我们只能设置文本的最大宽度,这就产生一定的了问题.如果我们绘制的文本长度不确定或者 ...
随机推荐
- echarts 折线图自定义颜色与修改legend颜色
option4 = { title : { text: '', subtext: '' }, color:['#2db7f5','#ff6600','#808bc6'], //关键加上这句话 ...
- 状压dp(状态压缩&&dp结合)学习笔记(持续更新)
嗯,作为一只蒟蒻,今天再次学习了状压dp(学习借鉴的博客) 但是,依旧懵逼·································· 这篇学习笔记是我个人对于状压dp的理解,如果有什么不对的 ...
- ArcGis dbf读写——挂接Excel到属性表 C#
ArcMap提供了挂接Excel表格信息到属性表的功能,但是当数据量较大到以万计甚至十万计的时候这个功能就歇菜了,当然,你可以考虑分段挂接.这个挂接功能只是做了一个表关联,属性记录每个字段的信息需要通 ...
- 1. Ansible 简介
目录 1. Ansible 是什么? 2. Ansible 特性 3. 控制主机需求 4. 被管理节点需求 1. Ansible 是什么? Ansible 是一个配置管理系统(configuratio ...
- javascript 获取字符递增
比如A->B,AA->AB,Z->AA 参考https://blog.csdn.net/xiaotao2004/article/details/75096607 C#版本,改写为ja ...
- CSS3 Background-origin
Background-origin是CSS3为Background扩展的第三个属性,从Background-origin字面上不难发现是指背景图片的原点,其实background-origin主要就是 ...
- python-类对象以字典模式操作
#类对象以字典模式操作 class Person: def __init__(self): self.cache={} def __setitem__(self, key, value): #增加或修 ...
- QButtonGroup按钮组
继承 QObject 提供 一个抽象的按钮容器, 可以将多个按钮划分为一组,不具备可视化的效果,一般放的都是可以被检查的按钮 import sys from PyQt5.QtWidgets impo ...
- kettle 分组
kettle 分组组可以实现group_concat的效果
- 【2】学习C++之引用
C++中的引用类似于现实生活中人们之间起昵称,昵称和本名都可以辨别人. 1.普通变量的引用: ;//a为本名 int &b=a;//b为a的昵称 其中不能光有昵称没有本名,如果只定义了引用,却 ...