在Krpano中点击热点放大图片并交互

在全景项目中，经常会遇到这样的功能：点击场景中的某个热点，能够进行图片放大，同时还可以对图片进行交互操作，比如放大图片、拖动图片等，本章节内容讲述如何在Krpano库中调用js代码实现图片的放大和交互。具体效果如下：

本次我们使用到的js库叫viewer，github地址：github.com/fengyuanche…

接下来进入本章的重点，如何在Krpano项目中集成使用：

步骤一：

1. 先从以下地址下载核心资源文件：链接: pan.baidu.com/s/1zCGezHc8… 提取码: pano

2. 下载后，将文件放到你工程里，我这里在工程下建立有css和js文件夹，这是我的目录：

步骤二：

在index.html中引入这两个文件，Krpano默认创建的项目叫vtour.html，我这里更名成index.html了，具体引入方式如下，将下面代码放到head标签里：

<!-- 图片预览使用 -->
<link rel="stylesheet" href="css/viewer.css" />

将下面代码放到head或body中都可以，我放到了body的第一行

<script src="js/viewer.js"></script>

步骤三：

1. 在body中创建一个img标签，用于全局图片放大功能，创建时默认不显示，设置display为none，具体代码如下：

<!-- 该img标签用于全局图片放大功能（全景场景中点击图片热点展示图片使用） -->
<img src="" id="hideImg" style="display: none" />

2. 封装js函数用于Krpano中热点事件调用，功能是根据热点点击展示要放大的图片，具体代码如下：

// 图片预览方式（krpano中调用）
function openImage(imgscr) {
    document.getElementById("hideImg").src = imgscr;
    var image = new Viewer(document.getElementById("hideImg"), {
           url: "data-original",
    });
    document.getElementById("hideImg").click();
}

注意以上js代码放到html文件的body下默认生成的id为pano的div下的script标签里。

步骤四：

以上已基本完成所有前置工作，接下来就是在Krpano中调用了，找到你在场景中设置的图片点击热点，示例代码如下：

<!-- 添加图片热点 -->
<hotspot name="spot4-1-1" url="./images/waves.png" onloaded="do_crop_animation(128,128, 15);"
ath="0"  
atv="2" 
scale="0.6" 
zoom="true"
onclick="js(openImage('./images/rongyu/hotimage/4.企业文化.jpg'););"
/>

上述代码中，核心代码是onclick事件，在Krpano调用js方法格式：js(方法名(参数)；)； 注意，这个在调用openImage函数时，传入的时当前要放大的图片路径。 以上就是在Krpano中调用js的函数库实现图片的放大效果，如果有什么问题可以私信我。