需求:
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),实现表格缩放
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
uendjdjneudheb
ciedesi240
2022-08-24 22:40:22
euirwneirhisudhf
ciedesi240
2022-08-22 10:08:04
又插嘴台湾问题!美军高官声称会为台海冲突做准备
SteveSapp9
2022-07-11 17:47:52
枸杞子是否能治疗阳痿?有科学依据吗
SteveSapp9
2022-07-08 10:16:40
怎样提高性趣?达人教您如何提高夫妻性趣!
SteveSapp9
2022-06-28 15:08:53
可以从super体育找到什么?
yemof57057
2022-06-26 02:05:45
大家会花钱课金吗?以前每月花上万块 现在只玩这两种
yemof57057
2022-06-25 01:14:55
对跳脱舒适圈的看法
yemof57057
2022-06-24 01:36:08
想学会看比赛可以怎么做?
yemof57057
2022-06-22 01:55:05
Are We Ready For Virtual Reality And Its Impact On Our Future?
ciedesi240
2022-06-21 10:16:22
大户的娱乐游戏选择
yemof57057
2022-06-21 01:20:21
which of the Elden Ring items will be the best fit for you
Clagreed90u76q
2022-06-19 00:31:45
sfggrfgrgrfxgf
jonecarlosonline
2022-06-18 19:12:27
Have Bitcoin Potential to Replace Gold?
ciedesi240
2022-06-18 14:24:27
fgfdgdrfgrdgs
jonecarlosonline
2022-06-18 03:29:49
24小時熱門文章