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

Question

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

我找到了一个函数here这应该做的事情，但它仍然看起来并不理想 - 左上角改变它的位置(像素的一半左右)。

这是一个简化的 codepen example .

我需要在 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>