javascript - OpenSeadragon动态图像

标签 javascript deepzoom openseadragon

我想为 OpenSeadragon 创建一个图 block 源,以渲染游戏玩家的 View 。 世界有坐标(x,y),玩家位于特定坐标上,具有视野范围。

我想要的是为 OpenSeadragon 创建一个瓦片源,它可以显示整个 View 。在最大缩放时,1 个图 block = 1 个坐标。 所以我有几个问题: 如何计算玩家视野范围的最大缩放级别? 我怎样才能知道我必须在 OpenSeadragon 请求的图 block 中渲染的世界位置(x、y、关卡)?

谢谢:)

最佳答案

如果我理解正确的话,您正在尝试创建一个自定义 TileSource,您可以在其中从一组构成游戏 map 构建 block 的标准图 block 加载。如果需要,您可以指定最大级别是它尝试加载的唯一级别(通过使 minLevel 和 maxLevel 相同),这样您就不必处理生成图 block 组合。这使得 getTileUrl(level, x, y) 变得简单,因为您只需处理 1:1 层。这就留下了最高级别是多少的问题。定义如下:

http://openseadragon.github.io/docs/OpenSeadragon.TileSource.html

...公式为:

By default the image pyramid is split into N layers where the images longest side in M (in pixels), where N is the smallest integer which satisfies 2^(N+1) >= M.

基本上,您只需计算 2 的幂,直到获得图像的大小。因此,如果您的图像一侧有 1 个像素,则您的最大级别为 0。如果一侧有 2 个像素,则您的最大级别为 1、4 = 2、8 = 3 等。

假设您的图 block 大小为 100 像素, map 为 5x7 图 block 。这意味着最长尺寸为 700 像素。查看 2 的幂,700 大于 512,小于 1024,因此我们使用 1024。1024 是 2 的 10 次方,因此您的最大级别为 10。

这能回答你的问题吗?

关于javascript - OpenSeadragon动态图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26961045/

相关文章:

javascript - 如何使用 Angular 8 访问 TypeScript 中的 JavaScript 内容(或扩展其他 JS 文件的 JavaScript 文件)

javascript - 类似 PHP 的 JS Settype

javascript - Angular 5,组件正在无故初始化

javascript - Vuex 更新数组作为对象的值

c# - Windows 应用商店应用程序是否有 Deep Zoom 的替代方案?

silverlight - DeepZoom 和 SeaDragaon AJAX 的许可证吗?

ios - 缩放 SVG 超过未知阈值会导致元素消失

javascript - Openseadragon 在后台下载

javascript - 将自定义选项卡添加到自定义媒体请求者屏幕

node.js - 如何开始使用 OpenSeadragon?