jQuery插件imgAreaSelect基础讲解(2)

设置此插件所作用元素的z-index的值,一般情况下,imgAreaSelect 总是可以自动计算出它的值,但是极少数情况下还是有必要设置的。

 

onInit

 

当插件初始化时所调用的函数(详见6、回调函数)

 

onSelectStart

 

当开始选择时所调用的函数(详见6、回调函数)

 

onSelectChange

 

当改变选择区域时所调用的函数(详见6、回调函数)

 

onSelectEnd

 

当选择结束时所调用的函数(详见6、回调函数)

 

5、回调函数

回调函数(当设置onInit, onSelectStart, onSelectChange或 onSelectEnd选项)接收两个参数,第一个选项是这个插件所应用图像的引用,另外一个则是呈现当前选择的对象,这个对象有六个性质。

jQuery插件imgAreaSelect基础讲解

为了便于理解,下面给出当选择完后执行的回调函数的例子:

$('img#photo').imgAreaSelect({ onSelectEnd: function (img, selection) { alert('width: ' + selection.width + '; height: ' + selection.height); } });

6、键盘支持

如果选项"keys"设置为true,那么我们能够通过键盘上的按键进来选择框的移动。下面的键可以使用,默认的功能如下:

jQuery插件imgAreaSelect基础讲解

每个属性通过设置数值(以像素为单位,数值要不小于1),表明当按下此键时移动/改变大小多少像素,或者指定其值为"string"来指定它是"resize"模式。例如:

$('img#example').imgAreaSelect({ keys: { arrows: 15, ctrl: 5, shift: 'resize' } });

这个例子里设置成"方向键会移动选区15像素,按住Ctrl键会移动5像素,而按住Shift键时则切换到resize模式"。

如果不止一个图像,且自己修改了按键设置,那么只对一个图像会应用这个自定义设置。一般来说,当"激活"(用鼠标点击)某个图像时,这个图像就会使用自定义的按键设置。

7、API方法

这个插件也提供了几个API方法扩展它的应用,并能够通过这些API方法跟其他web应用联合起来。

为了使用这些方法,首先需要一个插件对象,可以调用imgAreaSelect()函数并让其选项"instance"设置为true来实现:

var ias = $('#photo').imgAreaSelect({ instance: true });

现在就可以使用此对象来调用公共的方法了。例如,设置一个默认预定义的范围:

ias.setSelection(50, 50, 150, 200, true); ias.setOptions({ show: true }); ias.update();

只要当初始化完成,就可以使用这些API方法了。下面列出这些API方法:

jQuery插件imgAreaSelect基础讲解

jQuery插件imgAreaSelect基础讲解

jQuery插件imgAreaSelect基础讲解

jQuery插件imgAreaSelect基础讲解

二、简单实例

1、宽度或者高度限制

minWidth、minHeight、maxWidth以及maxHeight选项允许你设置选区的范围。在这个例子中,图像的最大范围将限制为200x150px。

$(document).ready(function () { $('#ladybug_ant').imgAreaSelect({ maxWidth: 200, maxHeight: 150, handles: true }); });

2、固定高宽比

配置aspectRatio选项就可以了,这里将其设置成"4:3":

$(document).ready(function () { $('#bee').imgAreaSelect({ aspectRatio: '4:3', handles: true }); });

3、设置初始选项区域

配置x1, y1, x2与 y2选项就可以了:

$(document).ready(function () { $('#duck').imgAreaSelect({ x1: 120, y1: 90, x2: 280, y2: 210 }); });

三、回调函数示例

1、选区预览

在下面的代码小片断里,onSelectChange()回调函数实现了选择区域预览的效果。

官方源代码:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wyxpxf.html