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

【问题标题】：How to draw rectangle on the website to highlight?如何在网站上绘制矩形以突出显示？
【发布时间】：2011-10-01 03:54:14
【问题描述】：

有没有办法实现类似功能as shown here 的 Google 反馈？我们可以使用 CSS 使网站稍微变黑，但我们如何在特定界面上绘制一个矩形，例如突出显示某些文本或错误。我们可以使用与 sprite cow 相同的概念，用于突出显示特定图像 link 上的矩形。欢迎任何想法和来源。

谢谢

【问题讨论】：

您只是想创建效果还是想模仿一些底层功能？如果您在 chrome 调试器中查看它，很明显下面使用了一个非常复杂的系统。

标签： php javascript html css

【解决方案1】：

执行此操作的最直接方法可能是只创建一个在您将鼠标拖到页面上时创建的 div。

我怀疑 Google 是这样使用的：

在整个页面的顶部绘制一个稍微变暗的 div（“dimmer”）
当用户点击并拖动调光器时，他们将其拆分为多个 div，如下所示：
```
### | ## | ###
----+----+----
### |    | ###
----+----+----
### | ## | ###
```
在上面，中心区域是用户拖动的区域
中心区域现在是空的，您可以通过它看到站点，因为调光器被分成了 8 个较小的 div。
当用户按住鼠标按钮时，脚本会不断调整分割的调光器 div 的大小以适应用户拖动的矩形区域。

（它也可能会省略我在图表中包含的额外 div，因此它只有上面一个 div，下面一个 div，矩形，因为它也可以在没有它们的情况下工作）

【讨论】：

:-D，优秀的逻辑。谢谢。
但问题是......你如何拍摄快照？
@TheBrain 虽然不熟悉 google 是如何做到的，但最简单的方法是在页面上提供某种管理视图。然后，当在页面上时，脚本用于在用户绘制矩形的位置呈现矩形。或者，他们可能会使用某些服务器端工具对页面进行快照。我看到了一些可用的命令行工具，但遗憾的是忘记了名字。 @A.P.S 如果您对它感到满意，您应该接受答案。如果没有，请说明您是否真的想要其他东西:)
其实如果我们使用任何缩略图api来获取绘制矩形后的整个过程的快照，会很好。但是所有的 API 都会在内存中渲染 html 并设置服务器端快照而不是客户端。这是主要问题。我已经在网页上发布了绘制矩形的代码，但它非常基本，尝试对其进行快照，看看以下矩形是否出现在图片中。谢谢;-D
@A.P.S 您发布的示例似乎有效。如果您存储矩形的绝对 X/Y/宽度/高度详细信息，您应该能够首先将服务器端的页面渲染到图像，然后在图像上渲染矩形（例如使用 GD 或 Imagick 功能PHP)

【解决方案2】：

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

首先要注意的是，谷歌使用 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 的脚本，它显然被混淆了，难以辨认。

总之，使用部分是 google 的方式，但还有更多的魔力可以让他们自动突出显示链接和图像。如果您发现更多我也很感兴趣，请告诉我！

【讨论】：

【解决方案3】：

适用于所有浏览器的示例代码，只需单击鼠标绘制矩形，但在 chrome 中提供一些突出显示，没有找到任何解决方案：-C....

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Draw on Web</title>
<style type="text/css">
.square {
        border: 3px solid #FF0000;
        position: absolute;
}
.black_overlay{
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: black;
            z-index:1001;
            -moz-opacity: 0.1;
            opacity:.10;
            filter: alpha(opacity=10);
        }
.white_content {
            display: none;
            position: absolute;
            top: 25%;
            left: 25%;
            width: 50%;
            height: 50%;
            padding: 16px;
            border: 16px solid orange;
            background-color: white;
            z-index:1002;
            overflow: auto;
        }
