实现热区编辑
在画面中定义热区，以显示图文信息或者增加链接，是图形展示常见而且实用的功能点。
本章节通过引入OpenSeadragonSelection插件，JQuery ballon插件，利用OpenSeadragon的事件机制实现热区编辑。
最终效果截图如下：
目标功能
- 点击热区编辑按钮切换到热区编辑状态，再点击该按钮退出编辑状态
- 点击图形区可创建新的热区，或者点击选中已有热区
- 对选中的热区可以进行拖拽方式的编辑，包括位置和大小的调整
- 对选中热区的属性编辑，包括：id、title、content等
- 通过下拉框选择id，切换到该热区所在的帧及局部视图，并选中该热区进行编辑
改进OpenSeadragonSelection支持多帧热区
基本思路：
点击勾选完成编辑时，将正在编辑的热区加入overlays
viewer.addHandler('selection',function(opt) {
var viewer = opt.eventSource;
var sel = viewer.selectionInstance;
sel.getOpt();
var rect = sel.rect;
sel.ballon.hideBalloon();
var page = viewer.currentPage();
var ol = viewer.tileSources[page];
if(!ol.overlays){
ol.overlays=[];
}
var opt_ol = rect.opt;
opt_ol.x=opt.x;
opt_ol.y=opt.y;
opt_ol.width=opt.width;
opt_ol.height=opt.height;
opt_ol.className= 'highlight';
opt_ol.rotation= opt.rotation;
opt_ol.page=page;
opt_ol.bounds=viewer.viewport.getBounds( true );
viewer.addOverlay(opt_ol);
});
点击取消编辑时，将热区从overlays中删除
viewer.addHandler('selection_cancel',function(opt) {
var viewer = opt.eventSource;
var sel = viewer.selectionInstance;
var rect = sel.rect;
sel.ballon.hideBalloon();
jQuery("select#ipt_id option").filter("[value='"+rect.opt.id+"']").remove();
//从overlay删除该獠
if(rect.opt){
var page = viewer.currentPage();
var ol = viewer.tileSources[page].overlays;
for(var x in ol){
if(rect.opt==ol[x]){
ol.splice(x,1);
}
}
}
});
绘制overlays时，增加对点击选中编辑的支持：
viewer.addHandler('add-overlay',function(opt){
var viewer = opt.eventSource;
var sel = viewer.selectionInstance;
var el = opt.element;
//click an overlay
el.onclick=function(event){
if(!event.originalEvent)
return;
var sel = viewer.selectionInstance;
if(sel){
sel.selOpt(this);
}
event.preventDefaultAction=true;
event.stopBubbling = true;
};
el.opt = opt.options;
var pid = el.opt.id;
var exists = 0 != jQuery('#ipt_id option[value='+pid+']').length;
if(!exists){
jQuery("#ipt_id").append("<option value='"+pid+"'>"+pid+"</option>");
}
if(sel.toPid == pid){
sel.selOpt(el);
sel.toPid =null;
}
jQuery(el).css('display','block');
});
return this.selectionInstance;
};
引入ballon实现属性编辑和下拉选中热区
$.extend( $.Selection.prototype, $.ControlDock.prototype, /** @lends OpenSeadragon.Selection.prototype */{
//c4w生成热区唯一id
id:function(){
return this.idPrefix+new Date().getTime().toString(16);
},
//创建下拉选择框
createOpt:function(){
var pid = this.id();
jQuery("#ipt_id").append("<option value='"+pid+"'>"+pid+"</option>");
var opt= {
id: pid,
name:'',
tip:''
};
var viewer = this.viewer;
var page = viewer.currentPage();
var ol = viewer.tileSources[page];
if(!ol.overlays){
ol.overlays = [];
}
ol.overlays.push(opt);
return opt;
},
//选中选项之后设置属性
setOpt:function(){
var opt = this.rect.opt;
jQuery("#ipt_id").val(opt.id);
jQuery("#ipt_name").val(opt.name);
jQuery("#ipt_tip").val(opt.tip);
jQuery("#ipt_content").val(opt.content);
},
//热区编辑获取属性值以更新属性
getOpt:function(){
var opt = this.rect.opt;
opt.tip=jQuery("#ipt_tip").val();
opt.name=jQuery("#ipt_name").val();
opt.content=jQuery("#ipt_content").val();
},
//当下拉选项改变，切换到选中热区所在的帧和视图并选中之。
selOpt:function(ol){
var sel = this;
var opt = ol.opt;
var rect = sel.selectRect(opt.x, opt.y, opt.width, opt.height,opt.rotation);
rect.opt = opt;
sel.viewer.removeOverlay(ol);
sel.draw();
},
选中热区的函数实现：
//c4w
selectRect: function ( x, y, width, height, rotation){
this.endRect();
this.rect = new $.SelectionRect(x, y, width, height, rotation);
this.draw();
this.rectDone = true;
return this.rect;
},
修改后的selection参见附件，ballon代码请自行下载。