Position de la boîte après la rotation de la transformation webkit

Est-ce que quelqu'un sait comment obtenir le coin supérieur gauche affiché d'une boîte pivotée après avoir utilisé une rotation avec webkit-transformer? Donc, par exemple, je dessine une case pour le coin en haut à gauche, fais tourner la boîte de 270 degrés par exemple, puis comment je cherche la position du "nouveau" coin supérieur gauche, qui dans ce cas est effectivement le coin en bas à droite d'origine ...Position de la boîte après la rotation de la transformation webkit

J'ai essayé d'utiliser jQuery pour vérifier offset(). top et offset(). left mais il semble que jQuery est assez intelligent pour savoir que le conteneur est pivoté, et je récupère le coin supérieur gauche original que je ne veux pas dans ce cas. Je suppose que je pourrais suivre les rotations et demander toujours les décalages corrects, mais je pense que ce serait un peu plus robuste si cela était possible.

Merci pour votre aide!

Source

2010-07-07 Matthew

Essayez saisir le coin en haut à gauche comme point (boîte non bondissant d'origine), le transform-origin, le width et la height ainsi que la propriété de style transform.

Pour obtenir le point en haut à gauche d'origine d'un élément dans WebKit utiliser cette fonction: Si l'origine transformation

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

}

est une quantité spécifique, comme 50px 30px alors vous pouvez l'utiliser à droite comme point de tourner le haut à gauche par. S'il s'agit d'un pourcentage, utilisez la largeur et la hauteur pour déterminer le point de rotation. e.g. 20% 60px would be (width/5,60)

Pour obtenir l'angle de l'élément (si vous ne connaissez pas déjà), vous pouvez exécuter cette fonction

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

    }

Prenez le transform-origin et utiliser cette fonction (p1 est l'origine, utilisez [ 0,0] et p2 est la transformation d'origine, alors l'angle est la rotation en radians

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; 

    }

ajouter le résultat à votre supérieur gauche calculé à partir de l'original et vous devriez avoir la position du haut à gauche n'importe quel angle

Source

2012-04-13 15:39:09

Position de la boîte après la rotation de la transformation webkit

Répondre

Questions connexes