ImgAreaSelect图片区域选择显示

图片区域选择显示１、介绍ImgAreaSelectjQueryfashion。辑等。２、根本用法jQueryimgAreaSelectHTML中<img>元素内的图像。代码如下:<scripttype=“text/javascript“>$(document).ready(function{$(”img#photo”).imgAreaSelect({handles:true,onSelectEnd:someFunction});});</script>假设在jQueryimg元素，那么这个插件会对里面的元素逐个应用此方法。其实这个方法不仅仅应用于img元素，它支持任何块级元素〔比方有图像背景的div元素。jQuery插件相像，这个插件可以在$(document).ready或者$(window).load句柄中初始化。３、选项〔这些选项会在插件初始化的时候起效。这些选项包括：选项aspectRatioautoHideclassPrefixdisableenablefadeSpeedhandleshideimageHeightimageWidth

描述长宽比，以后在选择时候就会维持不变。e.g.“4:3“假设设为true，那么在选择完后区域会消逝。Default:false预先给插件元素的前缀〔详见下面：５、元素与类〕Default:imgareaselect假设设置成true，这个插件将不起作用〔但是图像还是可见的〕true，这个插件又将重起作用假设设置成大于零的某个数，将“渐隐/渐现“这个插件Default:true假设设置成true，在转变大小的时候显示转变框〔就是角点有些小“矩形“〕Default:falsetrue，则隐蔽选择框图像的真实高度〔CSS缩放过了〕图像的真实宽度〔CSS绽放过了〕instancekeysmaxHeightmaxWidthminHeightminWidthmovableparentpersistentremoveresizableresizeMarginshowx1y1x2y2zIndexonInitonSelectStartonSelectStart

假设设为true，imgAreaSelect函数会返回一个对选择区域图像的一个引用，API〔详见８、API方法〕启用/关闭键盘支持〔详见７、键盘支持〕Default:false限制选择框〔以像素为单位，设置最大、最小的高度、宽度。设置是否支持选择框移动Default:true指定此插件默认所附加到的父元素Default:body假设设置成true，点击选择区域外将开头一个的选项〔换言之，是否让用户只能移动/缩放选择区域〕Default:falsetrue，则该插件将完全移除打算选择区域是否可以转变大小Default:true中选择区域宽度超过多少像素时将启用“可转变大小“模式true，选择区域将可见初始化时选择框左上角的坐标初始化时选择框右下角的坐标设置此插件所作用元素的z-index的值，一般状况下，imgAreaSelect总是可以自动计算出它的值，但是极少数状况下还是有必要设置的。当插件初始化时所调用的函数〔详见６、回调函数〕当开头选择时所调用的函数〔详见６、回调函数〕当开头选择时所调用的函数〔详见６、回调函数〕onSelectChange 当转变选择区域时所调用的函数〔详见６、回调函数〕onSelectEnd 中选择完毕时所调用的函数〔详见６、回调函数〕４、样式表随着插件发放的还有三个样式表：imgareaselect-default.css–这是默认的样式表,imgareaselect-animated.css–这个样式与默认的样式表根本是一样的，只是它能够让选择区域边框变化imgareaselect-deprecated.css–只有你想使用不赞同的选项时才用这个样式表。htmlcssgif图片，它们是用来显示边框的。５、元素与类此插件通过创立几个div元素来表示选择区域，包括边框、可调整手柄以及未选择的区域。CSS或者jQuery选择器来获得并操作它们。类名imgareaselect-selectionimgareaselect-border1imgareaselect-border2imgareaselect-border3imgareaselect-border4imgareaselect-handleimgareaselect-outer

指定给的对象选择的区域div组成的可转变大小的调整手柄〔四个或者八个divs，假设没有使能的话，则不显示〕divs组成其中的前缀其中的前缀“imgareaselect““classPrefix“多项选择择框需要分别操作〔比方修改样式〕的时候特别有用。下面的对象示意图展现了这插件的这些元素如何布置的：６、回调函数性质描述〔onInit,onSelectStart,onSelectChange或onSelectEnd选项接收两个参数，性质描述x1x1y1x2y2widthheight选择区域左上角的坐标选择区域右下角的坐标选择区域的宽度选择区域的高度为了便于理解，下面给出中选择完后执行的回调函数的例子：$(”img#photo”).imgAreaSelect({onSelectEnd:function(img,selection){alert(”width:”+selection.width+”;height:”+selection.height);}});７、键盘支持假设选项“keys“设置为true,以使用，默认的功能如下：按键方向键Shift+方向键Ctrl+方向键Ctrl+Shift+方向键

动作10像素为单位移动选区每次以１像素为单位移动选区10像素为单位扩缩选区1像素为单位扩缩选区固然你也可以自己通过设置“keys“这个选项来掩盖默认键设置，对象有下面的属性：属性属性方向键ShiftCtrlAlt描述设置方向键的功能设置Shift键的功能Ctrl键的功能Alt键的功能每个属性通过设置数值〔以像素为单位，数值要不小于１转变大小多少像素，或者指定其值为“string“来指定它是“resize“模式。例如：$(”img#example”).imgAreaSelect({keys:{arrows:15,ctrl:5,shift:”resize”}});

这个例子里设置成“15Ctrl5Shiftresize模式“。一般来说，当“激活“〔用鼠标点击〕某个图像时，这个图像就会使用自定义的按键设置。８、API方法APIAPIweb应用联合起来。为了使用这些方法，首先需要一个插件对象，可以调用imgAreaSelect函数并让其选项“instance“true来实现：varias=$(”#photo”).imgAreaSelect({instance:true});现在就可以使用此对象来调用公共的方法了。例如，设置一个默认预定义的范围：ias.setSelection(50,50,150,200,true);ias.setOptions({show:true});ias.update;只要当时始化完成，就可以使用这些APIAPI方法：方法getOptionssetOptionsgetSelectionsetSelectioncancelSelection

描述getOptions－－返回当前选项的配置Returns:一个包含当前选项配置的对象〔一般是JSON对象〕setOptions(newOptions)－－设置插件选项参数:newOptions–选项配置对象〔JSON对象〕getSelection([noScale])－－猎取当前的选区参数：noScale(可选)–假设设置为真，那么对于返回的选区不进展缩放操作。返回：选择区域里的对象setSelection(x1,y1,x2,y2,[noScale])－－设置当前选择区域参数：x1–选择区域左上角X坐标y1–选择区域左上角Y坐标x2–选择区域右下角X坐标y2–选择区域右下角Y坐标noScale(可选)缩放留意：此方法只在插件内设置选择