支持无级缩放的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();