CN112015316A - 全景图片展示及调整方法、系统、设备和存储介质 - Google Patents

全景图片展示及调整方法、系统、设备和存储介质 Download PDF

Info

Publication number
CN112015316A
CN112015316A CN201911302908.7A CN201911302908A CN112015316A CN 112015316 A CN112015316 A CN 112015316A CN 201911302908 A CN201911302908 A CN 201911302908A CN 112015316 A CN112015316 A CN 112015316A
Authority
CN
China
Prior art keywords
sliding
target
panoramic picture
quaternion
elements
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201911302908.7A
Other languages
English (en)
Inventor
李双义
余大学
潘相夏
潘潘
潘看奥
左俊泉
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Dianzhen Internet Technology Shanghai Co ltd
Original Assignee
Dianzhen Internet Technology Shanghai Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Dianzhen Internet Technology Shanghai Co ltd filed Critical Dianzhen Internet Technology Shanghai Co ltd
Priority to CN201911302908.7A priority Critical patent/CN112015316A/zh
Publication of CN112015316A publication Critical patent/CN112015316A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures

Landscapes

  • Engineering & Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Studio Devices (AREA)

Abstract

本发明涉及计算机视觉技术领域，尤其涉及一种全景图片展示及调整方法、系统、设备和存储介质。该方法包括：记录移动设备的初始姿态，获取到目标全景图片及用于展示的初始四元素，根据初始姿态对初始四元素进行计算，得到目标四元数；将目标四元数作为旋转参数，对目标全景图片进行展示；侦测用户行为，若侦测到滑动动作，则根据滑动动作的滑动像素值转换为四元素，将滑动像素值转换的四元素与初始姿态进行叠加运算，得到新的目标四元素；将新的目标四元素作为旋转参数，对目标全景图片进行刷新展示。本发明使得全景图片基于移动设备姿态进行展示时，初始视角能保证始终为正前方，且能通过移动设备姿态以及手指拖动来调整全景图视角。

Description

