VPF::Область для выделения части изображения - plug+js?

Killer_13

Дата 14.4.2012, 09:56 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 740
Регистрация: 12.1.2008
Где: Germany

Репутация: нет
Всего: 1

Здравств, вот не знаю с какой стороны подойти...
Есть у меня картинка которую я получаю с сервера,
есть вот такой плагин http://odyniec.net/projects/imgareaselect/,
это все работает, тоисть я выделяю кусочек картинки, данные отправляются на сервер и так д... С этим вопросов нет.
Дело в том, что нужно ограничить область выделения тоисть сделать возможным выделять не всю картинку, а только ее часть
К примеру, я получил картинку а позволить выделять только определенную область, вот наглядней http://dl.dropbox.com/u/26399837/Forums/flower2.jpg

Вот какой у меня код для выделения всей картинки. Использую jQuery.

Код


<head>
<script type="text/javascript" src="./jQuery/jquery-1.7.2.js"></script>
<link rel="stylesheet" type="text/css"
    href="./jQuery/imgareaselect-0.9.8/css/imgareaselect-default.css" />
<script type="text/javascript"
    src="./jQuery/imgareaselect-0.9.8/scripts/jquery.min.js"></script>
<script type="text/javascript"
    src="./jQuery/imgareaselect-0.9.8/scripts/jquery.imgareaselect.pack.js"></script>
<script type="text/javascript">
            $(document).ready(function() {
                $('#target').imgAreaSelect({
                    handles : true,
                    movable : false,
                    resizable : false,
                        autoHide : true,
                    onSelectEnd : function(img, selection)
                        $("#target").attr("src","/JFreeeChartServlet/generateImg?x1=" + selection.x1
                                                                                  + "&y1=" + selection.y1
                                                                                  + "&x2=" + selection.x2
                                                                                  + "&y2=" + selection.y2
                                                                                  + "&width=" + selection.width
                                                                                  + "&height=" + selection.height);    
                    }
                });
            });

        </script>
<title>JFreeChart_Bsp</title>
</head>
<body>
    <img src="/JFreeeChartServlet/generateImg" id="target"
        alt="generateImg" height="750" width="1450" />
</body>

Спасибо!

Aliance

Дата 16.4.2012, 09:56 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 7
Всего: 137

Документация к данному плагину говорит о том, что можно написать следующее:

Код


$('img#photo').imgAreaSelect({
    onSelectEnd: function (img, selection) {
        alert('width: ' + selection.width + '; height: ' + selection.height);
    }
});

Соответственно здесь-то и нужно ограничивать размеры выделения. Я думаю как-то так.

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

Killer_13

Дата 16.4.2012, 18:34 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 740
Регистрация: 12.1.2008
Где: Germany

Репутация: нет
Всего: 1

Это все я уже сделал, мне нужно дургое.
Мне нужно определить такую область на картинке, чтоб только в пределах этой области можно было выделять..
Ситуация такова, что есть график который нужно выделять, а у меня картинка на которой кроме графика еще и легенда и оси и так д..
Спасибо.

Killer_13

Дата 16.4.2012, 19:37 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 740
Регистрация: 12.1.2008
Где: Germany

Репутация: нет
Всего: 1

Вот, пока что статически настроил, но раньше функция брала id="target" и у дива и у картинки, таким образом, все было синхронно, сейчас у меня див над картинкой, и не выделяется, тоисть на нем нельзя произвести выделение. Можно только на определенных участках картинки, что видно из под дива.
Чуток как-то сумбурно получилось, надеюсь кто захочет помочь, поймет

Вопрос в том: как мне выделять див и чтоб при этом происходило обновление и на картинке? ТОисть чтоб функция обрабатывала id="target" и дива и картинки, но выделять можно только див. ..

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <style type="text/css">
            .divName {
                width: 100px;
                height: 700px;
                background: #ccc;
                overflow: hidden;
                position: relative;
                width: 1300px;
                height: 585px;
                margin: -690px 0px 0px 93px;
            }
            .divName img {
                position: absolute;
                top: -60px;
                left: -93px;
            }

        </style>
        <script type="text/javascript" src="./jQuery/jquery-1.7.2.js"></script>
        <link rel="stylesheet" type="text/css"
        href="./jQuery/imgareaselect-0.9.8/css/imgareaselect-default.css" />
        <script type="text/javascript"
        src="./jQuery/imgareaselect-0.9.8/scripts/jquery.min.js"></script>
        <script type="text/javascript"
        src="./jQuery/imgareaselect-0.9.8/scripts/jquery.imgareaselect.pack.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {

                var id = $('#target').imgAreaSelect({
                    handles : true,
                    movable : false,
                    resizable : false,
                    autoHide : true,
                    onSelectEnd : function(img, selection) {
                        console.log("---------------------------");
                        console.log('left corner: ' + 'x1:' + selection.x1 + ', y1:' + selection.y1);
                        console.log('right corner: ' + 'x2:' + selection.x2 + ', y2:' + selection.y2);
                        console.log('width: ' + selection.width + '; height: ' + selection.height);
                        console.log("---------------------------");
                        $("#target").attr("src", "/JFreeeChartServlet/generateImg?x1=" + selection.x1 + "&y1=" + selection.y1 + "&x2=" + selection.x2 + "&y2=" + selection.y2 + "&width=" + selection.width + "&height=" + selection.height);
                    }
                });

            });

        </script>
        <title>JFreeChart_Bsp</title>
    </head>
    <body>
        <img src="/JFreeeChartServlet/generateImg" id="target"
        alt="generateImg" height="750" width="1450" />
        <div class="divName" >
            <img src="/JFreeeChartServlet/generateImg" id="target"
            alt="generateImg" height="750" width="1450" />
        </div>
    </body>
