Javascript 使HTML元素继承另一个元素的转换
我正在构建一个浏览器扩展，它可以在第三方网站的图像上绘制内容。为简单起见，假设它在图像中心绘制了一个大小为Javascript 使HTML元素继承另一个元素的转换,javascript,html,css-transforms,firefox-addon-webextensions,Javascript,Html,Css Transforms,Firefox Addon Webextensions,我正在构建一个浏览器扩展，它可以在第三方网站的图像上绘制内容。为简单起见，假设它在图像中心绘制了一个大小为（img.width/2，img.height/2）的红色框。例如，请参见此图 我目前正在创建一个红色的，并根据计算的值将其设置为style.width、style.height、style.left和style.top。这种方法似乎很脆弱，因为我总是需要手动处理另一种奇特的变换/动画。例如，我没有考虑旋转或倾斜，如下图所示 有没有办法说我的div应该继承的所有转换，这样无论页面开发人员
（img.width/2，img.height/2）style.widthstyle.heightstyle.leftstyle.top有没有办法说我的
divgetComputedStyle// 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<body> <!-- or whatever the parent is of the whole view -->
<div class="overlay-window">
<div class="image-overlay">
</div>
</div>
</body>
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内容的需要。这应该可以避免旋转的需要，因为它实际上是旋转物体的一部分。我会说，这是一个非常详细的解决方案，但我自己也没有尝试解决它。您是否尝试使用flex或grid指令并覆盖它？也就是说，创建一个覆盖并对其应用no select，然后对整个窗口应用绝对div。在该分区中使用这些指令定位此对象。我添加了自己的非javascript解决方案，因此您不必在javascript中处理旋转。我对HTML/CSS非常陌生，不理解您使用的概念。我的一个高级问题是，它如何知道我指的是页面上的哪个图像？基本上是这样。有些东西在你的屏幕上旋转，你的问题是你在旋转的东西外面放置了一个覆盖层，所以它不会移动。你需要在旋转的物体内部创建覆盖层。这就是我的答案告诉你的方法。否则，在放置覆盖层的方式上不做任何更改，只需将其放在允许覆盖旋转元素的部分中即可。