ZoomMarker

ZoomMarker — это плагин jQuery, который позволяет масштабировать и перетаскивать изображения с возможностью добавления пометок.

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

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

Предварительный просмотр

Здесь вы можете увидеть пример использования ZoomMarker и EasyLoading для создания анимации перетаскивания, масштабирования, добавления пометок и загрузки изображений. Вы можете добавлять пометки на изображение, нажимая на него мышью или касаясь экрана. При наведении курсора на изображение появляется всплывающее окно с подсказкой. С помощью верхней кнопки можно переключать изображения, очищать пометки и запускать анимацию загрузки.

Здесь вы можете посмотреть пример с разделением области на секции.

Версия

Зависимости

В этом примере также используется открытый исходный код EasyLoading, который является плагином для анимации загрузки и также требует поддержки jQuery. Если вам интересен EasyLoading, добавьте звезду.

Использование

1. Быстрое использование

Включите файлы JavaScript и CSS ZoomMarker:

<link rel="stylesheet" href="css/zoom-marker.css">
<script src="js/zoom-marker.js"></script>

Включите сторонние библиотеки зависимостей:

<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.mousewheel.min.js"></script>
<script src="js/hammer.min.js"></script>

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

<link rel="stylesheet" href="css/easy-loading.css">
<script src="js/easy-loading.js"></script>

Добавьте необходимые HTML-теги. Обратите внимание, что тег img должен содержать уникальный атрибут id.

<div id="zoom-marker-div" class="zoom-marker-div">
    <img class="zoom-marker-img" id="zoom-marker-img" alt="..." name="viewArea"  draggable="false"/>
</div>

Вызовите метод ready() для инициализации:

$(document).ready(function () {
    $('#zoom-marker-img').zoomMarker({
        src: "img/mountain.jpg",
        rate: 0.2,
        width: 600,
        max: 3000,
        markers:[
            {src:"img/marker.svg", x:500, y:500}
            ]
    });
})

В приведённом выше примере вам также необходимо добавить файл mountain.jpg в каталог img/ для отображения изображения и файл marker.svg в каталог img/, который будет использоваться в качестве файла маркера. Эти файлы уже добавлены в соответствующий каталог проекта. Теперь вы можете видеть эффект. Перетаскивайте изображение мышью, используйте колесо прокрутки для увеличения и уменьшения масштаба изображения, и отметки будут перемещаться вместе с изображением.

2. Использование Canvas для рисования

Canvas рисует слой поверх div-тега изображения, позволяя рисовать на нём фигуры. Чтобы использовать функцию Canvas, необходимо вручную настроить enable_canvas на true при инициализации объекта ZoomMarker.

$('#zoom-marker-img').zoomMarker({
    src: "img/mountain.jpg",
    rate: 0.2,
    width: 400,
    max: 3000,
    markers:[
        {src:"img/marker.svg", **offsetX | 对话框X坐标偏移 | 0 | N |**

| offsetY | 对话框Y坐标偏移| 0 | N |

Hint:

Return函数返回对象:

ZoomMarker_RemoveMarker(markerId)

Удаление маркера, передаётся ID маркера, который можно получить из структуры, возвращаемой функцией zoomMarker_AddMarker(marker).

ZoomMarker_CleanMarker()

Очистка всех маркеров.

ZoomMarker_GetPicSize()

Получение реальных размеров загружаемого изображения, возвращает правильные размеры только после загрузки изображения.

Return функции возвращает объект:

ZoomMarker_EnableDrag(enable)

Установка разрешения на перетаскивание изображения.

ZoomMarker_TopIndexZ()

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

ZoomMarker_Canvas()

При инициализации изображения необходимо установить для параметра enable_canvas значение true. Получает контекст Canvas, использует методы рисования Canvas для рисования графики на изображении. Обратите внимание, что координаты чертежа основаны на разрешении изображения.

ZoomMarker_CanvasClean()

Очищает данные чертежа Canvas.

ZoomMarker_ResetImage()

Сбрасывает размер и положение изображения, включая информацию о маркерах и Canvas.

ZoomMarker_ReloadMarkers()

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

Event события

Слушайте события, отправленные ZoomMarker через «on» или «bind».

// Слушаем сообщение о завершении загрузки ресурсов изображения, обновляем ресурсы пользовательского интерфейса.
$('#zoom-marker-img').on("zoom_marker_img_loaded", function(event, size){
    console.log("image has been loaded with size: "+JSON.stringify(size));
    /** Обновление операций UI **/
    ...
});

Size

MarkerObj

MouseObj