4

我正在尝试使用 CSS 3D 转换使我的背景图像更加生动，这个想法是采用众所周知的“登录页面全屏背景图像，带有带有屏幕截图的笔记本电脑（在咖啡店中）”并使其更具动态性：只是一个屏幕截图，放置一个带有实际实时 HTML 页面的 iframe，并使其完全适合背景图像中的拍摄项目（例如笔记本电脑屏幕）。

这有两个挑战：

  1. 仅根据屏幕尺寸计算背景图像中点位置的能力
  2. 能够进行与背景图像中的笔记本电脑屏幕相匹配的 3D 旋转

背景图片截图

这是背景定义的方式：

.splash {
  text-align: center;
  background-position: 50% 20%;
  background-size: cover;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: url(/assets/themes/twitter/bootstrap/img/scala_tutorials_screenshot2.jpg);
}

背景图片尺寸为：1280 X 850

我设法以某种方式克服了其中一些要求，但以一种非常暴力的方式，

  • 固定百分比的左侧位置有效，可能是因为它的宽度大于它的高度
  • 顶部位置是最难的：我测量了从笔记本电脑屏幕顶部到浏览器窗口顶部边缘的距离（它是绝对的“顶部”值）并记录了屏幕的宽度和高度。并附带一个 2 变量公式（使用 excel、线性回归趋势线和一些基本数学）

公式代码：

 var w = window.innerWidth;
 var h =  window.innerHeight;
 var a = 0.0000146552*h - 0.0245612;
 var b = 0.177328 * h + 9.0294;
 console.log("formula: " + a + " * w + " + b);
 var top =  Math.round(a * w +  b);
 vidEl.style.top = top + "px";
 vidEl.style.height = Math.round((vidEl.offsetWidth / 1.438689132444542)) + "px";

但是，此解决方案存在多个问题

  1. 它不适用于所有屏幕分辨率，背景的缩放比例与某些分辨率不同，（尤其是在 4:3 比例下）背景不会像公式预期的那样增长/缩小
  2. 如果假设我有一个不同的屏幕截图，那么再次执行此操作真的很乏味，解决方案真的不通用
  3. 即使我知道图像中笔记本电脑屏幕的 4 个点的确切坐标，我也无法在 CSS 中简单地在其上放置一个 div，我必须尝试使用rotateX​​ ,rotateY和rotateZ(and perspective-origin) 才能匹配，并且匹配不准确
  4. 由于一些透视起源的怪癖，我需要补偿更大的屏幕，这会导致一些丑陋的代码，如下所示：

调整黑客（是的，我知道它很丑，并且可能可以减少它/以某种方式与上述公式合并）

   if(w >= 1200) {
      if(w < 1400) {
        element.style.top = "-10px";
      } else if (w < 1600) {
        element.style.top = "-13px";
      } else if (w < 1700) {
        element.style.top = "-15px";
      } else if (w < 1800) {
        element.style.top = "-17px";
      } else {
        element.style.top = "-19px";
      } 
    } else {
      element.className = "";
    }

示例： 您可以看到我到目前为止所做的 需要屏幕宽度超过 1200 像素

问题：

  1. 有没有办法有一个通用公式，即对于背景图像中的任何给定原始位置（例如屏幕角的 4 个点），给定背景图像的原始大小、background-position定义、屏幕宽度和高度来找到新的坐标匹配背景图片？

  2. 我不想对rotateXY 和 Z 进行猜测，而是能够自动计算 X、Y 和 Z 旋转值，这将旋转 DIV 以准确覆盖给定的一组 4 个 2D 坐标（例如笔记本电脑屏幕）

4

1 回答 1

3

我很遗憾看到这个问题还没有任何答案。我喜欢你正在尝试做的事情。我认为我可以告诉您的内容不足以成为答案，但是对于评论来说太大了，希望能让您滚动。

首先，我认为如果你能给出原始图像中四个顶点的点（除了原始图像大小），你的数学运算会容易得多。因为这样你就可以很容易地根据它们在原始图像中的百分比来确定新点的位置，例如

xNew = xOld / originalImageWidth * newImageWidth;
yNew = yOld / originalImageHeight * newImageHeight;

我看到您目前正在将尽可能多的信息放在 .css 文件中。您可以将图像路径和四个原始点保存在某个元素的 data- 属性中吗？这将让您计算新点。除此之外，也许作弊并将它们作为查询字符串添加到 url。

您的下一个问题是调整图像的角度。我不认为它是 3D 变换 - 它应该更简单地是沿 x 轴的 2D 倾斜。查看用于矩阵变换的倾斜矩阵算法。您可以计算从一组点到另一组点的比例，这应该可以很容易地计算倾斜角度，保持图像的左下角固定，右上角作为要求解的变量。您可以将其作为 css 转换传递，这应该为您提供所需的所有基础知识。

您还可以检查Projective transformation。这不是您需要的答案 - 它需要一个倾斜的角度并将其变成一个矩形 - 但由于您需要相反的功能，这可能会给您一些想法。

再次抱歉，这不是一个完整的答案，但它可能会让你朝着正确的方向前进。我可以尝试与您讨论任何没有意义的问题。

祝你好运！

于 2013-08-19T21:53:27.117 回答