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

ZoomMarker

猛戳這裏導航至項目地址。
一款用於圖片滾動放大拖動，且可以添加標記的jQuery插件

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

Preview效果預覽

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

Version版本

version	date	detail
0.0.1	2017.10.25	初始版本，基礎功能
0.0.2	2017.11.3	引入Hammer.js處理鼠標操作
0.0.3	2017.11.8	優化接口API
0.0.4	2017.11.11	修正圖片顯示比例錯誤的問題
0.0.5	2017.11.13	添加圖像居中接口，修復重複初始化問題

Require依賴

name	min-version	detail
jQuery	1.6	JavaScript的DOM操作框架
jquery.mousewheel	1.6	jQuery鼠標滾輪監聽插件
Hammer.js	2.0.4	多點觸控插件
EasyLoading.js	0.1.0	加載動畫庫

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

Usages用法

引入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標籤

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

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

Parameters參數

初始化時可傳入以下可選參數。

param	function	default
rate	縮放速率	0.2
src	圖片資源	null
width	圖片加載寬度	500
min	圖片最小寬度	300
max	圖片最大寬度	null
markers	標記點參數數組	[]
marker_size	默認標記點尺寸	20

rate

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

src

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

width

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

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

min

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

max

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

markers

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

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

marker_size

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

Methods方法

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

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

name	function
zoomMarker_LoadImage(src)	加載圖像
zoomMarker_Zoom(center, scale)	縮放圖片
zoomMarker_Move(x, y)	移動圖片
zoomMarker_AddMarker(marker)	添加標記點
zoomMarker_RemoveMarker(markerId)	刪除標記點
zoomMarker_CleanMarker()	清空標記點
zoomMarker_GetPicSize()	獲取記載圖片尺寸

zoomMarker_LoadImage(src)

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

param	function
src	圖像資源路徑或URL

zoomMarker_Zoom(center, scale)

縮放圖片。

param	function
center	縮放中心點，相對於document的絕對座標
scale	縮放比例，浮點型，如1.5爲縮放到原圖的1.5倍大小

zoomMarker_Move(x, y)

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

param	function
x	圖片左上角的目標縱座標
y	圖片左上角的目標橫座標

zoomMarker_AddMarker(marker)

添加標記點並返回添加標記點的相關參數，marker的配置參數如下表所示。
配置中的”x”和”y”參數均爲標記點在圖像中的座標位置。

param	function	detault	required
x	標記點在圖像中的X座標	null	Y
y	標記點在圖像中的Y座標	null	Y
src	標記點圖標資源	null	Y
size	標記點圖標尺寸	20	N
dialog	懸浮對話框	null	N
hint	標記點內部內容	null	N
click	標記點擊回調	null	N

(1) dialog

param	function	detault	required
value	對話框內容	“”	N
style	CSS樣式	{}	N
offsetX	對話框X座標偏移	0	N
offsetY	對話框Y座標偏移	0	N

(2) hint

param	function	detault	required
value	標記點內容	“”	N
style	CSS樣式	{}	N

(3) return函數返回對象

param	function
id	標記點ID
marker	標記點的jQuery對象
param	用戶傳入的標記點配置參數

zoomMarker_RemoveMarker(markerId)

刪除標記點，傳入標記點ID，ID可從”zoomMarker_AddMarker(marker)”返回結構體中的”id”項獲取。

zoomMarker_CleanMarker()

清空所有標記點。

zoomMarker_GetPicSize()

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

return函數返回對象

param	function
width	圖片寬度
height	圖片高度

Event事件

通過”on”或”bind”監聽ZoomMarker發送的事件。

// 監聽圖片資源加載結束消息，更新UI資源。
$('#zoom-marker-img').on("zoom_marker_img_loaded", function(event, size){
    console.log("image has been loaded with size: "+JSON.stringify(size));
    /** 更新UI操作 **/
    ...
});

name	function	param	detail
zoom_marker_img_load	圖片開始加載	src	圖片資源路徑或URL
zoom_marker_img_loaded	圖片已加載完成	size	圖片尺寸
zoom_marker_click	標記點點擊	markerObj	標記點對象
zoom_marker_mouse_click	圖片點擊	mouseObj	圖片點擊對象

size

param	function
width	圖片寬度
height	圖片高度

markerObj

param	function
id	標記點ID
marker	標記點的jQuery對象
param	用戶傳入的標記點配置參數

mouseObj

param	function
pageX	點擊位置在document中的X座標
pageY	點擊位置在document中的Y座標
x	點擊位置在圖像座標中的X座標
y	點擊位置在圖像座標中的Y座標