实现快照与回放
在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();
相关推荐
360安全浏览器则突破了这一限制,实现了网页的无级缩放,允许用户更加灵活地调整网页的视图大小。 实现网页无级缩放的方法多样。首先,用户在浏览网页时,可以按住Ctrl键,同时滚动鼠标滚轮,这样就能便捷地放大或...
5. **无级缩放页面**:若网页文字太小,可以按住Ctrl键并滚动鼠标滚轮,或者按下Ctrl键后使用小键盘的加号或减号来缩放页面文字大小。 6. **快速关闭页面**:双击标签条、点击关闭按钮、使用Ctrl+W快捷键,甚至通过...
5. **无级缩放页面**:按住Ctrl键滚动鼠标滚轮或使用小键盘的加减号,可以轻松调整网页文字大小,适应不同视力需求。 6. **快速关闭页面**:双击标签、点击关闭按钮、使用Ctrl+W快捷键,甚至通过预先设置的鼠标中键...
它由Pelco公司开发,主要用于驱动和支持云台的运动,包括上下、左右旋转、缩放等操作,同时还支持预置点设置、巡航路径规划等功能。在安防监控系统中,Pelco-D协议允许用户通过中央控制系统或远程终端设备对云台进行...