1. 程式人生 > >【transform】--------------處理圖像縮放後原點計算-------------【劉】

【transform】--------------處理圖像縮放後原點計算-------------【劉】

cal nbsp div 圖像縮放 image span 圖像 圖形變換 圖形

transform-origin: 100px 1000px;
transform: scale(1) translate(0px,0px) rotate(0deg);

一、縮放之前圖形大小,寬300,高300

技術分享圖片

二、以原點transform-origin(100,100)進行縮放scale(1.5)

transform-origin: 100px 100px;
transform: scale(1.5) translate(0px,0px) rotate(0deg);

技術分享圖片

三、這時改變原點為transform-origin(30,30)則圖形變換位置如下

技術分享圖片

四、則要回到上次原點變化之前的位置,保證已新的原點進行縮放

  var animation = {
    sPosX:"0",
    sPosY:"0"
  }
  var scale = 1.5;
  //再次點擊的新的原點
  var origin = {
    x:"30",
    y:"30"
  }
  //上一次的原點
  var sOrigin = {
    x:"100",
    y:"100"
  }
  animation.sPosX += (scale - 1) / scale * (origin.x - sOrigin.x) 
  animation.sPosY += (scale - 1) / scale * (origin.y - sOrigin.y) 

技術分享圖片

【transform】--------------處理圖像縮放後原點計算-------------【劉】