全景图片展示及调整方法、系统、设备和存储介质
技术领域
本发明涉及计算机视觉技术领域，尤其涉及一种全景图片展示及调整方法、 系统、设备和存储介质。
背景技术
浏览器的3D引擎或移动设备的应用软件在展示全景图片时，其仅能展示全 景图，未提供与移动设备姿态或手势相结合的视角切换方式，现有技术中普遍 存在三个问题：
1、基于移动设备的姿态，只有在移动设备正向垂直时，才可以看到全景图 片正前方的内容，而平时用户使用移动设备时，移动设备姿态大部分是水平， 或者略微朝上，这样导致用户看到全景图时，基本是全景图的地板位置，操作 体验不好；
2、通过手指滑动来调整全景图视角，全景图的的点击操作方式被阻止了；
3、无法支持移动设备姿态与手指滑动相结合的视角调整方式。
发明内容
有鉴于此，有必要针对现有的全景图片显示时体验不佳，且调整全景视角 时，无法支持手指操作的问题，提供一种全景图片展示及调整方法、装置、设 备和存储介质。
一种全景图片展示及调整方法，所述方法包括以下步骤：
记录移动设备的初始姿态，获取用户提供的图片路径和元素标识，根据所 述图片路径和所述元素标识获取到目标全景图片及用于展示的初始四元素，根 据所述初始姿态对所述初始四元素进行计算，得到目标四元数；
将所述目标四元数作为所述目标全景图片展示的旋转参数，对所述目标全 景图片进行展示；
根据预设的事件监听器侦测用户行为，若侦测到用户触发的是滑动动作， 则根据所述滑动动作的滑动像素值转换为四元素，将滑动像素值转换的四元素 与所述初始姿态进行叠加运算，得到新的目标四元素；
将新的所述目标四元素作为所述目标全景图片展示的旋转参数，对所述目 标全景图片进行刷新展示。
可选地，所述记录移动设备的初始姿态，包括：
在全景图片展示对象内预注册事件监听器；
在所述展示对象首次加载全景图片时，通过所述事件监听器的响应中获取 初始姿态。
可选地，所述根据所述初始姿态对所述初始四元素进行计算，得到目标四 元数，包括：
将所述初始姿态分别记为alpha、beta、gamma，初始四元素记为(0,0,0, 1)，则：
四元数Qbeta＝(0,0,0,1)；
四元数Qalpha＝(0,sin(alpha/2),0,cos(alpha/2)；
四元数Qgamma＝(0,sin(gamma/2),0,cos(gamma/2))；
将Qbeta、Qalpha、Qgamma依次与(0,0,0,1)左乘，得到目标四元素。
可选地，所述根据预设的事件监听器侦测用户行为，包括：
在全景图片展示对象内预注册触摸开始事件监听器、接触点改变事件监听 器、触摸结束事件监听器、鼠标按下事件监听器、鼠标移动事件监听器、鼠标 松开事件监听器；
当触发所述触摸开始事件监听器或所述鼠标按下事件监听器时，记录当前 点击的第一坐标值及第一时间；
到触发所述接触点改变事件监听器或所述鼠标移动事件监听器时，记录当 前点击的第二坐标值及第二时间，将所述第二坐标值减去所述第一坐标值得到 滑动距离，将所述第二时间减去所述第一时间得到滑动时长；
当触发所述触摸结束事件监听器或所述鼠标松开事件监听器时，记录当前 点击的第三坐标值及第三时间，将所述第三坐标值减去所述第一坐标值得到滑 动总距离，将所述第三时间减去所述第一时间得到滑动总时长；
若所述滑动距离或所述滑动总距离不小于预设的距离阈值，且所述滑动时 长或所述滑动总时长不小于预设的时长阈值时，侦测到用户触发的是滑动动作。
可选地，所述若侦测到用户触发的是滑动动作，则根据所述滑动动作的滑 动像素值转换为四元素包括：
若侦测到用户触发的是滑动动作，则获取当前点击处在x、y轴方向滑动像 素值，记为Xdistance、Ydistance，将所述初始姿态分别记为alpha、beta、 gamma，则通过如下公式转换得到四元素：
Δalpha＝Xdistance*0.005；
Δbeta＝Ydistance*0.003；
四元数Qbeta＝(sin(Δbeta/2),0,0,cos(Δbeta/2))；
四元数Qalpha＝(0,sin((Δalpha)/2),0,cos((Δalpha)/2)；
四元数Qgamma＝(0,sin(gamma/2),0,cos(gamma/2))；
将Qbeta、Qalpha、Qgamma依次与四元数(0,0,0,1)左乘，得到滑动像 素值转换的四元素。
可选地，所述将滑动像素值转换的四元素与所述初始姿态进行叠加运算， 得到新的目标四元素，包括：
若侦测到用户触发的是滑动动作，则获取当前点击处在x、y轴方向滑动像 素值，记为Xdistance、Ydistance，将当前滑动像素值转换的四元素记为alpha、 beta、gamma，将所述初始姿态中的beta值记为beta0，则通过如下公式进行叠 加运算：
Δalpha＝Xdistance*0.005；
Δbeta＝Ydistance*0.003+(beta–beta0)；
四元数Qbeta＝(sin(Δbet a/2),0,0,cos(Δbet a/2))；
四元数Qalpha＝(0,sin((alpha+Δalpha)/2),0,cos((alpha+Δalpha)/2)；
四元数Qgamma＝(0,sin(gamma/2),0,cos(gamma/2))；
将Qbeta、Qalpha、Qgamma依次与四元数(0,0,0,1)左乘，从而得到新 的目标四元素。
可选地，还包括：
当全景图片展示对象的区域尺寸发生变化时，读取展示控件的尺寸，根据 所述尺寸将调整绘图协议的摄像机宽高比；
将所述绘图协议的渲染区域设置为与所述尺寸一致；
通过绘图协议将所述目标全景图片进行刷新，更新所述目标全景图片的尺 寸，对更新后的所述目标全景图片进行展示。
进一步地，为实现上述目的，本发明还提供一种全景图片展示及调整装置， 包括：
计算目标四元数模块，用于记录移动设备的初始姿态，获取用户提供的图 片路径和元素标识，根据所述图片路径和所述元素标识获取到目标全景图片及 用于展示的初始四元素，根据所述初始姿态对所述初始四元素进行计算，得到 目标四元数；
展示模块，用于将所述目标四元数作为所述目标全景图片展示的旋转参数， 对所述目标全景图片进行展示；
更新目标四元数模块，用于根据预设的事件监听器侦测用户行为，若侦测 到用户触发的是滑动动作，则根据所述滑动动作的滑动像素值转换为四元素， 将滑动像素值转换的四元素与所述初始姿态进行叠加运算，得到新的目标四元 素；
刷新模块，用于将新的所述目标四元素作为所述目标全景图片展示的旋转 参数，对所述目标全景图片进行刷新展示。
为实现上述目的，本发明还提供一种计算机设备，包括存储器和处理器， 所述存储器中存储有计算机可读指令，所述计算机可读指令被所述处理器执行 时，使得所述处理器执行上述全景图片展示及调整方法的步骤。
为实现上述目的，本发明还提供一种存储有计算机可读指令的存储介质， 所述计算机可读指令被一个或多个处理器执行时，使得一个或多个处理器执行 上述全景图片展示及调整方法的步骤。
本发明提供的全景图片展示及调整方法，通过记录移动设备的初始姿态， 并以此生成带抵消初始姿态的新四元素，在对全景图片视角进行控制，达到无 论移动设备处于何种姿态，全景图片的初始展示方向始终为正前方。本发明还 通过将滑动与点击动作进行区分，将滑动动作转换为四元数，与移动设备姿态 进行叠加运算，从而达到移动设备姿态结合用户的手指滑动来调整全景图视角 的目的。
附图说明
通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领 域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并 不认为是对本发明的限制。
图1为本发明一个实施例中全景图片展示及调整方法的流程图；
图2为本发明一个实施例中全景图片展示及调整装置的结构图。
具体实施方式
为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实 施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅 仅用以解释本发明，并不用于限定本发明。
本技术领域技术人员可以理解，除非特意声明，这里使用的单数形式“一”、 “一个”、“所述”和“该”也可包括复数形式。应该进一步理解的是，本发 明的说明书中使用的措辞“包括”是指存在所述特征、整数、步骤、操作、元 件和/或组件，但是并不排除存在或添加一个或多个其他特征、整数、步骤、操 作、元件、组件和/或它们的组。
参照图1，为本发明一个实施例中的全景图片展示及调整方法的流程图，如 图1所示，一种全景图片展示及调整方法，包括以下步骤：
步骤S1，计算目标四元数：记录移动设备的初始姿态，获取用户提供的图 片路径和元素标识，根据图片路径和元素标识获取到目标全景图片及用于展示 的初始四元素，根据初始姿态对初始四元素进行计算，得到目标四元数。
本步骤可以通过调用预设的模块如eyexpoVrInit完成初始化，通过初始化 获取用户传入的四个参数，分别是vr图片路径、vr的元素标识(元素ID)、 点击的回调函数(可选)、回调函数的参数(可选)。其中点击的回调函数(可 选)、回调函数的参数(可选)与本步骤无关，在此不作进一步描述。根据vr 图片路径和vr的元素标识，可以获取到将要展示的目标全景图片，以及用于展 示vr图片的初始四元数。同时，还获取到此时移动设备的初始姿态，移动设备 的初始姿态在获取及记录时，采用如下方式：
在一个实施例中步骤S1，包括：
步骤S101，在全景图片展示对象内预注册事件监听器。
全景图片展示对象可以是web网页，也可以是移动终端的APP(应用软件)， 可以在展示对象内预先注册deviceorientation事件监听器。
步骤S102，在展示对象首次加载全景图片时，通过事件监听器的响应中获 取初始姿态。
全景图所在的web网页加载，或APP内有全景图页面首次加载时，从响应 事件中获取到设备初始姿态参数alpha、beta、gamma值，alpha、beta、gamma 这三个值即为移动设备的初始姿态，对初始姿态alpha、beta、gamma进行记录， 用于后续的目标四元素的计算中。
在得到了移动设备的初始姿态后，根据初始姿态，计算目标四元素：
步骤S103，将初始姿态分别记为alpha、beta、gamma，初始四元素记为(0, 0,0,1)，则：
四元数Qbeta＝(0,0,0,1)；
四元数Qalpha＝(0,sin(alpha/2),0,cos(alpha/2)；
四元数Qgamma＝(0,sin(gamma/2),0,cos(gamma/2))；
将Qbeta、Qalpha、Qgamma依次与(0,0,0,1)左乘，得到目标四元素。
本实施例通过上述计算后，以移动设备的初始姿态为基础，生成带抵消初 始姿态的目标四元素，为后续控制全景图片视角提供准确可靠的姿态数据。
步骤S2，展示全景图片：将目标四元数作为目标全景图片展示的旋转参数， 对目标全景图片进行展示。
本步骤在进行展示时，可以通过绘图协议(WebGL)将目标全景图片铺在3D 球体上，通过目标四元数作为旋转参数来调整球心位置观察者的姿态，从而实 现目标全景图片视角的调整。
将进初始姿态抵消计算后得到的目标四元素作为旋转参数，对目标全景图 片进行调整展示后，无论移动设备，如手机、平板电脑处于何种姿态，初始方 向始终为正前方，大大提高了用户的体验感受。
步骤S3，更新目标四元数：根据预设的事件监听器侦测用户行为，若侦测 到用户触发的是滑动动作，则根据滑动动作的滑动像素值转换为四元素，将滑 动像素值转换的四元素与初始姿态进行叠加运算，得到新的目标四元素。
用户行为包括用户手指滑动行为或点击行为，本步骤根据事件监听器来侦 测用户行为，当滑动距离和时长在一定范围内时，则认为用户是进行了点击动 作，否则认为用户是进行了滑动动作，从而将滑动与点击进行区分开，并可以 触发不同的响应事件。当用户进行了滑动行为时，本本步骤与移动设备姿态进 行叠加运算，从而达到移动设备姿态结合手指滑动来调整全景图视角的目的。
在一个实施例中，步骤S3，包括：
步骤S301，在全景图片展示对象内预注册触摸开始事件监听器、接触点改 变事件监听器、触摸结束事件监听器、鼠标按下事件监听器、鼠标移动事件监 听器、鼠标松开事件监听器。
在全景图展示对象内注册touchstart、touchmove、touchend、mousedown、mousemove、mouseup事件监听器。
步骤S302，当触发触摸开始事件监听器或鼠标按下事件监听器时，记录当 前点击的第一坐标值及第一时间。
当用户手指或者鼠标按下时，会触发touchstart或者mousedown事件，则 记录此时用户点击的坐标值及时间，记为第一坐标值及第一时间。
步骤S303，到触发接触点改变事件监听器或鼠标移动事件监听器时，记录 当前点击的第二坐标值及第二时间，将第二坐标值减去第一坐标值得到滑动距 离，将第二时间减去第一时间得到滑动时长。
当用户手指或者鼠标滑动，会触发touchmove或者mousemove事件，记录 此时用户点击的坐标值及时间，记做第二坐标值及第二时间，并与之前步骤S302 得到的第一坐标值及第一时间进行相减，可得到用户滑动距离和滑动时长。
步骤S304，当触发触摸结束事件监听器或鼠标松开事件监听器时，记录当 前点击的第三坐标值及第三时间，将第三坐标值减去第一坐标值得到滑动总距 离，将第三时间减去第一时间得到滑动总时长。
当用户手指离开，或者鼠标松开时，会触发touchend或者mouseup事件， 记录此时用户点击的坐标值及时间，记做第三坐标值及第三时间，并与 touchstart或者mousedown触发时的第一坐标值及第一时间相减，可得到用户 滑动总距离和滑动总时长。
步骤S304，若滑动距离或滑动总距离不小于预设的距离阈值，且滑动时长 或滑动总时长不小于预设的时长阈值时，侦测到用户触发的是滑动动作。
本步骤对用户的侦测为实时进行，实时判断滑动距离或滑动总距离是否不 小于预设的距离阈值，滑动时长或滑动总时长是否不小于预设的时长阈值。若 用户只进行一次滑动动作，则滑动距离等于滑动总距离，滑动时长等于滑动总 时长。本步骤的距离阈值可以是2像素，时长阈值可以是300毫秒。若滑动距 离或滑动总距离大于等于2像素且滑动时长或滑动总时长大于等于300毫秒， 则认为此时用户行为是滑动动作，否则认为用户行为是点击动作。点击动作触 发回调等其他业务逻辑，由于不涉及本发明的技术，此处不做进一步阐述。
本实施例通过上述多个事件监听器的部署，对用户行为的实时侦测和判断 过程，能及时确定出用户行为是否为滑动行为。
在一个实施例中，步骤S3，还包括：
步骤S311，若侦测到用户触发的是滑动动作，则获取当前点击处在x、y轴 方向滑动像素值，记为Xdistance、Ydistance，将初始姿态分别记为alpha、 beta、gamma，则通过如下公式转换得到四元素：
Δalpha＝Xdistance*0.005；
Δbeta＝Ydistance*0.003；
四元数Qbeta＝(sin(Δbeta/2),0,0,cos(Δbeta/2))；
四元数Qalpha＝(0,sin((Δalpha)/2),0,cos((Δalpha)/2)；
四元数Qgamma＝(0,sin(gamma/2),0,cos(gamma/2))；
将Qbeta、Qalpha、Qgamma依次与四元数(0,0,0,1)左乘，得到滑动像 素值转换的四元素。
本步骤的当前点击为滑动动作最终停留处，x、y轴方向是预先确定好的， 比如展示对象的展示区域的左上角作为原点，横向为x轴方向，纵向为y轴方 向。用户滑动最终停留处的坐标值即为滑动像素值。
步骤S312，将当前滑动像素值转换的四元素记为alpha、beta、gamma，将 初始姿态中的beta值记为beta0，则通过如下公式进行叠加运算：
Δalpha＝Xdistance*0.005；
Δbeta＝Ydistance*0.003+(beta–beta0)；
四元数Qbeta＝(sin(Δbeta/2),0,0,cos(Δbeta/2))；
四元数Qalpha＝(0,sin((alpha+Δalpha)/2),0,cos((alpha+Δalpha)/2)；
四元数Qgamma＝(0,sin(gamma/2),0,cos(gamma/2))；
将Qbeta、Qalpha、Qgamma依次与四元数(0,0,0,1)左乘，从而得到新 的目标四元素。
本实施例新的目标四元数是以移动设备初始姿态为基础，将当前滑动像素 值通过上述计算公式叠加运算得到，从而达到移动设备姿态结合手指滑动来调 整全景图视角的目的。
步骤S4，刷新全景图片：将新的目标四元素作为目标全景图片展示的旋转 参数，对目标全景图片进行刷新展示。
本步骤的展示方式与步骤S2相似，不同的是目标四元数是通过步骤S3计 算获得的新的目标四元数，最终得到可根据用户的滑动动作，可实时调整的全 景图片。
在一个实施例中，还包括：
当全景图片展示对象的区域尺寸发生变化时，读取展示控件的尺寸，根据 尺寸将调整绘图协议的摄像机宽高比；将绘图协议的渲染区域设置为与尺寸一 致；通过绘图协议将目标全景图片进行刷新，更新目标全景图片的尺寸，对更 新后的目标全景图片进行展示。
当全景图展示区域尺寸发生变化时，例如网页拉伸了或手机发生水平/垂直 旋转，而全景图片展示区域又与整个页面的宽/高相关联。此时需要更新全景图 展示尺寸，否则全景图展示不全或者有空白。
本实施例通过自动读取用于展示全景图控件的尺寸、调整WebGL的camera 宽高比、设置渲染区域与新尺寸一致、最后刷新场景和camera的过程，实现了 根据景图展示区域自动更新调整全景图片尺寸的目的。
在一个实施例中，本发明具体使用时，可以通过导入three.min.js和eyexpoErKit.js两个文件，调用eyexpoVrInit完成初始化，调用 eyexpoUpdateVrSize调整尺寸，具体过程可以为：
1)引入eyexpoErKit.js和three.min.js这两个文件：
<script type＝"text/javascript"src＝"./three.min.js"></script>
<script type＝"text/javascript"src＝"./eyexpoErKit.js"></script>
2)预先为展示全景图片的页面元素设置ID，例如下面的id＝"ErContainer"：
<div style＝"width:50rem；height:50rem；margin:3rem 3rem" id＝"ErContainer"></div>
3)调用eyexpoVrInit并传入全景图片链接，展示全景图片的元素ID，(按 需)设置回调函数，(按需)设置回调函数的参数值：
Figure BDA0002322307800000111
Figure BDA0002322307800000121
4)按需更新全景图展示尺寸，当尺寸全景图片展示区域发生变化时，调用eyexpoUpdateVrSize函数并传入用于展示全景图的元素ID，如下：
eyexpoUpdateVrSize('ErContainer')
本实施例全景图片展示及调整方法，使得全景图片基于移动设备姿态进行 展示时，初始视角能保证始终为正前方，且能通过移动设备姿态以及手指拖动 来调整全景图视角。
在一个实施例中，提出了一种全景图片展示及调整装置，如图2所示，该 装置包括：
计算目标四元数模块，用于记录移动设备的初始姿态，获取用户提供的图 片路径和元素标识，根据图片路径和元素标识获取到目标全景图片及用于展示 的初始四元素，根据初始姿态对初始四元素进行计算，得到目标四元数；
展示模块，用于将目标四元数作为目标全景图片展示的旋转参数，对目标 全景图片进行展示；
更新目标四元数模块，用于根据预设的事件监听器侦测用户行为，若侦测 到用户触发的是滑动动作，则根据滑动动作的滑动像素值转换为四元素，将滑 动像素值转换的四元素与初始姿态进行叠加运算，得到新的目标四元素；
刷新模块，用于将新的目标四元素作为目标全景图片展示的旋转参数，对 目标全景图片进行刷新展示。
在一个实施例中，提出了一种计算机设备，包括存储器和处理器，存储器 中存储有计算机可读指令，计算机可读指令被处理器执行时，使得处理器执行 计算机可读指令时实现上述各实施例的全景图片展示及调整方法中的步骤。
在一个实施例中，提出了一种存储有计算机可读指令的存储介质，计算机 可读指令被一个或多个处理器执行时，使得一个或多个处理器执行上述各实施 例的全景图片展示及调整方法中的步骤。其中，存储介质可以易失性存储介质， 存储介质也可以为非易失性存储介质。
本领域普通技术人员可以理解上述实施例的各种方法中的全部或部分步骤 是可以通过程序来指令相关的硬件来完成，该程序可以存储于一计算机可读存 储介质中，存储介质可以包括：只读存储器(ROM，Read Only Memory)、随 机存取存储器(RAM，RandomAccess Memory)、磁盘或光盘等。
以上所述实施例的各技术特征可以进行任意的组合，为使描述简洁，未对 上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技 术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。
以上所述实施例仅表达了本发明一些示例性实施例，其描述较为具体和详 细，但并不能因此而理解为对本发明专利范围的限制。应当指出的是，对于本 领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变 形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以 所附权利要求为准。

Claims (10)

1.一种全景图片展示及调整方法，其特征在于，包括：
记录移动设备的初始姿态，获取用户提供的图片路径和元素标识，根据所述图片路径和所述元素标识获取到目标全景图片及用于展示的初始四元素，根据所述初始姿态对所述初始四元素进行计算，得到目标四元数；
将所述目标四元数作为所述目标全景图片展示的旋转参数，对所述目标全景图片进行展示；
根据预设的事件监听器侦测用户行为，若侦测到用户触发的是滑动动作，则根据所述滑动动作的滑动像素值转换为四元素，将滑动像素值转换的四元素与所述初始姿态进行叠加运算，得到新的目标四元素；
将新的所述目标四元素作为所述目标全景图片展示的旋转参数，对所述目标全景图片进行刷新展示。
2.根据权利要求1所述的全景图片展示及调整方法，其特征在于，所述记录移动设备的初始姿态，包括：
在全景图片展示对象内预注册事件监听器；
在所述展示对象首次加载全景图片时，通过所述事件监听器的响应中获取初始姿态。
3.根据权利要求1或2所述的全景图片展示及调整方法，其特征在于，所述根据所述初始姿态对所述初始四元素进行计算，得到目标四元数，包括：
将所述初始姿态分别记为alpha、beta、gamma，初始四元素记为(0,0,0,1)，则：
四元数Qbeta＝(0,0,0,1)；
四元数Qalpha＝(0,sin(alpha/2),0,cos(alpha/2)；
四元数Qgamma＝(0,sin(gamma/2),0,cos(gamma/2))；
将Qbeta、Qalpha、Qgamma依次与(0,0,0,1)左乘，得到目标四元素。
4.根据权利要求1所述的全景图片展示及调整方法，其特征在于，所述根据预设的事件监听器侦测用户行为，包括：
在全景图片展示对象内预注册触摸开始事件监听器、接触点改变事件监听器、触摸结束事件监听器、鼠标按下事件监听器、鼠标移动事件监听器、鼠标松开事件监听器；
当触发所述触摸开始事件监听器或所述鼠标按下事件监听器时，记录当前点击的第一坐标值及第一时间；
到触发所述接触点改变事件监听器或所述鼠标移动事件监听器时，记录当前点击的第二坐标值及第二时间，将所述第二坐标值减去所述第一坐标值得到滑动距离，将所述第二时间减去所述第一时间得到滑动时长；
当触发所述触摸结束事件监听器或所述鼠标松开事件监听器时，记录当前点击的第三坐标值及第三时间，将所述第三坐标值减去所述第一坐标值得到滑动总距离，将所述第三时间减去所述第一时间得到滑动总时长；
若所述滑动距离或所述滑动总距离不小于预设的距离阈值，且所述滑动时长或所述滑动总时长不小于预设的时长阈值时，侦测到用户触发的是滑动动作。
5.根据权利要求1所述的全景图片展示及调整方法，其特征在于，所述若侦测到用户触发的是滑动动作，则根据所述滑动动作的滑动像素值转换为四元素包括：
若侦测到用户触发的是滑动动作，则获取当前点击处在x、y轴方向滑动像素值，记为Xdistance、Ydistance，将所述初始姿态分别记为alpha、beta、gamma，则通过如下公式转换得到四元素：
Δalpha＝Xdistance*0.005；
Δbeta＝Ydistance*0.003；
四元数Qbeta＝(sin(Δbeta/2),0,0,cos(Δbeta/2))；
四元数Qalpha＝(0,sin((Δalpha)/2),0,cos((Δalpha)/2)；
四元数Qgamma＝(0,sin(gamma/2),0,cos(gamma/2))；
将Qbeta、Qalpha、Qgamma依次与四元数(0,0,0,1)左乘，得到滑动像素值转换的四元素。
6.根据权利要求1、4或5所述的全景图片展示及调整方法，其特征在于，所述将滑动像素值转换的四元素与所述初始姿态进行叠加运算，得到新的目标四元素，包括：
若侦测到用户触发的是滑动动作，则获取当前点击处在x、y轴方向滑动像素值，记为Xdistance、Ydistance，将当前滑动像素值转换的四元素记为alpha、beta、gamma，将所述初始姿态中的beta值记为beta0，则通过如下公式进行叠加运算：
Δalpha＝Xdistance*0.005；
Δbeta＝Ydistance*0.003+(beta–beta0)；
四元数Qbeta＝(sin(Δbeta/2),0,0,cos(Δbeta/2))；
四元数Qalpha＝(0,sin((alpha+Δalpha)/2),0,cos((alpha+Δalpha)/2)；
四元数Qgamma＝(0,sin(gamma/2),0,cos(gamma/2))；
将Qbeta、Qalpha、Qgamma依次与四元数(0,0,0,1)左乘，从而得到新的目标四元素。
7.根据权利要求1所述的全景图片展示及调整方法，其特征在于，还包括：
当全景图片展示对象的区域尺寸发生变化时，读取展示控件的尺寸，根据所述尺寸将调整绘图协议的摄像机宽高比；
将所述绘图协议的渲染区域设置为与所述尺寸一致；
通过绘图协议将所述目标全景图片进行刷新，更新所述目标全景图片的尺寸，对更新后的所述目标全景图片进行展示。
8.一种全景图片展示及调整装置，其特征在于，所述装置包括：
计算目标四元数模块，用于记录移动设备的初始姿态，获取用户提供的图片路径和元素标识，根据所述图片路径和所述元素标识获取到目标全景图片及用于展示的初始四元素，根据所述初始姿态对所述初始四元素进行计算，得到目标四元数；
展示模块，用于将所述目标四元数作为所述目标全景图片展示的旋转参数，对所述目标全景图片进行展示；
更新目标四元数模块，用于根据预设的事件监听器侦测用户行为，若侦测到用户触发的是滑动动作，则根据所述滑动动作的滑动像素值转换为四元素，将滑动像素值转换的四元素与所述初始姿态进行叠加运算，得到新的目标四元素；
刷新模块，用于将新的所述目标四元素作为所述目标全景图片展示的旋转参数，对所述目标全景图片进行刷新展示。
9.一种计算机设备，其特征在于，包括存储器和处理器，所述存储器中存储有计算机可读指令，所述计算机可读指令被所述处理器执行时，使得所述处理器执行如权利要求1至7中任一项权利要求所述全景图片展示及调整方法的步骤。
10.一种存储有计算机可读指令的存储介质，其特征在于，所述计算机可读指令被一个或多个处理器执行时，使得一个或多个处理器执行如权利要求1至7中任一项权利要求所述全景图片展示及调整方法的步骤。
CN201911302908.7A 2019-12-17 2019-12-17 全景图片展示及调整方法、系统、设备和存储介质 Pending CN112015316A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201911302908.7A CN112015316A (zh) 2019-12-17 2019-12-17 全景图片展示及调整方法、系统、设备和存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201911302908.7A CN112015316A (zh) 2019-12-17 2019-12-17 全景图片展示及调整方法、系统、设备和存储介质

Publications (1)

Publication Number Publication Date
CN112015316A true CN112015316A (zh) 2020-12-01

Family

ID=73506473

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201911302908.7A Pending CN112015316A (zh) 2019-12-17 2019-12-17 全景图片展示及调整方法、系统、设备和存储介质

Country Status (1)

Country Link
CN (1) CN112015316A (zh)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114913277A (zh) * 2022-05-30 2022-08-16 浙江浩瀚能源科技有限公司 一种物体立体交互展示方法、装置、设备及介质
CN116934857A (zh) * 2023-07-17 2023-10-24 北京理工大学 一种基于全景图片的视觉定位方法、装置、设备及介质

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114913277A (zh) * 2022-05-30 2022-08-16 浙江浩瀚能源科技有限公司 一种物体立体交互展示方法、装置、设备及介质
CN116934857A (zh) * 2023-07-17 2023-10-24 北京理工大学 一种基于全景图片的视觉定位方法、装置、设备及介质

Similar Documents

Publication Publication Date Title
CN110215690B (zh) 游戏场景中的视角切换方法、装置及电子设备
CN107888845B (zh) 一种视频图像处理方法、装置及终端
CN105229720B (zh) 显示控制装置、显示控制方法以及记录介质
JP2020530631A (ja) インタラクション位置決定方法、システム、記憶媒体、およびスマートデバイス
US9865033B1 (en) Motion-based image views
US20150215532A1 (en) Panoramic image capture
US10209797B2 (en) Large-size touch apparatus having depth camera device
US11880999B2 (en) Personalized scene image processing method, apparatus and storage medium
CN112348968B (zh) 增强现实场景下的展示方法、装置、电子设备及存储介质
US20120236180A1 (en) Image adjustment method and electronics system using the same
CN111178191A (zh) 信息播放方法、装置、计算机可读存储介质及电子设备
US9509733B2 (en) Program, communication apparatus and control method
WO2019059020A1 (ja) 制御装置、制御方法、及びプログラム
CN109743892A (zh) 虚拟现实内容的显示方法和装置
CN111527468A (zh) 一种隔空交互方法、装置和设备
JP5460793B2 (ja) 表示装置、表示方法、テレビジョン受信機及び表示制御装置
CN112015316A (zh) 全景图片展示及调整方法、系统、设备和存储介质
JP2012238293A (ja) 入力装置
CN114175630A (zh) 利用注视点网格渲染沉浸式视频内容的方法、系统和介质
US20180189928A1 (en) Method and apparatus for determining and varying the panning speed of an image based on saliency
CN105678696B (zh) 一种信息处理方法及电子设备
WO2011096571A1 (ja) 入力装置
JP2019102941A (ja) 画像処理装置、画像処理装置の制御方法
WO2018130909A2 (en) Images with virtual reality backgrounds
CN109547678B (zh) 一种处理方法、装置、设备及可读存储介质

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination