JAVAScript：mobile端，基于transform-origin和tranform（scale），实现表格缩放

需求：
1，实现表格区域的缩放，而不是整个页面。整个页面包含toolbar + table。其中只缩放table区域

2，已用户操作处进行缩放，而不是固定的某个点，例如中心点，或左上角，笔记缩放时，数据跳动

实现的基本原理：

利用transform-origin，来确定进行缩放的固定点，也就是用户进行缩放的点，同时利用transform:scale(value)来实现缩放

踩过的坑：

1，如果计算用户实际操作时，所选取的进行缩放的固定点：

读取用户两个手指的touch点，之后通过手指间的计算中心点，作为缩放的固定点，公式如下：

scalePointX = (touch1.X + touch2.X) / 2 - targetTable.X;

scalePointY = (touch1.Y + touch2.Y) / 2 -targetTable.Y;

2, 当scale不为零时，修改transform-origin，会导致按照新的固定点，从新scale，这就会导致表格移动

为了避免用户对于表格移动的感知，需要在设置完transform-origin之后，将表格移动回到之前的数据的位置。

这里的坑最深，因为scale的加入，导致坐标系和实际的位置，产生了差异，举个例子，table在scale之前，坐标是（0，0），之后以（0，0）作为固定点，放大。这个时候，看到是原来的左上角，因为放大，而像左上方放生了移动，那么这个时候，坐标系到底放生了什么变化？这里我们利用JQuery可以发现：
1）坐标系没有发生变化，也就是css('left')和css('top')保持不变

2）但 JQuery.position()却发生了变化，left和top变成了负值

也就是说，利用JQuery里css和position属性，在scale时的不同表现，我们可以利用position在修改transform-origin前后的变化，计算出表格在视觉上发生的移动，之后通过这个值，反向设置css里的left和top值，实现把表格移动回到原来视图位置，使得用户感知不到因为transform-origin的变化，而导致的表格移动。

moveOnX = originalPosition.left - currentPosition.left;
        moveOnY = originalPosition.top - currentPosition.top;
        targetTable.css('left', <originalX> + moveOnX);
        targetTable.css('top', <originalY> + moveOnY);

JAVAScript：mobile端，基于transform-origin和tranform（scale），实现表格缩放相关推荐

基于webpack的PC端和mobile端开发以及生产环境的搭建
我们用webpack做单页面应用开发应该尝试过很多次了,如果在同一个项目需要支持PC端和移动端,做成多页面应用,开发时能根据请求的终端返回不同的内容,应该怎么做呢?以下描述的是我尝试的一种方案,并且以 ...
魔坊APP项目-16-种植园、websocket协议、服务端基于socket提供服务（基于房间管理分发信息）、种植园页面展示
种植园我们需要完成的种植园,是一个互动频繁,并且要求有一定即时性的模块,所以如果继续基于http协议开发,那么需要通过ajax发送大量http请求,同时因为http本身属于单向通讯,所以服务端无法主 ...
android 混音源码,FFmpegAndroid android 端基于 FFmpeg 实现音频剪切、拼接、转码、混音、编解码；视频剪切、水印、截图、转码、编 @codeKK c开源站...
android 端基于 FFmpeg 库的使用添加编译 ffmpeg.shine.mp3lame.x264 源码的参考脚本目前音视频相关处理: 音频剪切.拼接音频混音音频转码音视频合成音频 ...
JavaScript - 移动端开发经典教程-李游Leo-专题视频课程
JavaScript - 移动端开发经典教程-20人已学习课程介绍 JavaScript是前端工程师的脚本语言技能之一,而移动端相对于传统的PC端开发,有着许多不同之处. 而随着HT ...
css pc和mobile,初识pc端和mobile端CSS适配利器—vw+rem+CSS locks
前言大概五月份的时候,我下定决心写自己的博客系统,于是断断续续花了近一个月的时间琢磨Nestjs,写完了接口部分.六月份因为工作的原因就搁置了,说来也惭愧,直到九月中旬,才将它拾起.半个月后,后台部 ...
NIO框架入门(一)：服务端基于Netty4的UDP双向通信Demo演示
2019独角兽企业重金招聘Python工程师标准>>> 前言 NIO框架的流行,使得开发大并发.高性能的互联网服务端成为可能.这其中最流行的无非就是MINA和Netty了,MINA目 ...
移动端基于Vant组件封装底部弹出搜索多选列表
移动端基于Vant组件封装底部弹出搜索多选列表: 效果图如下: 点击确定后赋值给表单使用到的组件:van-popup,van-search 组件页面代码:searchDataPopup.vue &l ...
SimpleQQ – WebQQ 桌面端基于WebQQ 1.00内核
SimpleQQ – WebQQ 桌面端基于WebQQ 1.00内核本帖最后由 fdsajhg 于 2010-10-13 18:14 编辑 SimpleQQ – WebQQ 桌面端开发网址: ...
SimpleQQ – WebQQ 桌面端基于----WebQQ 2.00内核
SimpleQQ – WebQQ 桌面端基于----WebQQ 2.00内核 SimpleQQ – WebQQ 桌面端基于WebQQ 2.00内核本帖最后由 fdsajhg 于 2010-10- ...
css3transform rotate,CSS3详解：transform [旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix]...
CSS3详解:transform [旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix] transform的属性包括:rotate() / skew() ...

JAVAScript：mobile端，基于transform-origin和tranform（scale），实现表格缩放

JAVAScript：mobile端，基于transform-origin和tranform（scale），实现表格缩放相关推荐

最新文章

热门文章