Как нарисовать прямоугольник на сайте, чтобы выделить? - PullRequest
Новая
       1

Как нарисовать прямоугольник на сайте, чтобы выделить?

7 голосов
/ 08 июля 2011

Есть ли способ реализовать обратную связь Google, например, функцию , как показано здесь ?Мы можем сделать сайт слегка затемненным с помощью CSS, но как мы можем нарисовать прямоугольник на этом конкретном интерфейсе, как выделение текста или ошибки.Мы можем использовать ту же концепцию, что и спрайт корова, которая использовалась для выделения прямоугольника на определенном изображении ссылка .Любые идеи и источники приветствуются.

Спасибо

Ответы [ 5 ]

7 голосов
/ 08 июля 2011

Самый простой способ сделать это, возможно, просто создать div, который создается при перетаскивании мыши по странице.

Я подозреваю, что Google делает это, используя что-то вроде этого:

  • Нарисуйте слегка затемненный div («диммер») поверх всей страницы

  • Когда пользователь нажимает и перетаскивает диммер, он разделяет его на несколько элементов div следующим образом:

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

  • В приведенном выше примере центральная область - это область, которую пользователь перетаскивал по

  • Центральная область теперь пуста, и вы можете видетьсайт через него, потому что диммер был разделен на 8 меньших делителей.
  • Пока пользователь удерживает кнопку мыши нажатой, сценарий продолжает изменять размеры делителей делителя, чтобы вместить прямоугольную область, которую перетащил пользователь.

(в нем также могут отсутствовать дополнительные элементы деления, которые я включил в диаграмму, так что у него есть только один элемент сверху и один элемент снизу - прямоугольник, поскольку он будет работать и без них)

1 голос
/ 20 июля 2011

Я недавно задал себе этот вопрос, и, глядя на него через отладчик Chrome, оказалось, что они используют некоторые более продвинутые методы, чем просто разделение экрана на выделенные и невыделенные области.

Первое, на что нужно обратить внимание, - это то, что Google использует 5 фреймов для создания системы обратной связи.

google-feedback-mask-frame : Используется только для маски, она покрывает весь экран. Я не уверен, почему они решили использовать для этого целый iframe. Но это делается для того, чтобы вы не нажимали ссылки на страницы в режиме обратной связи

google-feedback-screenshot-frame Я подозреваю, что именно здесь происходит настоящее волшебство. Он содержит копию просматриваемой страницы, но с некоторыми проприетарными тегами HTML (<gft></gft>), чтобы скрипт мог знать, где находится контент, который можно выделить (изображения, текст, ссылки и т. Д.)

google-feedback-feedback-frame : Здесь находятся элементы управления для выделенных областей, а также кнопка X для всего виджета.

Чтобы реализовать эффект, Google на самом деле использует несколько разделов, как предлагает @Jani Hartikainen. На скриншоте ниже вы можете видеть, что, когда у вас есть несколько вариантов выбора, нужно создать довольно много div, чтобы приспособиться к эффекту.

enter image description here

Я уверен, что есть очень сложный алгоритм для определения того, куда делись все div, но это то, что делает разработчика ПО забавным, верно ??

google-feedback-proxy-frame : имеет элементы управления, которые вы видите внизу справа.

google-feedback-render-frame : Это немного более таинственное, все, что в нем содержится, это скрипт render_frame.js, который явно запутан и неразборчив.

В заключение, использование разделов - это то же самое, что и в Google, но есть гораздо больше волшебства, которое позволяет им автоматически выделять ссылки и изображения. Если вы узнаете больше, мне тоже интересно, дайте мне знать!

1 голос
/ 13 июля 2011

Пример кода, работающий на всех браузерах, просто нарисуйте прямоугольник с помощью щелчка мыши, но выделите немного бликов в хроме, не нашли решения: -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>
0 голосов
/ 16 июля 2011

У jQuery Tools есть симпатичный маленький инструмент под названием "Expose" , я использовал его несколько месяцев назад, и он отлично работал для меня ... простой, расширяемый, и он просто работает.

0 голосов
/ 15 июля 2011

Вы также можете сделать это с элементом Canvas.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...