ImgAreaSelect圖片區(qū)域選擇顯示

圖片區(qū)域選擇顯示１、介紹ImgAreaSelectjQueryfashion。輯等。２、根本用法jQueryimgAreaSelectHTML中<img>元素內(nèi)的圖像。代碼如下:<scripttype=“text/javascript“>$(document).ready(function{$(”img#photo”).imgAreaSelect({handles:true,onSelectEnd:someFunction});});</script>假設(shè)在jQueryimg元素，那么這個(gè)插件會(huì)對(duì)里面的元素逐個(gè)應(yīng)用此方法。其實(shí)這個(gè)方法不僅僅應(yīng)用于img元素，它支持任何塊級(jí)元素〔比方有圖像背景的div元素。jQuery插件相像，這個(gè)插件可以在$(document).ready或者$(window).load句柄中初始化。３、選項(xiàng)〔這些選項(xiàng)會(huì)在插件初始化的時(shí)候起效。這些選項(xiàng)包括：選項(xiàng)aspectRatioautoHideclassPrefixdisableenablefadeSpeedhandleshideimageHeightimageWidth

描述長(zhǎng)寬比，以后在選擇時(shí)候就會(huì)維持不變。e.g.“4:3“假設(shè)設(shè)為true，那么在選擇完后區(qū)域會(huì)消逝。Default:false預(yù)先給插件元素的前綴〔詳見(jiàn)下面：５、元素與類〕Default:imgareaselect假設(shè)設(shè)置成true，這個(gè)插件將不起作用〔但是圖像還是可見(jiàn)的〕true，這個(gè)插件又將重起作用假設(shè)設(shè)置成大于零的某個(gè)數(shù)，將“漸隱/漸現(xiàn)“這個(gè)插件Default:true假設(shè)設(shè)置成true，在轉(zhuǎn)變大小的時(shí)候顯示轉(zhuǎn)變框〔就是角點(diǎn)有些小“矩形“〕Default:falsetrue，則隱蔽選擇框圖像的真實(shí)高度〔CSS縮放過(guò)了〕圖像的真實(shí)寬度〔CSS綻放過(guò)了〕instancekeysmaxHeightmaxWidthminHeightminWidthmovableparentpersistentremoveresizableresizeMarginshowx1y1x2y2zIndexonInitonSelectStartonSelectStart

假設(shè)設(shè)為true，imgAreaSelect函數(shù)會(huì)返回一個(gè)對(duì)選擇區(qū)域圖像的一個(gè)引用，API〔詳見(jiàn)８、API方法〕啟用/關(guān)閉鍵盤(pán)支持〔詳見(jiàn)７、鍵盤(pán)支持〕Default:false限制選擇框〔以像素為單位，設(shè)置最大、最小的高度、寬度。設(shè)置是否支持選擇框移動(dòng)Default:true指定此插件默認(rèn)所附加到的父元素Default:body假設(shè)設(shè)置成true，點(diǎn)擊選擇區(qū)域外將開(kāi)頭一個(gè)的選項(xiàng)〔換言之，是否讓用戶只能移動(dòng)/縮放選擇區(qū)域〕Default:falsetrue，則該插件將完全移除打算選擇區(qū)域是否可以轉(zhuǎn)變大小Default:true中選擇區(qū)域?qū)挾瘸^(guò)多少像素時(shí)將啟用“可轉(zhuǎn)變大小“模式true，選擇區(qū)域?qū)⒖梢?jiàn)初始化時(shí)選擇框左上角的坐標(biāo)初始化時(shí)選擇框右下角的坐標(biāo)設(shè)置此插件所作用元素的z-index的值，一般狀況下，imgAreaSelect總是可以自動(dòng)計(jì)算出它的值，但是極少數(shù)狀況下還是有必要設(shè)置的。當(dāng)插件初始化時(shí)所調(diào)用的函數(shù)〔詳見(jiàn)６、回調(diào)函數(shù)〕當(dāng)開(kāi)頭選擇時(shí)所調(diào)用的函數(shù)〔詳見(jiàn)６、回調(diào)函數(shù)〕當(dāng)開(kāi)頭選擇時(shí)所調(diào)用的函數(shù)〔詳見(jiàn)６、回調(diào)函數(shù)〕onSelectChange 當(dāng)轉(zhuǎn)變選擇區(qū)域時(shí)所調(diào)用的函數(shù)〔詳見(jiàn)６、回調(diào)函數(shù)〕onSelectEnd 中選擇完畢時(shí)所調(diào)用的函數(shù)〔詳見(jiàn)６、回調(diào)函數(shù)〕４、樣式表隨著插件發(fā)放的還有三個(gè)樣式表：imgareaselect-default.css–這是默認(rèn)的樣式表,imgareaselect-animated.css–這個(gè)樣式與默認(rèn)的樣式表根本是一樣的，只是它能夠讓選擇區(qū)域邊框變化imgareaselect-deprecated.css–只有你想使用不贊同的選項(xiàng)時(shí)才用這個(gè)樣式表。htmlcssgif圖片，它們是用來(lái)顯示邊框的。５、元素與類此插件通過(guò)創(chuàng)立幾個(gè)div元素來(lái)表示選擇區(qū)域，包括邊框、可調(diào)整手柄以及未選擇的區(qū)域。CSS或者jQuery選擇器來(lái)獲得并操作它們。類名imgareaselect-selectionimgareaselect-border1imgareaselect-border2imgareaselect-border3imgareaselect-border4imgareaselect-handleimgareaselect-outer

