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);