如何在网站上绘制矩形以突出显示？

Question

有没有办法实现Google反馈功能,如此处所示？我们可以使用CSS使网站略微变黑,但是如何在特定界面上绘制矩形,如突出显示某些文本或错误.我们可以使用像精灵牛一样的概念,用于突出特定图像链接上的矩形.任何想法和来源都受到欢迎.

谢谢

Answer 1

最直接的方法是,可能只需要在页面上拖动鼠标时创建一个div.

我怀疑谷歌使用这样的东西:

• 在整个页面的顶部画一个略微暗淡的div("调光器")

• 当用户点击并拖动调光器时,他们将它分成多个div,如下所示:

  ### | ## | ###
  ----+----+----
  ### |    | ###
  ----+----+----
  ### | ## | ###
  

• 在上文中,中心区域是用户拖动的区域

• 中心区域现在是空的,您可以通过它看到该站点,因为调光器被分成8个较小的div.
• 当用户按住鼠标按钮时,脚本会继续调整分割调光器div的大小以适应用户拖动的矩形区域.

(它也可能省略了我在图中包含的额外div,因此它只有一个div,下面有一个div,矩形,因为它可以在没有它们的情况下工作)

Answer 2

我最近问自己这个问题，当通过 chrome 调试器查看它时，他们似乎使用了一些比仅仅将屏幕划分为突出显示和未突出显示区域更先进的技术。

首先要注意的是，Google 使用 5 个 iframe 来实现他们的反馈系统。

google-feedback-mask-frame ：这仅用于遮罩，它覆盖整个屏幕。我不知道他们为什么选择使用整个 iframe 来实现这一点。但它的目的是确保您不会在反馈模式下单击任何页面链接

google-feedback-screenshot-frame ：我怀疑这就是真正的魔法发生的地方。它包含您正在查看的页面的副本，但带有一些专有的 HTML 标签 ( <gft></gft>)，让脚本知道可突出显示的内容（图像、文本、链接等）在哪里。

google-feedback-feedback-frame ：它包含突出显示区域的控件以及整个小部件的 X 按钮。

为了实现这种效果，谷歌实际上确实使用了一堆像 @Jani Hartikainen 建议的部分。在下面的屏幕截图中，您可以看到，当您有多个选择时，需要创建相当多的 div 来适应效果。

我确信有一个非常复杂的算法来确定所有 div 的去向，但这就是软件开发的乐趣，对吗？

google-feedback-proxy-frame ：具有您在右下角看到的控件。

google-feedback-render-frame ：这个有点神秘，它只包含一个名为 render_frame.js 的脚本，该脚本显然是混淆且难以辨认的。

总之，使用部分是谷歌的做法，但还有更多的魔力可以让他们自动突出显示链接和图像。如果您了解更多信息，我也很感兴趣，请告诉我！