需求:
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);