个人中心
gpt4 book ai didi

javascript - 收集模式下 OpenSeaDragon 覆盖和工具提示的问题

转载 作者：行者123 更新时间：2023-11-29 15:15:45 31 4
gpt4 key购买 nike

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

首先，开/关覆盖切换工作正常，但如果我平移/缩放图像，覆盖会重新出现，即使关闭切换会使用 parentNode.removeChild() 从 DOM 中删除元素.

其次，我似乎无法让叠加工具提示在第一页上始终如一地工作，而且它们永远不会出现在后续页面上。 radiobutton 标签上的工具提示在任何页面上都可以正常工作，所以我不确定为什么叠加层上的工具提示不起作用。

欢迎提出任何建议。请记住，我是 javascript 的新手。谢谢!

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset='utf-8'>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/openseadragon/2.3.1/openseadragon.min.js"></script>
    <style>
        body {
            margin: 0;
            color: #333;
            font-family: Helvetica, Arial, FreeSans, san-serif;
            background-color: #121621;
        }
        .openseadragon{
            width:      800px;
            height:     600px;
            border:     1px solid black;
            color:      #333;
            background-color: black;
        }
        .highlight{
            opacity:    0.4;
            filter:     alpha(opacity=40);
            outline:    6px auto #0A7EbE;
            background-color: white;
        }
        .highlight:hover, .highlight:focus{
            filter:     alpha(opacity=70);
            opacity:    0.7;
            background-color: transparent;
        }
        .nav {
            cursor: pointer;
            display: inline-block;
            font-size: 25px;
        }
        .controls {
            text-align: center; 
            display: table;
            background-color: #eee;
            table-layout: fixed;
            width: 800px;
        }
    </style>
</head>

<body>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<div class="controls">
    <label class="labels"><input id="showOverlays" type="checkbox"><a id="selector" title="">Show overlays</a></label>
    <a class="nav previous" title="Previous" id="prv"> < </a>
    <a class="nav next" title="Next" id="nxt"> > </a>
</div>

<div id="example-runtime-overlay" class="openseadragon" />

<script type="text/javascript">
    var tileSource = {
        Image: {
            xmlns: "http://schemas.microsoft.com/deepzoom/2008",
            Url: "http://openseadragon.github.io/example-images/highsmith/highsmith_files/",
            Format: "jpg",
            Overlap: "2",
            TileSize: "256",
            Size: {
                Height: "9221",
                Width:  "7026"
            }
        }
    };
    var runtimeViewer = OpenSeadragon({
        id:            "example-runtime-overlay",
        prefixUrl:     "openseadragon/images/",
        showSequenceControl: true,
        sequenceMode:  true,
        nextButton:     "nxt",
        previousButton: "prv",
        tileSources: [{
            tileSource: tileSource,
            overlay: [{
                id: 'example-overlay',
                x: 0.43,
                y: 0.47,
                width: 0.15,
                height: 0.20,
                className: 'highlight',
                caption: 'Nice painting'
            }]
        },{
            tileSource: tileSource,
            overlay: [{
                id: 'example-overlay',
                x: 0.65,
                y: 0.05,
                width: 0.12,
                height: 0.12,
                className: 'highlight',
                caption: 'Milton'
            }]
        }]
    });

    var page = 0;
    runtimeViewer.addHandler("page", function (data) {
        page = data.page;
    });

    $('.next').click(function() {
        radio.prop('checked', false);
    });

    $('.previous').click(function() {
        radio.prop('checked', false);
    });

    var radio = $('#showOverlays')
        .prop('checked', false)
        .change(function() {
            if (radio.prop('checked')) {
                var overlay = runtimeViewer.tileSources[page].overlay[0];
                var elt = document.createElement("div");
                elt.id = overlay.id;
                elt.className = overlay.className;
                elt.title = "";
                $(elt).tooltip({
                    content: overlay.caption
                });
                runtimeViewer.addOverlay({
                    element: elt,
                    location: new OpenSeadragon.Rect(overlay.x, overlay.y, overlay.width, overlay.height)
                });
            } else {
                var overlay = runtimeViewer.tileSources[page].overlay[0];
                var element = document.getElementById(overlay.id);
                if (element) {
                    runtimeViewer.removeOverlay(element);
                    delete element;
                }
            }
        });

    $(function() {
        $(document).tooltip();
    });
</script>

</body>

</html>

最佳答案

看来您的开端不错!

您使用 addOverlay 正确添加了叠加层，因此您需要使用 removeOverlay 删除它们:

runtimeViewer.removeOverlay(element);

对于工具提示，不幸的是 OpenSeadragon 的事件处理会干扰 jQuery，因此您必须使用 OpenSeadragon MouseTracker:

function bindTooltip(elt) {
  new OpenSeadragon.MouseTracker({
    element: elt,
    enterHandler: function(event) {
      // Show tooltip
    },
    exitHandler: function(event) {
      // Hide tooltip
    }
  }).setTracking(true);
}

关于javascript - 收集模式下 OpenSeaDragon 覆盖和工具提示的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49395462/

31 4 0
文章推荐： android - 即使在应用程序最小化状态下，如何始终运行 asynctask？
文章推荐： mysql - 使用 mysqlQuery 重复某些值时未获得预期结果
文章推荐： android - 如何在 Android 中将字符串格式化为 "AAA-AAA-AAA"格式的 EditText
文章推荐： javascript - 前端侧加密: Where to store password throughout session?
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com