`

支持无级缩放的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代码请自行下载。 

  • 大小: 395.4 KB
分享到:
评论
1 楼 qihuayu2008 2019-06-11  
大神可否提供下完整的demo?谢谢

相关推荐

    360安全浏览器-网页无级缩放和网页自动填表.docx

    360安全浏览器则突破了这一限制,实现了网页的无级缩放,允许用户更加灵活地调整网页的视图大小。 实现网页无级缩放的方法多样。首先,用户在浏览网页时,可以按住Ctrl键,同时滚动鼠标滚轮,这样就能便捷地放大或...

    VB文本框文本字体的无级缩放源代码.rar

    在开发过程中,有时我们需要实现文本框中的文本字体的缩放功能,以便根据用户需求调整字体大小。"VB文本框文本字体的无级缩放源代码.rar"提供的压缩包就是这样一个示例,它演示了如何动态改变文本框内文本的字体大小...

    图像缩放算法研究及其FPGA实现.pdf

    图像缩放是图像处理的核心技术之一,用于调整图像的大小,适应不同的显示需求。随着多媒体技术和集成电路的进步,硬件实现图像的无级缩放已经成为研究的重点。无级缩放指的是能够平滑地改变图像尺寸,而不会产生明显...

    商品展示 360度全景图-HTML5 Canvas 实现

    本项目基于HTML5的Canvas技术,实现了商品的360度全方位展示,适用于Chrome、Firefox以及IE9及以上的浏览器。 HTML5是现代网页开发的标准,它引入了许多新的API和元素,Canvas就是其中之一。Canvas是一个二维绘图上...

    VB实现文本框文本字体的无级缩放

    内容索引:VB源码,字符处理,文本缩放,文本框 VB实现文本框文本字体的无级缩放,单击一次“字放大”则字体大小增加2磅,单击一次“字缩斜则字体大小缩小2磅,也可复原文本,可了解一些VB理论基础,教师可借此来引导...

    76.(leaflet篇)leaflet地图无级别缩放(移动端).zip

    本文将深入探讨Leaflet地图在移动端实现无级别缩放的技术细节及其优势。 首先,Leaflet地图的核心特性之一就是其优秀的性能和对各种屏幕尺寸的支持,这使得它成为移动应用的理想选择。在移动设备上,用户可能需要...

    基于自适应插值算法的视频图像缩放技术及其FPGA实现.pdf

    总体而言,基于自适应插值算法的视频图像缩放技术及其在FPGA上的实现,展示了如何结合先进的图像处理算法和高性能硬件平台,来达到实时图像处理的高效性和精确性。这对于实时视频监控、高清视频播放、远程医疗影像...

    易语言实现图片快速缩放和无损缩放源码

    "易语言实现图片快速缩放和无损缩放源码"是一个专为开发者提供的资源,旨在帮助他们利用易语言进行高效的图像缩放操作。易语言是一种中文编程语言,其目标是降低编程的难度,让更多的人能够参与到软件开发中来。 ...

    99%CSS3+1%JS实现缩放图片展示特效.rar

    在"99%CSS3+1%JS实现缩放图片展示特效"的项目中,开发者很可能是利用了上述技术的组合,创造出一种平滑且引人注目的图片展示方式。通过阅读同名博客,你可以更深入地了解每个步骤和具体实现细节,从而学习并应用到...

    Qt 图片缩放,支持滚轮和按键缩放

    通过以上技术,我们可以构建出一个功能完备的图片查看器,不仅支持滚轮和按键的缩放,还能方便地切换不同图片。在实际开发中,可能还需要考虑性能优化,例如,对于大图的高效显示和内存管理,以及用户界面的友好设计...

    Qt实现窗体缩放

    在本文中,我们将深入探讨如何使用Qt框架来实现窗体的动态缩放功能。Qt是一个强大的C++库,用于创建跨平台的图形用户界面(GUI)应用。它提供了丰富的API和工具,使得开发者能够轻松地设计和实现各种复杂的UI功能,...

    MATLAB图像缩放,matlab实现图像缩放,matlab

    `imresize`函数还支持多种插值方法,影响缩放后的图像质量。默认情况下,MATLAB使用最近邻插值,这是一种快速但可能导致像素化的方法。为了获得更好的视觉效果,可以选择双线性、三次样条(bicubic spline)或最近...

    Qt 实现无边框窗口,支持缩放窗口大小

    在Qt框架中,创建一个无边框窗口并支持自定义缩放窗口大小是常见的需求,尤其是在设计具有现代感和简洁界面的应用程序时。Qt库提供了丰富的API和工具,使得开发者可以轻松实现这样的功能。以下是对这个主题的详细...

    qt实现图片缩放

    在Qt框架中,图片缩放是一项常见的图像处理任务,它涉及到图形用户界面(GUI)的开发,特别是当我们要展示或操作图像时。Qt提供了一系列的类和方法来帮助开发者实现这个功能。以下将详细介绍如何使用Qt来实现图片的...

    图像实时缩放的FPGA实现,二次线性插值的Verilog实现。

    在本文中,我们将深入探讨如何使用FPGA(Field-Programmable Gate Array)实现图像实时缩放,并专注于其中的关键技术——二次线性插值。这一技术在数字图像处理领域广泛应用,尤其是在需要高质量图像缩放的场合。...

    photoView和viewPager的完美结合实现相册功能,支持收缩缩放,滑动到下一页上一页恢复默认大小

    photoView和viewPager的完美结合实现相册功能,支持收缩缩放,滑动到下一页上一页恢复默认大小

    360度展示代码,360度看车代码,360度看房代码,360度全景代码

    标题中的“360度展示代码,360度看车代码,360度看房代码,360度全景代码”指的是用于创建虚拟360度全景体验的编程技术,这种技术常用于汽车展示、房地产展示等领域,让用户仿佛身临其境地查看环境。在网页中实现...

    jQuery支持局部缩放图片放大镜插件.zip

    **jQuery支持局部缩放图片放大镜插件** 在网页设计中,为了提升用户体验,经常会用到图片放大镜功能,让用户可以更清晰地查看产品的细节。jQuery作为一款强大的JavaScript库,提供了丰富的插件来实现这样的效果。...

    js实现鼠标滚轮控制图片缩放效果的方法

    在如今的网络应用中,经常会遇到需要实现用户通过鼠标滚轮控制页面元素缩放的场景,例如图片查看器、地图应用等。本文将详细介绍如何使用JavaScript来实现通过鼠标滚轮控制图片缩放效果的方法,其中将涉及...

    android点击查看大图,ViewPager实现左右滑动切换、缩放图片

    在Android开发中,有时我们需要为用户...以上就是使用`ViewPager`和手势操作实现Android查看大图并支持图片缩放的关键技术点。通过理解这些原理和实践,开发者可以轻松地在自己的应用中集成这一功能,提升用户体验。

Global site tag (gtag.js) - Google Analytics