指定給的對(duì)象選擇的區(qū)域div組成的可轉(zhuǎn)變大小的調(diào)整手柄〔四個(gè)或者八個(gè)divs，假設(shè)沒(méi)有使能的話，則不顯示〕divs組成其中的前綴其中的前綴“imgareaselect““classPrefix“多項(xiàng)選擇擇框需要分別操作〔比方修改樣式〕的時(shí)候特別有用。下面的對(duì)象示意圖展現(xiàn)了這插件的這些元素如何布置的：６、回調(diào)函數(shù)性質(zhì)描述〔onInit,onSelectStart,onSelectChange或onSelectEnd選項(xiàng)接收兩個(gè)參數(shù)，性質(zhì)描述x1x1y1x2y2widthheight選擇區(qū)域左上角的坐標(biāo)選擇區(qū)域右下角的坐標(biāo)選擇區(qū)域的寬度選擇區(qū)域的高度為了便于理解，下面給出中選擇完后執(zhí)行的回調(diào)函數(shù)的例子：$(”img#photo”).imgAreaSelect({onSelectEnd:function(img,selection){alert(”width:”+selection.width+”;height:”+selection.height);}});７、鍵盤(pán)支持假設(shè)選項(xiàng)“keys“設(shè)置為true,以使用，默認(rèn)的功能如下：按鍵方向鍵Shift+方向鍵Ctrl+方向鍵Ctrl+Shift+方向鍵

動(dòng)作10像素為單位移動(dòng)選區(qū)每次以１像素為單位移動(dòng)選區(qū)10像素為單位擴(kuò)縮選區(qū)1像素為單位擴(kuò)縮選區(qū)固然你也可以自己通過(guò)設(shè)置“keys“這個(gè)選項(xiàng)來(lái)掩蓋默認(rèn)鍵設(shè)置，對(duì)象有下面的屬性：屬性屬性方向鍵ShiftCtrlAlt描述設(shè)置方向鍵的功能設(shè)置Shift鍵的功能Ctrl鍵的功能Alt鍵的功能每個(gè)屬性通過(guò)設(shè)置數(shù)值〔以像素為單位，數(shù)值要不小于１轉(zhuǎn)變大小多少像素，或者指定其值為“string“來(lái)指定它是“resize“模式。例如：$(”img#example”).imgAreaSelect({keys:{arrows:15,ctrl:5,shift:”resize”}});

這個(gè)例子里設(shè)置成“15Ctrl5Shiftresize模式“。一般來(lái)說(shuō)，當(dāng)“激活“〔用鼠標(biāo)點(diǎn)擊〕某個(gè)圖像時(shí)，這個(gè)圖像就會(huì)使用自定義的按鍵設(shè)置。８、API方法APIAPIweb應(yīng)用聯(lián)合起來(lái)。為了使用這些方法，首先需要一個(gè)插件對(duì)象，可以調(diào)用imgAreaSelect函數(shù)并讓其選項(xiàng)“instance“true來(lái)實(shí)現(xiàn)：varias=$(”#photo”).imgAreaSelect({instance:true});現(xiàn)在就可以使用此對(duì)象來(lái)調(diào)用公共的方法了。例如，設(shè)置一個(gè)默認(rèn)預(yù)定義的范圍：ias.setSelection(50,50,150,200,true);ias.setOptions({show:true});ias.update;只要當(dāng)時(shí)始化完成，就可以使用這些APIAPI方法：方法getOptionssetOptionsgetSelectionsetSelectioncancelSelection

描述getOptions－－返回當(dāng)前選項(xiàng)的配置Returns:一個(gè)包含當(dāng)前選項(xiàng)配置的對(duì)象〔一般是JSON對(duì)象〕setOptions(newOptions)－－設(shè)置插件選項(xiàng)參數(shù):newOptions–選項(xiàng)配置對(duì)象〔JSON對(duì)象〕getSelection([noScale])－－獵取當(dāng)前的選區(qū)參數(shù)：noScale(可選)–假設(shè)設(shè)置為真，那么對(duì)于返回的選區(qū)不進(jìn)展縮放操作。返回：選擇區(qū)域里的對(duì)象setSelection(x1,y1,x2,y2,[noScale])－－設(shè)置當(dāng)前選擇區(qū)域參數(shù)：x1–選擇區(qū)域左上角X坐標(biāo)y1–選擇區(qū)域左上角Y坐標(biāo)x2–選擇區(qū)域右下角X坐標(biāo)y2–選擇區(qū)域右下角Y坐標(biāo)noScale(可選)縮放留意：此方法只在插件內(nèi)設(shè)置選擇