</html>

Aliance

Дата 17.4.2012, 09:13 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 7
Всего: 137

В валидном (x)html документе не может быть двух одинаковых id.

Не понимаю в чем трудность описанного мною решения. Например, у нас есть картинка 100 на 100, а можно в ней выделять все, кроме рамки в 10 пикселей по периметру. Получается смотрим координаты, если они попадают в эту рамку - отменяем выделение/производим алерт/да что угодно.

Или же второй вариант, над картинкой рисуем див с большим z-index, позиционируем его и делаем выделение по нему (если такое позволяет данный плагин, если нет то над прозрачной картинкой растянутой по ширине этого дива). А размеры дива выставляем такие, какие нужно. Как-то так, не?

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

Killer_13

Дата 17.4.2012, 09:26 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 740
Регистрация: 12.1.2008
Где: Germany

Репутация: нет
Всего: 1

Цитата

В валидном (x)html документе не может быть двух одинаковых id.

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

Цитата

Не понимаю в чем трудность описанного мною решения. Например, у нас есть картинка 100 на 100, а можно в ней выделять все, кроме рамки в 10 пикселей по периметру. Получается смотрим координаты, если они попадают в эту рамку - отменяем выделение/производим алерт/да что угодно.

- сейчас поразкину, как это можно сделать

Цитата

Или же второй вариант, над картинкой рисуем див с большим z-index, позиционируем его и делаем выделение по нему (если такое позволяет данный плагин, если нет то над прозрачной картинкой растянутой по ширине этого дива). А размеры дива выставляем такие, какие нужно. Как-то так, не?

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

Aliance

Дата 17.4.2012, 09:30 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 7
Всего: 137

Цитата(Killer_13 @ 17.4.2012, 10:26

)

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

Это если сам плагин был навешен на тег картинки, а если его навесить на тег дива - то не должен. Опять таки я говорю в теории, на практике не работал с данным плагином.

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

Killer_13

Дата 17.4.2012, 10:46 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 740
Регистрация: 12.1.2008
Где: Germany

Репутация: нет
Всего: 1

Цитата

а если его навесить на тег дива - то не должен

- вот это я найти не могу... Тоист не знаю как, не оч силен в этом.. smile

Добавлено через 1 минуту и 41 секунду

Цитата

The callback functions (set with the onInit, onSelectStart, onSelectChange, and onSelectEnd options) are passed two arguments. First argument is a reference to the image that the plugin is attached to, the second is an object representing the current selection. The object has six properties:

- скорее всего не получится...

Killer_13

Дата 17.4.2012, 11:25 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 740
Регистрация: 12.1.2008
Где: Germany

Репутация: нет
Всего: 1

Сделал, но в этом случае приходится обращаться к серверу 2 раза.

Код


<script type="text/javascript">
            $(document).ready(function() {

                var id = $('#target').imgAreaSelect({
                    handles : true,
                    movable : false,
                    resizable : false,
                    autoHide : true,
                    onSelectEnd : function(div, selection) {
                        if((selection.x1>85&&selection.x1<1420)&&(selection.x2>85&&selection.x2<1420)){
                        $("#target").attr("src", "/JFreeeChartServlet/generateImg?x1=" + selection.x1 + "&y1=" + selection.y1 + "&x2=" + selection.x2 + "&y2=" + selection.y2 + "&width=" + selection.width + "&height=" + selection.height);
                        $("#target1").attr("src", "/JFreeeChartServlet/generateImg?x1=" + selection.x1 + "&y1=" + selection.y1 + "&x2=" + selection.x2 + "&y2=" + selection.y2 + "&width=" + selection.width + "&height=" + selection.height);
                        
                        }}
                });
            });

        </script>

<body>
        <img src="/JFreeeChartServlet/generateImg" id="target1"
        alt="generateImg" height="750" width="1450" />
        <div class="divName" >
            <img src="/JFreeeChartServlet/generateImg" id="target"
            alt="generateImg" height="750" width="1450" />
        </div>
    </body>

но в этом случае есть свой прикол, если начинать выделение за границами области, то не позволяет, если же начинать выделение в области, то за границы области позволяет выделять.. :(

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Применение библиотек \| Следующая тема »