點擊這里跳轉(zhuǎn)至GitHub項目

ZoomMarker

一款用于圖片滾動放大拖動，且可以添加標記的jQuery插件

在項目中需要實現(xiàn)類似地圖應(yīng)用那樣的，具有鼠標滾動縮放和拖動功能的插件效果，且可以添加具有回調(diào)功能的標記點。在網(wǎng)上找了一圈都沒有找到合適的，所以圖方便自己寫了一個。
如有任何功能問題或改進意見，歡迎反饋，感謝。

Preview效果預覽

點擊這里查看使用ZoomMarker和EasyLoading構(gòu)建的圖片拖拽、縮放、標記及加載動畫的示例，使用鼠標或觸屏點擊在圖片上添加標記點，鼠標懸浮在上面查看懸浮提示窗口，使用頂部按鈕實現(xiàn)圖片切換、清空標記點和加載動畫示例等。

Version版本

Require依賴

在本例子中，還使用了自行編寫的開源加載動畫插件EasyLoading，該插件同樣需要jQuery支持。
如果您對EasyLoading感興趣，歡迎加星。

Usages用法

1. 快速使用

引入ZoomMarker的JavaScript和CSS文件

<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()中調(diào)用初始化方法

$(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}
            ]
    });
})

在上述例子中，你還需要在img/目錄下添加一個名為moutain.jpg的文件用于顯示圖片，在img/目錄下添加名為marker.svg的文件作為marker文件資源，我們已經(jīng)在該工程對應(yīng)目錄下添加這兩個文件。
現(xiàn)在你可以看到效果了，單擊鼠標拖動圖片，鼠標滾輪滾動放大縮小圖片，添加的標記也會跟著移動。

[圖片上傳失敗...(image-3ac8ba-1554905883763)]

2. 使用Canvas畫布繪圖

Canvas畫布功能在圖片div標簽上覆蓋一層Canvas繪圖層，可通過該圖層繪制圖形。
為了使用Canvas畫布功能，需要在初始化ZoomMarker對象時手動配置enable_canvas為true。

$('#zoom-marker-img').zoomMarker({
    src: "img/mountain.jpg",
    rate: 0.2,
    width: 400,
    max: 3000,
    markers:[
        {src:"img/marker.svg", x:200, y:200}
    ],
    enable_canvas: true
});

Canvas圖層的大小和圖片的實際像素大小相同。
如下例子在鼠標點擊圖像時，手動繪制一條從[100, 100]坐標出發(fā)，至點擊坐標點結(jié)束的紅線。

item.on("zoom_marker_mouse_click", function(event, position){
    // 畫線
    const context = item.zoomMarker_Canvas();
    if(context !== null) {
        context.strokeStyle = 'red';
        context.moveTo(position.x, position.y);
        context.lineTo(100,100);
        context.stroke();
    }
});

Parameters參數(shù)

初始化時可傳入以下可選參數(shù)。

rate

缺省值0.2
該浮點型參數(shù)決定了圖片滾動放大時的速率，值越大圖片縮放速度越快，范圍{0, 1}。

src

缺省值null，不加載圖片
圖片加載的路徑

width

用于配置圖片加載后的寬度，請不要使用100%之類的相對寬度定位，會影響ZoomMarker的工作。
如果你要使圖片的寬度與父節(jié)點寬度相同，可以使用jQuery的方法獲取父節(jié)點寬度，或直接獲取"zoom-marker-div"標簽的寬度，如：

$("#zoom-marker-img").parent().width();
$("#zoom-marker-div").width();

min

限定圖片縮放的最小寬度，默認最小寬度為300px。

max

限定圖片縮放的最大寬度，默認不做限制。

markers

記錄了標記點的參數(shù)，包含以下幾個參數(shù)。

{
    src: "img/marker.png",   // (required)圖片加載路徑
    x: 500,                  // (required)標記點在圖片中的X坐標
    y: 500,                  // (required)標記點在圖片中的Y坐標
    click: function(object){
        // 點擊回調(diào)方法，object為marker的jQuery對象
    }
}

marker_size

標記點尺寸只能為正方形，通過這個參數(shù)可以配置標記點的大小，你也可以在"zoomMarker_AddMarker"添加標記點方法中通過參數(shù)配置單個標記點的大小。

enable_drag

是否允許當前圖像拖拽

auto_index_z

自動管理圖像和標記點的層級信息，在點擊和拖拽的時候自動將當前圖像和標記點置頂

enable_canvas

添加Canvas繪圖層，因為可能影響性能，默認關(guān)閉

zoom_lock

縮放鎖定，開啟則以圖片中點作為縮放中點，默認關(guān)閉
關(guān)閉狀態(tài)下以鼠標或雙指縮放中心作為圖片放大或縮小的中點

move_limit

拖動鎖邊，開啟則只允許圖片在父容器內(nèi)部拖動

Methods方法

ZoomMarker的方法全都以"zoomMarker_"開頭，直接在你的圖片標簽jQuery對象上使用jQuery插件的方法調(diào)用即可，如清空所有標記點：

    $("#viewArea").zoomMarker_CleanMarker();

zoomMarker_LoadImage(src)

用于加載圖像，src傳入圖片URL或本地路徑。

zoomMarker_Zoom(center, scale)

縮放圖片。

zoomMarker_Move(x, y)

移動圖片位置，笛卡爾坐標系，左上角坐標為(0, 0)。

zoomMarker_AddMarker(marker)

添加標記點并返回添加標記點的相關(guān)參數(shù)，marker的配置參數(shù)如下表所示。
配置中的"x"和"y"參數(shù)均為標記點在圖像中的坐標位置。

(1) dialog

(2) hint

(3) return函數(shù)返回對象

zoomMarker_RemoveMarker(markerId)

刪除標記點，傳入標記點ID，ID可從"zoomMarker_AddMarker(marker)"返回結(jié)構(gòu)體中的"id"項獲取。

zoomMarker_CleanMarker()

清空所有標記點。

zoomMarker_GetPicSize()

獲取加載圖片的真實尺寸，只有當圖片加載結(jié)束的時候才會返回正確的圖片尺寸。

return函數(shù)返回對象

zoomMarker_EnableDrag(enable)

設(shè)置是否允許圖像拖動。

zoomMarker_TopIndexZ()

圖像和對應(yīng)的標記點有層級關(guān)系，通過這個方法將當前圖像和標記點層級置頂。

zoomMarker_Canvas()

需要在初始化圖像時配置enable_canvas參數(shù)為true。
獲取Canvas的上下文context，通過Canvas繪圖方法在圖像上繪制圖形。
需要注意的是，繪圖坐標都是以圖像的分辨率為基準。

zoomMarker_CanvasClean()

清空Canvas的繪圖數(shù)據(jù)。

zoomMarker_ResetImage()

重置圖像尺寸和位置，包括marker和canvas信息。

Event事件

通過"on"或"bind"監(jiān)聽ZoomMarker發(fā)送的事件。

// 監(jiān)聽圖片資源加載結(jié)束消息，更新UI資源。
$('#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