问题标签 [openseadragon]

我能够使用 Openseadragon JS 在我的网页中显示具有放大和缩小功能的平面图（图像），并且用户可以使用 Openseadragon 的 addOverlay 方法在图像上放置点。现在我想在这些点之间画线当用户添加新点时。任何帮助下面是我尝试的示例函数`

使用OpenSeadragonFabricjsOverlay添加代码

查看器初始化如下

我目前正在测试将大型 jpeg 文件转换为 DZI 的 magickSlicer。它工作得很好。

但是，我面临渲染 DZI 大小的问题。例如，对于权重为 10Mo 的原始 jpeg 文件，使用默认选项 (-w 256 -h 256) 渲染的 DZI 文件夹权重为 26.2Mo。如果我将选项宽度和高度更改为 512x512，则 DZI 文件夹重量为 18.3Mo。它太大了，因为我必须处理一个巨大的大文件存储库。

我想知道如何管理转换选项以使 DZI 文件夹的权重小于或等于原始文件的权重。

最好的祝福。

我有一个 javascript 组件 OpenSeadragon ( openseadragon.github.io ) 用于使用以下代码查看大图像：

html:

Javascript：

我的问题是：单击组件时是否可以添加标记？

我正在使用与示例中提到的相同配置和切片源的基本单行切片源集合示例。

我现在正在尝试在第一张和第二张图像上添加叠加层，但在执行此操作时遇到了麻烦。

第一个叠加层应该放在第一个图像的顶部，而第二个叠加层应该放在第二个图像上，但它不会那样发生..

我正在将覆盖集合添加到 tileSources 集合中。

不同页面的叠加层不是独立的吗？

此外，添加叠加层后，我在控制台中收到以下错误，我不明白如何在插件的基本初始化中使用 TiledImage.imageToViewportRectangle。

[Viewport.imageToViewportRectangle] 多图不准确；改用 TiledImage.imageToViewportRectangle

.

Codepen 示例网址：https ://codepen.io/hussainb/pen/QQPPvL

Codepen 代码：

html:

CSS：

Javascript：

我正在开发一个基于 OpenSeaDragon 的图片库，我希望能够在收集模式下使用叠加层。基于 OSD 网站 ( http://openseadragon.github.io/ ) 上的各种示例，我设法编写了一个最小的工作示例，但有几个问题我无法解决（请参阅https:// jsfiddle.net/7ox0hg9L/）。

首先，开/关叠加切换工作正常，但如果我平移/缩放图像，叠加会重新出现，即使切换关闭使用parentNode.removeChild().

其次，我似乎无法让叠加工具提示在第一页上始终如一地工作，并且它们从未出现在后续页面上。单选按钮标签上的工具提示在任何页面上都可以正常工作，所以我不确定为什么叠加层上的工具提示不能。

任何建议都会受到欢迎。请记住，我是 javascript 新手。谢谢！

编辑：iangilman 下面的回答和他对 jsfiddle 的编辑让我重回正轨，并帮助我创建了我心目中的画廊。我在这里为可能需要类似功能的人发布了完整的解决方案。谢谢伊恩！

我使用 OpenSeaDragon (OSD) 2.3.1 和 D3v4 在图像上绘制点。当用户单击图像时会绘制这些点。

问题是如何使那些 d3 对象在 OSD 中可拖动。

问题在于 OSD 必须处理所有鼠标活动才能与图像查看器交互。

目前我用于捕获事件的鼠标处理程序是

然后我使用 OSD MouseTracker 设置处理程序

如果我不需要拖动元素，这可以正常工作。因为现在所有的点击都将由 OSD 处理，而 D3 对象不知道它们正在被点击。我尝试使用

但它不起作用。

另一种可能性是使用 OSD 的 event.originalEvent。而且我需要知道如何捕获this指向被点击的 d3 元素的指针。

我找到了这个 D3 的例子，但我不知道如何应用它

我在运行测试时遇到了问题，因为其中一个 React 组件依赖于第三方 Sea Dragon，它呈现全屏图像并允许用户放大和缩小。该库直接与 Dom 交互，并且很难测试。

我的组件如下所示：

问题是我需要使用 mount 进行测试，以便调用我的生命周期和渲染。但这样做时，我收到一个错误：

根据经验，我知道 appendChild 错误消息可能意味着没有呈现带有 Id 的 div 标签，因此库找不到它。这是我最好的猜测。

我的测试如下所示：

我正在尝试模拟单击，当图像被渲染时，它会应用我想测试的全屏类。

我必须在我的 Vue 组件中使用一个名为“”的外部 javascript 库OpenSeadragon。

但是如何在我的 Vue 组件中加载这个组件呢？在我的父模板中，我加载库：

这是我的Vue 测试组件：

然后我得到这个错误：

[Vue 警告]：创建钩子时出错：“TypeError：无法读取属性‘appendChild’ of null”

我目前正在开发一个使用 OpenSeadragon 的查看器，以及用于添加裁剪工具的 Picturae 选择插件。

选择工作正常，但是当我旋转图像时，选择的旋转行为很奇怪：它围绕左下角旋转，而不是围绕选择中心旋转。

我制作了一个案例视频：当图像是直的时选择旋转的正常行为，以及旋转图像时的奇怪行为。

想要的效果是围绕选择中心旋转......

我使用以下代码来初始化选择：

开放海龙： https ://openseadragon.github.io

图片选择插件： https ://picturae.github.io/openseadragonselection/

谢谢 ！

我需要显示具有拓扑/阴影浮雕背景的 D3 地图。需要实现所有用户功能（例如缩放和平移）

到目前为止，我已经将地图分层到具有拓扑的 PNG 上。然后我对投影进行了一些修改，以将 PNG 边框与地图边框对齐。然后我允许用户缩放 PNG（例如：http ://bl.ocks.org/pbogden/7363519 ）。结果实际上非常好。当我平移和缩放时，地图会随着很棒的 PNG 移动（下图）：

问题是PNG非常重（20MB），整个结果体验严重错误，以至于无法使用。结果显然是使用了较低分辨率的图像，但是当用户放大时，拓扑看起来很糟糕。我尝试将 PNG 转换为 JPG ......这实际上更糟！

在 D3 中实现我的目标的最佳解决方案是什么？初步想法如下：

(1) d3.geo.tile 插件 ( http://bl.ocks.org/mbostock/4132797 )。这里的困难是我需要从我的 PNG 图像创建自己的图块。这是一个有前途的途径吗？我可以在上面叠加一张 D3 地图吗？我找不到带有自定义图块的示例。

(2) 我已经看到了 OpenSeaDragon 和 D3 的成功实施 ( http://bl.ocks.org/zloysmiertniy/0ab009ca832e7e0518e585bfa9a7ad59 )。这里的问题是我不确定是否可以实现所需的 D3 功能（缩放、平移、过渡），以便 D3 地图和基础图像同时移动。

(3) 还有其他想法或想法吗？