OpenSeadragon是一个可以显示多层图片(可放大缩小)的Web库,基于JavaScript,支持桌面和手机,主要用于地图、医学图像等需要放大缩小分层显示的图像的显示。OpenSeadragon为我们提供了现成的工具条toolBar,工具条上有按钮,可以默认实现放大、缩小、全屏、返回默认大小等功能,官方文档:OpenSeadragon
但我们的项目中工具条的样式与官网所提供的样式不符,今天我们就来谈谈如何自定义工具条,并绑定上相对应的功能。
下文项目中工具条功能主要用到放大、缩小、返回默认、全屏功能。
要实现的功能为工具条位于容器的右侧,并纵向排列,工具条的图表也是自定义图标实现步骤
1.首先在页面中添加自定义工具条
<template>
<div style="width: 100%;height: 100%;">
// 自定义工具条
<div id="toolbarDiv" style="width:100%;height: 300px;">
<div>
<div id="zoom-in"></div>
<div id="zoom-out"></div>
<div id="home"></div>
<div id="full-page"></div>
</div>
</div>
<div id="contentDiv" style="width: 100%;height: 100%;"></div>
</div>
</template>
2.配置自定义工具条
options: {
id: "contentDiv",
toolbar: "toolbarDiv",
prefixUrl: "images/", //host "https://openseadragon.github.io/openseadragon/images/"
constrainDuringPan: false,
showNavigator: false, // 展示导航图
autoHideControls: false,
// sequenceMode: true,
// showReferenceStrip: true,
// referenceStripScroll: 'vertical',
zoomInButton: "zoom-in", //放大
zoomOutButton: "zoom-out", //缩小
homeButton: "home", //恢复默认
fullPageButton: "full-page", //全屏
}, // openseadragon 参数配置
3.修改样式
<style scoped lang="scss">
.contentDiv {
width: 100%;
height: 100%;
}
#toolbarDiv{
position: absolute!important;
}
#zoom-in {
width: 50px;
height: 50px;
background: url(../assets/testcenter/fangda.png)no-repeat;
background-size: 100% 100%;
margin-bottom: 20px;
position: absolute !important;
top: 30px;
right: 43px;
z-index: 999;
}
#zoom-out {
width: 50px;
height: 50px;
background: url(../assets/testcenter/suoxiao.png)no-repeat;
background-size: 100% 100%;
margin-bottom: 20px;
position: absolute !important;
top: 100px;
right: 43px;
z-index: 999;
}
#home {
width: 50px;
height: 50px;
background: url(../assets/testcenter/moren.png)no-repeat;
background-size: 100% 100%;
margin-bottom: 20px;
position: absolute !important;
top: 170px;
right: 43px;
z-index: 999;
}
#full-page {
width: 50px;
height: 50px;
background: url(../assets/testcenter/quanping.png)no-repeat;
background-size: 100% 100%;
position: absolute !important;
top: 240px;
right: 43px;
z-index: 999;
}
</style>
图中自定义图标按需使用自己的即可,样式使用定位,一定要添加权重z-index,不然无法实现功能,到此就实现了