點(diǎn)擊這里跳轉(zhuǎn)至GitHub項(xiàng)目

ZoomMarker

一款用于圖片滾動放大拖動洞渤，且可以添加標(biāo)記的jQuery插件

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

Preview效果預(yù)覽

點(diǎn)擊這里查看使用ZoomMarker和EasyLoading構(gòu)建的圖片拖拽、縮放浇揩、標(biāo)記及加載動畫的示例仪壮，使用鼠標(biāo)或觸屏點(diǎn)擊在圖片上添加標(biāo)記點(diǎn)，鼠標(biāo)懸浮在上面查看懸浮提示窗口胳徽，使用頂部按鈕實(shí)現(xiàn)圖片切換积锅、清空標(biāo)記點(diǎ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插件，它也可以單獨(dú)使用谅猾。如果您的項(xiàng)目中不需要使用加載動畫柄慰，則不需要
引入該插件。

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

添加必要的html標(biāo)簽税娜，注意img標(biāo)簽必須包含唯一的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)在你可以看到效果了属韧，單擊鼠標(biāo)拖動圖片，鼠標(biāo)滾輪滾動放大縮小圖片，添加的標(biāo)記也會跟著移動栗恩。

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

2. 使用Canvas畫布繪圖

Canvas畫布功能在圖片div標(biāo)簽上覆蓋一層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圖層的大小和圖片的實(shí)際像素大小相同。
如下例子在鼠標(biāo)點(diǎn)擊圖像時柳恐，手動繪制一條從[100, 100]坐標(biāo)出發(fā)伐脖，至點(diǎn)擊坐標(biāo)點(diǎn)結(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
該浮點(diǎn)型參數(shù)決定了圖片滾動放大時的速率晓殊，值越大圖片縮放速度越快断凶，范圍{0, 1}伤提。

src

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

width

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

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

min

限定圖片縮放的最小寬度窗价，默認(rèn)最小寬度為300px如庭。

max

限定圖片縮放的最大寬度，默認(rèn)不做限制撼港。

markers

記錄了標(biāo)記點(diǎn)的參數(shù)坪它，包含以下幾個參數(shù)。

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

marker_size

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

enable_drag

是否允許當(dāng)前圖像拖拽

auto_index_z

自動管理圖像和標(biāo)記點(diǎn)的層級信息开瞭，在點(diǎn)擊和拖拽的時候自動將當(dāng)前圖像和標(biāo)記點(diǎn)置頂

enable_canvas

添加Canvas繪圖層，因?yàn)榭赡苡绊懶阅苷窒ⅲJ(rèn)關(guān)閉

zoom_lock

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

move_limit

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

Methods方法

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

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

zoomMarker_LoadImage(src)

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

zoomMarker_Zoom(center, scale)

縮放圖片恐锣。

zoomMarker_Move(x, y)

移動圖片位置，笛卡爾坐標(biāo)系响牛，左上角坐標(biāo)為(0, 0)玷禽。

zoomMarker_AddMarker(marker)

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

(1) dialog

(2) hint

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

zoomMarker_RemoveMarker(markerId)

刪除標(biāo)記點(diǎn)，傳入標(biāo)記點(diǎn)ID贬丛，ID可從"zoomMarker_AddMarker(marker)"返回結(jié)構(gòu)體中的"id"項(xiàng)獲取撩银。

zoomMarker_CleanMarker()

清空所有標(biāo)記點(diǎn)。

zoomMarker_GetPicSize()

獲取加載圖片的真實(shí)尺寸豺憔，只有當(dāng)圖片加載結(jié)束的時候才會返回正確的圖片尺寸额获。

return函數(shù)返回對象

zoomMarker_EnableDrag(enable)

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

zoomMarker_TopIndexZ()

圖像和對應(yīng)的標(biāo)記點(diǎn)有層級關(guān)系恭应，通過這個方法將當(dāng)前圖像和標(biāo)記點(diǎn)層級置頂抄邀。

zoomMarker_Canvas()

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

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