使 HTML 元素继承另一个元素的变换

Question

我正在构建一个浏览器扩展程序，可以在第三方网站的图像之上绘制内容。为简单起见，假设它在图像中心绘制了一个大小为 (img.width/2, img.height/2) 的红色框。比如看这张图

我目前正在创建一个红色 <div> 并根据 [=17] 计算的值将其设置为 style.width、style.height、style.left 和 style.top =].似乎这种方法很脆弱，因为总会有另一种奇特的 transform/animation 需要我手动处理。例如下图中的旋转或倾斜，我没有考虑过。

有没有办法说我的 div 应该继承 <img> 的所有转换，所以无论页面开发人员做什么，我的内容都会随之移动？

Answer 1

好的，这需要一点时间，但我自己解决了。

关键是一个名为 getComputedStyle 的函数，它 returns 在执行所有操作后对图像进行净 css 变换。您需要正确地堆叠非 css 转换。我认为你只能在没有 CSS 的情况下缩放和平移图像，所以这很简单。

// get the CSS transform and it's origin
const cssProps = window.getComputedStyle(image);
const transformOrigin = cssProps["transformOrigin"]
const transform: cssProps["transform"]

// get the HTML scaling and translation
const left = image.offsetLeft;
const top = image.offsetTop;
const width = image.width;
const height = image.height;

// create a new element and set it's color
const elem = document.createElement('div');
elem.style.zIndex = 10; 
elem.style.border = 'solid red 2px';
elem.style.position = 'absolute';

// set the css transform and origin
elem.style.transformOrigin = basePos.transformOrigin;
elem.style.transform = `${basePos["transform"]} translate(${left}px, ${top}px)`;
elem.style.width  = `${width/2}px`;
elem.style.height = `${height/2}px`;

这种方法唯一的缺点是必须等待页面加载完成后才能使用getComputedStyle。

Answer 2

所以这对我来说有点过头了。 Idk 如果你试过这个，但是让 div 包含整个旋转 window 相对然后做这样的事情也会工作......

html:

<body> <!-- or whatever the parent is of the whole view -->
  <div class="overlay-window">
    <div class="image-overlay">
    </div>
  </div>
</body>

scss:

body {
  position: relative;
  .overlay-window {
    bottom: 0;
    left: 0;
    position: absolute:
    right: 0;
    top: 0;
    .image-overlay {
      // add grid styling in the parent of this to position your 
      // image outline or however you want to position it here
    }
  }
}

即使只是制作叠加层也可以消除对 javascript 东西的需求。这应该避免旋转和所有旋转的需要，因为它实际上是旋转物体的一部分。

使 HTML 元素继承另一个元素的变换

Make HTML element inherit transform of another

html

javascript

css-transforms

firefox-addon-webextensions