</style>
<script type="text/JavaScript">
    var d;
    var posx;
    var posy;
    var initx=false;
    var inity=false
    function getMouse(obj,e){
        posx=0;
        posy=0;
        var ev=(!e)?window.event:e;//Moz:IE
        if (ev.pageX){//Moz
            posx=ev.pageX+window.pageXOffset;
            posy=ev.pageY+window.pageYOffset;
        }
        else if(ev.clientX){//IE
            posx=ev.clientX+document.body.scrollLeft;
            posy=ev.clientY+document.body.scrollTop;
        }
        else{
            return false
        }//old browsers
        obj.onmousedown=function(){
            initx=posx; inity=posy;
            d = document.createElement('div');
            d.className='square'
            d.style.left=initx+'px';d.style.top=inity+'px';
            //d.style.background='#434343';
            document.getElementsByTagName('body')[0].appendChild(d)
        }
        obj.onmouseup=function(){initx=false;inity=false;}
            if(initx){
            d.style.width=Math.abs(posx-initx)+'px';d.style.height=Math.abs(posy-inity)+'px';
            d.style.left=posx-initx<0?posx+'px':initx+'px';
            d.style.top=posy-inity<0?posy+'px':inity+'px';
        }
    }

    document.onmousemove=function(event){
    getMouse(document,event);
    }
</script>
</head>
<body>
<FORM METHOD=POST ACTION="mailto:someone@$nailmail.com" ENCTYPE="text/plain">
<table border=0 cellspacing=0 cellpadding=2>
<tr>
<td colspan=2>
<font size=2 face="arial" color="#000000">
<INPUT type="text" name=URL size=17 value="http://"> :Your URL<BR>
<INPUT type="text" name=user size=17> :Your Username<BR>
<INPUT type="text" name=email size=17> :Your E-mail
</font>
</td>
</tr>
<tr>
<td>
<font size=1 face="arial" color="#000000">
<INPUT name=subscribe type=radio value="yes" CHECKED> subscribe<BR>
<INPUT name=subscribe type=radio value="no"> unsubscribe<BR>
</font>
</td>
<td>
<SELECT name="choices" size=1>
<OPTION selected> OPTIONS
<OPTION> OPTION 1
<OPTION> OPTION 2
<OPTION> OPTION 3
<OPTION> OPTION 4
<OPTION> OPTION 5
</SELECT>
</td>
</tr>
<tr>
<td colspan=2>
<font size=1 face="arial" color="#000000">
<INPUT type=checkbox name="html" value="sendme" CHECKED>
i can recive email as html<BR>
<INPUT type=checkbox name="receipt" value="sendme">
send me a recipt for this email<BR>
</font>
<TEXTAREA cols=20 rows=10>
Hey !
what do you think of the form?

cool huh?
</TEXTAREA><br>
<center>
<INPUT NAME="redirect" TYPE="hidden" VALUE="index.html">
<INPUT NAME="NEXT_URL" TYPE="hidden" VALUE="index.html">
<INPUT type=submit value=Send>
<INPUT type=reset value="Clear">
</center>
</td></tr></table>
</FORM>
&nbsp;
</body>
</html>

【讨论】：

【解决方案4】：

您也可以使用 Canvas 元素执行此操作。

【讨论】：

谢谢，我已经使用 Canvas 和 JavaScript 实现了它。从各种链接获得帮助。 thinkvitamin.com/code/how-to-draw-with-html-5-canvas 和 diveintohtml5.org/canvas.html 和 developer.mozilla.org/Special:Tags?tag=Canvas+tutorial 。只需使用code.google.com/chrome/chromeframe 为 IE 做这件事。 :-P
在 IE 上你可以使用 SVG，我认为有一个库可以将画布转换为 SVG，我记得曾经使用过类似的东西。不过，您必须寻找它，因为我找不到它。

【解决方案5】：

jQuery Tools 有一个不错的小工具，叫做"Expose"，几个月前我用过它，它对我来说非常有用……简单、可扩展，而且非常有效。

【讨论】：