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

Question

我正在尝试使用 vanilla js 调整旋转（用 css 转换）对象的大小。对象原点位于中心且无法更改。

我在这里找到了一个应该可以完成此操作的函数，但是它看起来仍然不理想 - 左上角改变了它的位置（像素的一半左右）。

这是一个简化的codepen 示例。

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

更新：

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

Answer 1

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

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

这是一个codepen 示例。

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

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