JAVAScript:mobile端,基于transform-origin和tranform(scale),实现表格缩放
来源:互联网 发布:js中的format函数 编辑:程序博客网 时间:2024/05/30 04:19
需求:
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);
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);
1 0
- JAVAScript:mobile端,基于transform-origin和tranform(scale),实现表格缩放
- tranform值transform-origin
- #778 – 缩放变换动画(Animating a Scale Transform)
- css3 2D--transform--scale缩放
- transform(变形)和transform-origin(变形原点)
- transform(变形)和transform-origin(变形原点)
- CSS Transform变化 和 transform-origin
- transform(变形)和transform-origin(变形原点)
- transform(变形)和transform-origin(变形原点)
- 矩阵matrix和transform-origin
- CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
- CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
- CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
- CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
- CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
- CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
- CSS3属性transform(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
- CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
- 教你在APP中嵌入翻译功能,不借助第三方软件
- SlidingPaneLayout的基本使用
- BlockCanary — 轻松找出Android App界面卡顿元凶
- 游戏设计之我见 —— 关卡设计中的固有印象
- 13.8 Swift构造方法的自动继承
- JAVAScript:mobile端,基于transform-origin和tranform(scale),实现表格缩放
- C# Type调用方法和CreateInstance的区别
- 老生常谈-GCD线程机制总结
- Spark简介
- 使用Scala实现文件单词计数
- java ThreadLocal proplem
- Java集合类
- 13.9 Swift必须构造方法
- 汇编指令简介