`

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

 
阅读更多

实现快照与回放

在360度浏览的过程中,允许用户对特定帧的局部进行快照,将快照增加到快照集合。

之后在快照集合点击小图,可迅速回放该快照。

两种布局

 快照集合有两种布局效果,采用垂直布局的效果如下图:



 
 

 采用水平布局的最终效果如下图:


  

 

快照集合插件

选用了JQuery lightSlider , 它使用 MIT License

lightSlider 的自动垂直布局不太灵,最好自行通过高度运算,强制指定其 item:item_cout,

为OpenSeadragon扩展以下方法:

 

onSnap:点击快照按钮的处理函数

 

loadSnap:点击快照图标时回放处理

 

slider:实例化lightSlider为OpenSeadragon 的成员变量

 

上述方法的代码如下:

 

    $.Viewer.prototype.slider = function(options) {
        if (!this.slider || options) {
            options = options || {};
            options.viewer = this;
            var el_slider = options.el;
            this.slider =  jQuery(el_slider).lightSlider(options);
            //this.slider = new $.Selection(options);
            var prefix = this.prefixUrl || '';
            var useGroup = this.buttons && this.buttons.buttons;
            var anyButton = useGroup ? this.buttons.buttons[0] : null;
            var onFocusHandler = anyButton ? anyButton.onFocus : null;
            var onBlurHandler = anyButton ? anyButton.onBlur : null;
            
             this.snapButton = new $.Button({
                element:    this.snapButton ? $.getElement( this.snapButton ) : null,
                clickTimeThreshold: this.clickTimeThreshold,
                clickDistThreshold: this.clickDistThreshold,
                tooltip:    $.getString( "Tooltips.Snap" ),
                srcRest:    resolveUrl( this.prefixUrl, 'snap_rest.png' ),
                srcGroup:   resolveUrl( this.prefixUrl, 'snap_grouphover.png' ),
                srcHover:   resolveUrl( this.prefixUrl, 'snap_hover.png' ),
                srcDown:    resolveUrl( this.prefixUrl, 'snap_pressed.png' ),
                onRelease:  $.delegate( this, onSnap ),
                onFocus:    onFocusHandler,
                onBlur:     onBlurHandler
            });
            
            this.buttons.buttons.push(this.snapButton);
            this.buttons.element.appendChild(this.snapButton.element);

           
        }
        return this.slider;
    };
    
    function resolveUrl( prefix, url ) {
        return prefix ? prefix + url : url;
    }

  //c4w snap
    function onSnap() {
    	var _viewer = this;
    	var canvas_src = this.drawer.canvas;
    	//计算出源canvas的正方形区域
    	var w1 = canvas_src.width;
    	var h1 = canvas_src.height;
    	var clip_canvas = document.getElementById('clip_canvas');
    	var w2=clip_canvas.width;
    	var h2=clip_canvas.height;
    	
    	var canvas_clip = this.canvas_clip;
    	if(!canvas_clip){
    		//canvas_clip = document.createElement('canvas');
    		canvas_clip =document.getElementById('clip_canvas');
            this.canvas_clip=canvas_clip;
    	}
    	
    	var w3,h3,lt_x,lt_y;

    	if(w1/h1 < w2/h2){
    		h3 = h1;
    		w3 =  Math.round((w2*h3)/h2);
    		lt_x = Math.round((w1-w3)/2);
    		lt_y =0;
    	}else{
    		w3 = w1;
    		h3 =  Math.round((w3 * h2)/w2);
    		lt_x =0;
    		lt_y = Math.round((h1-h3)/2);
    	}
    	var ctx = canvas_clip.getContext('2d');
    	ctx.clearRect(0,0,w2,h2);
    	ctx.drawImage(canvas_src, lt_x, lt_y,w3,h3,0,0,w2,h2);
    	
    	var slider = _viewer.slider;
    	//var e_ul = document.getElementById("content-slider");
    	var e_ul=slider[0];
    	var e_li =  document.createElement('li');
    	e_li.tabIndex=e_ul.childNodes.length;

    	e_li.width=w2;
    	var img = new Image();
    	//img.setAttribute('onclick','');
    	img.id = 'img_'+e_ul.childNodes.length;
    	img.border=0;
    	img.width=w2;
    	img.height=h2;
    	
    	jQuery(img).on('touchend click',
    		function(e){
    		var img = this;
    		var li = img.parentNode;
    		var ul = li.parentNode;
    		li.focus();
    		var ta = document.getElementById("ta_info");
    		if(ul.img_editing){
    			ul.img_editing.info = ta.value;
    		}
    		ul.img_editing = img;
    		if(img.info){
    			ta.value=img.info;
    		}else{
    			ta.value='';
    		}
    		if(img.bounds){
    			_viewer.goToPage(img.page);
    			_viewer.viewport.fitBounds(img.bounds);
    		}
    		return;
    		if(!window.prompt ("Copy to clipboard: Ctrl+C, Enter", this.id+'.png'))
    			return false;
    		var e=this.src;e=e.replace("image/png","image/octet-stream;Content-Disposition: attachment; filename=p1.png");document.location.href=e;
    	});
    	img.onload=function(){
    		var img = this;
    		var snap_pos = document.getElementById('snap_pos');
    		snap_pos.innerHTML= 'page:'+img.page+'  bounds:'+img.bounds;
    	}
    	img.src=clip_canvas.toDataURL();	
    	var bounds = _viewer.viewport.getBounds( true );
    	img.bounds=bounds;
    	img.page=_viewer.currentPage();
    	e_li.appendChild(img);
    	slider.append(e_li);
    	slider.refresh();
    	slider.goToSlide(slider.find('li').length);
    }

    
})(OpenSeadragon);
 

 

要点1:记住当前帧和局部定义

    	var bounds = _viewer.viewport.getBounds( true );
    	img.bounds=bounds;
    	img.page=_viewer.currentPage();

 

要点2:回放指定帧和局部

    			_viewer.goToPage(img.page);
    			_viewer.viewport.fitBounds(img.bounds);

要点3:对移动终端的点击适应

    	jQuery(img).on('touchend click',

要点4:调用canvas生成快照小图

    	var ctx = canvas_clip.getContext('2d');
    	ctx.clearRect(0,0,w2,h2);
    	ctx.drawImage(canvas_src, lt_x, lt_y,w3,h3,0,0,w2,h2);
...
    	img.src=clip_canvas.toDataURL();	

 

 

 

 

  • 大小: 439.5 KB
  • 大小: 1.3 MB
分享到:
评论

相关推荐

    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)或最近...

    VB6无损图像缩放 最大限度消除锯齿 GDI实现

    其中,`StretchBlt`支持源和目标矩形的任意大小,可以用来实现各种比例的缩放。 5. **优化策略** 为了最大限度地消除锯齿,开发者可能需要结合多种技术,例如先进行预处理,对图像进行适当的滤波,然后再进行缩放...

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

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

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

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

    qt实现图片缩放

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

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

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

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

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

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

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

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

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

Global site tag (gtag.js) - Google Analytics