回転オブジェクトのサイズを変更した後、左上の位置を更新するにはどうすればよいですか？

Question

私は4つの辺のいずれかと4つの隅のいずれかによってサイズ変更可能なオブジェクトを持っています。

私は回転可能にしようとしていますが、アンカーがオブジェクトの中心になるようにCSSプロパティtranslate: rotate(angle)を使っています。

オブジェクトには、top、left、width、height、angleの各プロパティがあります。

問題が発生するのは、一度回転させると、たとえば右下隅からサイズを変更する必要がある場合、センターアンカーポイントを維持したまま左上の位置を維持しないということです。

おそらくいくつかの三角法を使って、左上の位置を更新する方法を見つける必要があります。

document.getElementById("button").addEventListener("click", function() { 
 
    var obj = document.getElementById("object"); 
 

 
    console.log(obj.style.top, obj.style.left); // 100, 100 
 

 
    obj.style.width = "200px"; 
 
    obj.style.height = "200px"; 
 

 
    // Something needs to be done here to update the top left position and keep it in place 
 

 
});

div { 
 
    position: absolute; 
 
    top: 100px; 
 
    left: 100px; 
 
    width: 50px; 
 
    height: 50px; 
 
    background: red; 
 
    transform-origin: 50% 50%; 
 
    transform: rotate(20deg); 
 
}

<div id="object"></div> 
 
<button id="button">Resize bottom-right corner</button>

私はフィドルhere

Answer 1

を持っている私はあなたがそれを所定の位置にとどまる作ろうとしていると仮定し、これだけ追加します。

obj.style.left = "25px"; 
obj.style.top = "25px"; 

高さと幅を設定した後。 ポジションを取得するには、サイズを50〜200ピクセル（4倍増）にしていたのを見たので、元のx/yの4分の1にして「同じ」位置に配置しました。

希望すると便利です。 （codepen：http://codepen.io/JohnJ1101/pen/wJpJqE）