支持无级缩放的360展示技术实现之七

实现热区编辑

 在画面中定义热区，以显示图文信息或者增加链接，是图形展示常见而且实用的功能点。

本章节通过引入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代码请自行下载。 

评论

1 楼 qihuayu2008 2019-06-11  

大神可否提供下完整的demo？谢谢