其他分享
首页 > 其他分享> > OpenSeadragon 自定义工具栏 学习记录(四)

OpenSeadragon 自定义工具栏 学习记录(四)

作者:互联网

自定义工具栏

官网示例:http://openseadragon.github.io/examples/ui-toolbar/

尽管OpenSeadragon提供了覆盖在视口上的默认按钮,但在许多情况下,演示可能需要更传统的工具栏。OpenSeadragon允许您轻松地将控件停靠在页面上的任何元素中。

此外,工具栏具有支持全屏模式和正常模式之间转换的逻辑。用户可以在全屏模式下设置工具栏样式,包括隐藏它

 

一、 toolbar设置

...
<div id="toolbarDiv" style="width:200px; height:30px;"></div>
...

<script type="text/javascript">
OpenSeadragon({
...
toolbar: "toolbarDiv", //设置toolbar的值为所对应的div的id
...
});
</script>

 

二、自定义按钮

var openSeadragon = OpenSeadragon({
    ...
    zoomInButton:   "zoom-in",         //放大
    zoomOutButton:  "zoom-out",        //缩小
    homeButton:     "home",            //恢复默认
    fullPageButton: "full-page",       //全屏
    nextButton:     "next",            //下一张图片
    previousButton: "previous",        //前一张图片
    ...
});

 

标签:...,工具栏,自定义,OpenSeadragon,全屏,toolbar
来源: https://www.cnblogs.com/wdjpunch/p/15507736.html