调整旋转对象的大小，保留左上角(子像素渲染问题)

Question

我正在尝试使用vanilla js调整旋转(用css转换(对象的大小。对象原点是中心，无法更改。

我在这里找到了一个应该做这件事的函数，但它看起来仍然不理想 - 左上角改变它的位置(大约一半的像素(。

下面是一个简化的代码笔示例。

我需要在getCorrection进行哪些代码修改以保持左上角位置始终相同？

更新：

根据下面的评论，计算是准确的，但浏览器无法完美地处理像素的分数，这似乎是技术限制？有什么想法如何解决吗？

Answer 1

如果应用相对于左上角的变换 (transform-origin: top left(，则无需计算该校正因子。然后，如果需要将所有形状放置在页面上，则可以将它们换行：

const obj = document.querySelector('.object');
const btn = document.querySelector('button');
let h = 100;
let w = 100;
btn.addEventListener('click', () => { 
h += 5;
w += 5;

updateElement();
});
function updateElement() {
obj.style.width = w + 'px';
obj.style.height = h + 'px';
}
updateElement();

body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
overflow-y: scroll;
overflow-x: hidden;
}
button {
margin: 8px;
padding: 8px;
font-family: monospace;
border: 2px solid black;
background: transparent;
}
.container {
position: relative;   
width: 100%;
height: 100%;
}
.object-initial {
position: absolute;
top: 16px;
left: 30%;
outline: 1px dashed black;
transform: rotate(20deg);
transform-origin: top left;
width: 100px;
height: 100px;
}
.object {
position: absolute;
top: 16px;
left: 30%;
outline: 1px solid black;
transform: rotate(20deg);
transform-origin: top left;
}

<button>Increase width and height</button>
<div class="container">
<div class="object"></div>
<div class="object-initial"></div>
</div>

Answer 2

最后，我能够解决子像素渲染的问题。我稍微改变了一种方法 - 我没有用偏移量更新左坐标和顶部坐标，而是使用 css translate(( 来应用相同的偏移量。效果很好。

似乎转换具有更好的子像素渲染优化。

下面是一个代码笔示例。

function updateElement() {
obj.style.left = l + 'px';
obj.style.top = t + 'px';
obj.style.width = w + 'px';
obj.style.height = h + 'px';
obj.style.transform = 'rotate(' + r + 'deg) translate(' + ox + 'px, ' + oy + 'px)';
}

可以重复使用相同的公式，只需稍作调整即可保留任何矩形角。