Vue项目中是实现全景图片

Posted 2023-05-10

参考技术A 全景图片查看器，网络上相关的插件有很多，例如： Panolens.js 、 Pano.js 、 photo-sphere-viewer.js ，这些插件都是基于 Three.js ，我这次是用的是 photo-sphere-viewer.js 。

或者标签引入

标签引入时使用方法类似，只是方法名称不同，如下

有时候会有问题，也没有Cannot load image的报错，初步判断应该不是图片路径的问题。尝试换一种切换图片的方式。如下

如切换过快，导致上个图还没加载完则会报 PSVError: Loading already in progress 错误导致图片不显示，解决方案如下：

到此全景图片查看器就完成了，赶快试试吧，是不是很酷炫，别忘记点赞收藏哦~~

windows phone 7，收藏全景项目

【中文标题】windows phone 7，收藏全景项目

【英文标题】：windows phone 7, favoriting a panorama item

【发布时间】：2011-06-19 06:35:58

【问题描述】：

有没有一种程序可以在屏幕上显示所选全景项目的内容，如果有，它的内容属性是什么？

我有三个全景项目（1、2、3），每个项目都有一个矩形，其中包含一个矩形。填充图像。

我想设计一个applicationbar 按钮，当单击该按钮时，确认屏幕上的 rectangle.fill 在全景项目中是什么，然后将其添加到应用程序的另一个页面。

这甚至可能吗？我想selectedindexitem 或类似的东西会告诉我当前屏幕上的全景图是什么，但如果是这样，我该如何提取 rectangle.fill 信息？

【参考方案1】：

pano.SelectedItem 将为您提供对当前显示的 PanoramaItem 的引用，您可以通过适当地转换 pano.SelectedItem.Content 来获得对其可视化树的根对象的引用。

样式指南明确指出不要在全景或 Pivot 应用程序中使用应用程序栏。 由于您不能使用 appbar，我建议您使用包含 Rectangle 和 Button 的网格。

大概你有代码用图像填充你的矩形；当你这样做时，你还应该填充一个查找，这样你就可以使用 panoItem 来获取你想要的任何东西。如果您要为您的页面显示 XAML，我的建议可能会更具体。

假设您正在从文件系统加载这些图像，并且变量 filePath 当前包含您刚刚加载到全景项 panoItem 的文件路径，那么您的代码最终应该是这样的：

//lookup
Dictionary<PanoramaItem, string> _panoPicPath = new Dictionary<PanoramaItem, string>();
...
//populate lookup
_panoPicPath[panoItem] = filePath;
...
//fetch filePath for selected 
string selectedFilePath = _panoPicPath[pano.SelectedItem];