android js 双指事件,双指缩放的实现方式对比
一、双指缩放的实现方式
方式一: 根据手势计算scale重新render生成视图
实现逻辑
(1) 通过Web端手势库 AlloyFinger 获取元素onPinch事件的双指缩放比例scale。
(2) 修改DOM元素的宽高和字体大小,重新render视图
优点
(1) 清晰度
通过js修改元素样式,缩放过程中一直很清晰。
(2) 兼容性
通过js修改修改元素样式并重新render,不存在兼容性问题。
(3) 报表冻结
可以实现冻结报表在缩小的过程中展示更多内容。
(4) 局部缩放
可以实现整个页面不缩放,只缩放页面局部元素的效果。
缺点
(1) 性能
在双指缩放的过程中频繁执行js代码,持续render,性能很差。
方式二: 根据手势计算scale修改元素scale()样式
实现逻辑
(1) 通过Web端手势库 AlloyFinger 获取元素onPinch事件的双指缩放比例scale。
(2) 通过Web端CSS3动画库transformjs修改DOM元素的transform:scale缩放比例。
优点
(1) 性能
双指缩放的过程中不需要重新render,只修改DOM元素的scale,性能很好。
(2) 局部缩放
可以实现整个页面不缩放,只缩放页面局部元素的效果。
缺点
(1) 清晰度
放大过程中,在iOS设备浏览器中,清晰度降低。
(2) 报表冻结
难以实现冻结报表在缩小的过程中展示更多内容。
(3) 兼容性
不同系统、不同浏览器对transform:scale的CSS样式解析不同,兼容性不好。
(4) 父容器
在iOS设备浏览器中,被修改transform:scale元素(A)父元素(B)的滚动条以A元素的初始尺寸大小为准进行滚动条分配。如果元素A的scale增加了,则A在B中会滚不到头。除非同比例修改A的width和height,但这样在ios设备浏览器中又可能导致页面空白的bug。此问题未找到较好的解决办法,在android中没有此问题。
方式三: 浏览器默认实现
实现逻辑
通过动态修改"type=viewport"的meta标签的content属性值控制单页应用不同页面是否禁止双指缩放。
优点
(1) 性能
浏览器实现,性能最好
(2) 清晰度
浏览器实现,清晰度很好
(3) 兼容性
浏览器实现,兼容性一般
缺点
(1) 局部缩放
难以实现整个页面不缩放,只缩放页面局部元素的效果。
(2) 报表冻结
难以实现冻结报表在缩小的过程中展示更多内容。
方案对比
方案对比
根据手势计算scale重新render生成视图
根据手势计算scale修改元素scale()样式
浏览器默认实现
清晰度
好
iOS差
好
性能
差
好
好
兼容
好
差
差
冻结展示
可变
不可变
不可变
局部缩放
可以
可以
不可以
父容器
可变
iOS不可变
可变
方案选择
最终方案
(1) iOS设备性能较好,使用“方式一”解决方案。
(2) Android非冻结报表使用“方式二”解决方案。
(3) Android冻结报表使用双指缩放过程“方式二”,双指松开使用“方式一”解决方案。
代码实现
/**
* 双指缩放
* @param evt
*/
onPinch(evt){
evt.stopPropagation();
if(Device.ios()) {
//重新render
const lastScale = this.scale;
const scale = lastScale * evt.scale;
this.setTableZoomScale(scale);
} else {
if(this._isAnyFrozenTable()) {
//缩放时修改CSS,松开时重新render
let cssScale = this._getReportNodeCssScale();
if(evt.scale / cssScale > 0.66 && evt.scale / cssScale < 1.5) {
this._setReportNodeCssScale(evt.scale);
}
} else {
//只修改CSS
const scale = this.cssScale * evt.scale;
this._setBodyTableCssScale(scale);
}
}
}
/**
* 多手指触摸释放事件
*/
onMultipointEnd(){
if(Device.ios()) {
this.scale = this.reportRef.tableManager.getScale();
} else {
if(this._isAnyFrozenTable()) {
//重新render
let cssScale = this._getReportNodeCssScale();
this.scale = cssScale * this.scale;
this.setTableZoomScale(this.scale, ()=> {
this._setReportNodeCssScale(1);
});
} else {
this._saveBodyTableCssScale();
}
}
}
android js 双指事件,双指缩放的实现方式对比相关推荐
- js中事件绑定的几种方式
事件处理程序即给元素绑定事件的方式有下列几种:HTML事件处理程序.DOM0级事件处理程序.DOM2级事件处理程序.IE事件处理程序.跨浏览器事件处理程序.其实这些方式就是一个逐步优化和实现跨浏览器的 ...
- android获取自定义属性,android 自定义控件中获取属性的三种方式(转)
第一种方法,直接设置属性值,通过attrs.getAttributeResourceValue拿到这个属性值. (1)在xml文件中设置属性值 android:layout_width="f ...
- js移动端双指缩放和旋转
在iOS上有一组双指事件gesturestart.gesturechange.gestureend gesturestart触发条件是当屏幕上有两根或以上手指并且第二根手指放在当前元素上 当两根手指移 ...
- Android中使用WebView加载本地html并支持运行JS代码和支持缩放
场景 Openlayers中使用Image的rotation实现车辆定位导航带转角(判断车辆图片旋转角度): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/art ...
- android缩放组件,Android控件实现图片缩放功能
1 简介 先来一张效果图 TIM图片.gif 上图中灰色的一块是ImageView控件,ImageView中的图片进行左右上下移动,以及双指缩放. 对于android控件的缩放移动,点这里----an ...
- android如何绑定事件,Android_安卓为按钮控件绑定事件的五种方式
一.写在最前面 本次,来介绍一下安卓中为控件--Button绑定事件的五种方式. 二.具体的实现 第一种:直接绑定在Button控件上: 步骤1.在Button控件上设置android:onClick ...
- Magnifier.js - 支持鼠标滚轮缩放的图片放大镜效果
Magnifier.js 是一个 JavaScript 库,能够帮助你在图像上实现放大镜效果,支持使用鼠标滚轮放大/缩小功能.放大的图像可以显示在镜头本身或它的外部容器中.Magnifier.js 使 ...
- d3.js zoom 事件
d3.js zoom 事件 冷色系微风爱丶 d3.js v3 英文文档 https://github.com/d3/d3-3.x-api-reference/blob/master/Zoom-Beh ...
- Android JS 通过JSBridge(BridgeWebView)相互调用详解
一.JSBridge GitHub链接 https://github.com/lzyzsd/JsBridge 二.AndroidStudio配置JsBridge 1.根目录Gradle配置 maven ...
最新文章
- ubb代码转化html代码
- 如何测试组件的性能?
- HarmonyOS之深入解析媒体会话的管理
- 更了吗?Windows 11 22000.184 推送
- java ftp批量下载_java ftp连接一次下载多个文件
- (52)Verilog HDL下升沿检测
- android 睡眠与唤醒I
- 数据库的一些基础研究和性能探讨(触发器)
- C# 读取Sqlite数据库的Datetime类型 会报错(时间格式不正确)
- 隧道应用(一)netsh端口映射内网
- Windows 下网卡对802.1Q tag 的支持
- 信用的“刚柔并进”大家信夫的普惠信用
- 2022P气瓶充装判断题及在线模拟考试
- keil无法选择单片机类型的问题
- Android的.9图片使用问题
- 关于澳洲国立大学雅思成绩的反思
- localhost,127.0.0.1,本机IP
- 阿里云企业邮箱代理商:foxmal邮件发送RCPT错误怎么办?
- 量化、交易、策略、算法精选论文汇总,建议收藏
- 在线快速将pdf转换成word
热门文章
- 如何有效运用测评自养号来提升阿里国际店铺权重
- APIO2023 游记
- windows下用pip国内源的方式安装pytorch
- tomcat 停止时提示警告信息WARNING: Problem with directory [/usr/share/tomcat8/shared]
- 《用Python解决寻找水仙花数,百钱百鸡问题|CSDN创作打卡》
- web前端处理订单待支付倒计时计算显示问题
- 运动竞技与信息科技的浪漫碰撞——火天网境网络空间靶场
- slf4j Failed to load class “org.slf4j.impl.StaticLoggerBinder“ 错误 源码解析
- 【Docker_Swarm】Swarm 集群创建,从“0”到“1”
- React 学习之父子组件传值