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

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

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

这里是一个简化的例子

我需要在

getCorrection

中进行哪些代码修改以保持左上角位置始终不变

更新：

---

根据下面的评论，计算是准确的，但浏览器不能完美地处理像素的分数，这似乎是一个技术限制？有没有解决方法？

如果应用相对于左上角的变换（

变换原点：左上

），则无需计算该修正系数。然后，如果需要将所有形状放置在页面上，则可以将其换行：

const obj=document.querySelector（'.object'）；
const btn=document.querySelector（'button'）；
设h=100；
设w=100；
btn.addEventListener（'单击'，（）=>{
h+=5；
w+=5；
updateElement（）；
});
函数updateElement（）{
obj.style.width=w+‘px’；
obj.style.height=h+‘px’；
}
updateElement（）
正文{
保证金：0；
高度：100vh；
显示器：flex；
证明内容：中心；
对齐项目：居中；
弯曲方向：立柱；
溢出y：滚动；
溢出x：隐藏；
}
钮扣{
利润率：8px；
填充：8px；
字体系列：monospace；
边框：2件纯黑；
背景：透明；
}
.集装箱{
位置：相对位置；
宽度：100%；
身高：100%；
}
.对象首字母{
位置：绝对位置；
顶部：16px；
左：30%；
轮廓：1px黑色虚线；
变换：旋转（20度）；
变换原点：左上角；
宽度：100px；
高度：100px；
}
.反对{
位置：绝对位置；
顶部：16px；
左：30%；
外形：1px纯黑；
变换：旋转（20度）；
变换原点：左上角；
}
增加宽度和高度
我终于能够解决亚像素渲染的问题。我稍微改变了一种方法——我使用css translate（）应用相同的偏移量，而不是用偏移量更新左上坐标。效果很好

似乎transform具有更好的子像素渲染优化

这是一本书

相同的公式可以重复使用，只需稍作调整即可保留任何矩形角。
很抱歉，如果不清楚，原点不能更改-它应该是中心，因为有许多用户基于它进行交互。@Vytalyi不可能同时保留左上角和中心位置。好的，中心显然会移动。我明白。然而，原点应该保持“中心”。在我的简化示例中，我正在更新宽度和高度，这类似于拖动右下角的对象。所以我希望对面的角落保持初始位置，以提供更好的用户体验。我很确定这是可能的。我通过指定顶部和左侧坐标来定位元素。所以我需要计算左上角的值，不确定是否可以在计算中使用“newcenter”…
r
在这种情况下应该是20，而不是30。您也可以使用函数读取角度，检查
getAngle
此处good point@UnLoCo！这有点帮助！现在，若你们继续点击按钮，你们会看到左上角的一些小位移（像素的一半左右…）。你知道为什么会这样吗？视频不确定，但尝试舍入像素值，看看是否有差异。或者，没有任何差异：（好吧，计算是准确的，但这是浏览器所能做的最好的，它不能比现在更好地处理像素的分数，所以我认为这是一个技术限制，但有人能比我更好地解释它！
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)';
}