webkit轉換後的框位置

有誰知道如何在使用webkit轉換使用旋轉後顯示旋轉框的左上角顯示？因此，例如，我畫一個盒子詢問左上角，例如旋轉框270度，然後如何查詢「新」左上角的位置，在這種情況下是有效的原始右下角...webkit轉換後的框位置

我試過使用jQuery來檢查偏移量（）。頂部和偏移量（）。左但似乎jQuery是足夠聰明的知道容器旋轉，我找回我不想在這種情況下的原始左上角。

我想我可以跟蹤旋轉，然後總是要求正確的偏移量，但我認爲如果這是可能的話，它會更穩健一些。

感謝您的幫助！

2010-07-07 Matthew

嘗試抓取左上角作爲點（原始不包圍框），然後是transform-origin,width和height以及transform樣式屬性。

爲了得到一個元素的原始左上點WebKit中使用此功能：

function getOffset(el){ 

     if(el.context!==undefined) 
      el = el[0]; //remove the jquery wrapper if there is one 

     var x = 0, y = 0; 

     while(el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) { 

      x+=el.offsetLeft; 
      y+=el.offsetTop; 
      el = el.offsetParent; 
    } 

    return {left:x,top:y}; 

}

如果轉換原點是一個特定量，如50px 30px那麼你可以使用它的權利爲點按左上方旋轉左上角。但是，如果是百分比，請使用寬度和高度來確定要旋轉的點。 e.g. 20% 60px would be (width/5,60)

要得到的角度出的元素（如果你不知道的話），你可以運行這個功能

function getRotation(el,returnType,recurse) { 

     el = el.context!==undefined?el[0]:el; 

     var styl = el.style, 
      tran = styl.transform || styl.webkitTransform || styl.mozTransform || 'rotate(0deg)', 
      rgx = tran.match(/\(([\d\.]+)\w/i), 
      ang = parseFloat(rgx[1])||0, 
      type = rgx[2]||"deg"; 

     recurse = (recurse===undefined?false:recurse); 
     returnType = returnType || "deg"; 

     if(recurse && el.className.indexOf("limb-piece")!==-1) 
      ang += getRotation(el.parentNode,returnType,recurse); 

     if(returnType===type) 
      return ang; 
     else { 

      if(type==="deg") 
       return ang*(180/Math.PI); 
      else 
       return ang*(Math.PI/180); 
     } 

    }

採取transform-origin，利用此功能（P1爲原點，用[ 0,0]和p2是變換原點，然後角弧度旋轉

rotatePointAroundPoint : function(p1,p2,ang){ 

     var s = Math.sin(ang), c = Math.cos(ang), 
      x = p1[0] - p2[0], y = p1[1] - p2[1], 

      rx = x * c - y * s, 
      ry = x * s + y * c, 

      ret = [rx+p2[0],ry+p2[1]]; 

     return ret; 

    }

然後將結果添加到您從原來計算的左上角，你應該有的左頂部的位置任何角度

來源

2012-04-13 15:39:09

webkit轉換後的框位置

回答

相關問題