调整旋转对象的大小，保留左上角(子像素渲染问题) [英] Resize rotated object preserving left top corner (sub-pixel rendering issue)

问题描述

我正在尝试使用香草js调整旋转后的对象(使用CSS转换)的大小.对象原点是中心，不能更改.

I'm trying to resize rotated (transformed with css) object with vanilla js. Object origin is center and can't be changed.

我在此处找到了应该执行的功能，但是，它仍然看起来并不理想-左上角会更改其位置(半个像素左右).

I've found a function here which should do the thing, however still it doesn't looks ideal - left top corner change its position (half of pixels or so).

这是一个简化的 codepen示例.

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

What code modifications I need to do at getCorrection to keep left top corner position always same?

更新:

根据下面的评论，计算是准确的，但浏览器无法完美处理像素的小数，这似乎是技术上的限制吗?有任何解决方法的想法吗?

As per comments below, the calculation is accurate but browser just can't deal with fractions of a pixel perfectly which seems like a technical limitation? Any ideas how to fix?

推荐答案

最后，我能够解决亚像素渲染的问题.我已稍微更改了一种方法-而不是更新left&顶部带有偏移量的坐标，我已经使用css translate()来应用相同的偏移量.效果很好.

Finally I was able to resolve issue with sub-pixels rendering. I've changed an approach slightly - instead of updating left & top coordinates with offset, I've used css translate() to apply the same offset. Works very well.

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

Seems transform has much better sub-pixels rendering optimizations.

这是一个 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)';
}

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

Same formula might be reused with slight adjustments to preserve any of rectangle corners.

这篇关于调整旋转对象的大小，保留左上角(子像素渲染问题)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！