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

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

我发现了一个函数here应该可以执行此操作，但是它仍然看起来并不理想-左上角更改其位置(半像素左右)。

这是简化的codepen example。

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

更新:

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

最佳答案

如果您相对于左上角(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>