zoukankan      html  css  js  c++  java
  • 【全面解析DeepZoom 之一】酷!Deep Zoom

                           【全面解析DeepZoom 之一】酷!Deep Zoom
                                            周银辉
    微软的Silverligth2包含了对由“SeaDargon”团队创建的Deep Zoom技术的支持。简单地说,Deep Zoom技术就是能让你查看很大的一副图片但仅仅将当前显示在你屏幕上的部分发送到你的浏览器里。你也可以对图片进行平滑的缩放和平铺。这就像是在线地图将一副很大的图片划分成很多很小的平铺的图片然后将那些你正在查看的发送到你的屏幕上。这所带来的好处就是你不必花大量时间来下载一副很大的图片数据而这些甚至你从来就没有看或注意到过。
    你可以到http://memorabilia.hardrock.com/ 体验该项犀利的技术:
    注意到下图,画面中共加载了257幅图片,而且每幅图片都是高分辨率的大图,按照常规思维要将这257幅图片下载到客户端可能就足以让客户精神崩溃了,但使用DeepZoom技术下载并显示下面的这个画面就跟显示一副小图一样快速(至于为什么,本系列随笔的后续部分会讲到)

    让后用户可以针对该画面中的任何感兴趣的部分进行缩放和拖拽来查看详细,拿其中的几本书的照片来说,我们可以是鼠标操作来由远及近的观察它:

    再近一点:

    更近一点:

    注意:整个这一系列操作都是通过鼠标点击或滚轮完成的,效果非常的平滑和流畅更没有页面的刷新,而在使用现在的一些在线地图时要进行地图的缩放是要刷新整个或部分页面的,用户体验完全不一样。

    作为开发人员,我们可以利用DeepZoomComposer来协助我们并加入到Silverlight2应用中,接下来我会讲到如何在Silverlight2中应用DeepZoom技术。

  • 相关阅读:
    常见HTTP状态码(200、301、302、500等)解说
    HTTP协议详解(真的很经典)
    计算机网络基础知识总结
    js调试中打印语句
    关于函数return的一些理解与小实例
    网站的导航菜单 远择一个栏目跳转后,为导航菜单的这个栏目增加选中的样式的思路
    alias记录
    利用vue-cli配合vue-router搭建一个完整的spa流程
    node+vue-cli+webpack搭建教程
    nodejs参考文章
  • 原文地址:https://www.cnblogs.com/zhouyinhui/p/1139059.html
Copyright © 2011-2022 走看看