本发明专利技术公开了一种元素渲染方法，包括：获取待拖拽的目标元素的初始元素坐标，将目标元素的横向速度和纵向速度进行初始化；将初始元素坐标和元素速度初始化结果挂载至预创建的惯性实例对象，并将目标元素的状态置为拖拽中；根据拖动过程中实时记录的鼠标位置和对应的第一拖动时间差计算鼠标速度；根据拖动过程中实时记录的鼠标旋转角度和对应的第二拖动时间差计算鼠标旋转角速度；结合鼠标速度、鼠标旋转角速度及惯性实例对象显示的鼠标与目标元素的相对速度和相对旋转角速度对目标元素进行位置渲染。本发明专利技术实现了拖动目标元素时创建过渡动画，使得拖拽过程更加自然，符合人的直觉。本发明专利技术还公开了一种装置、设备及存储介质，具有相应技术效果。具有相应技术效果。具有相应技术效果。
【技术实现步骤摘要】
一种元素渲染方法、装置、设备及计算机可读存储介质
[0001]本专利技术涉及渲染
，特别是涉及一种元素渲染方法、装置、设备及计算机可读存储介质。
技术介绍
[0002]近年来，可视化越来越流行，许多报刊杂志、门户网站、新闻、媒体都大量使用可视化技术，使得复杂的数据和文字变得十分容易理解。拖拽是一种很常见的交互方式，在各种平台上都随处可见。在移动端、PC端、游戏主机等设备的界面上，拖拽已然成为人机交互的一种不可或缺的形式。
[0003]HTML5标准原生支持拖放(Drag and Drop)特性，它允许用户抓取任何元素并拖入不同的位置，大多数web应用中的拖动交互都是基于这个特性。这种元素渲染方法的不足之处在于动画较为生硬，元素从起始位置被拖动到目标位置的过程中缺乏过渡，不符合物理规律和人的直觉。
[0004]综上所述，如何有效地解决现有的元素渲染方法动画较为生硬，元素从起始位置被拖动到目标位置的过程中缺乏过渡，不符合物理规律和人的直觉等问题，是目前本领域技术人员急需解决的问题。
技术实现思路
[0005]本专利技术的目的是提供一种元素渲染方法，该方法实现了拖动目标元素时创建过渡动画，使得拖拽过程更加自然，符合人的直觉；本专利技术的另一目的是提供一种元素渲染装置、设备及计算机可读存储介质。
[0006]为解决上述技术问题，本专利技术提供如下技术方案：
[0007]一种元素渲染方法，包括：
[0008]获取待拖拽的目标元素在笛卡尔坐标系中的初始元素坐标，并将所述目标元素的横向速度和纵向速度进行初始化，得到元素速度初始化结果；
[0009]将所述初始元素坐标和所述元素速度初始化结果挂载至预创建的惯性实例对象，并将所述目标元素的状态置为拖拽中；
[0010]根据拖动过程中实时记录的鼠标位置和对应的第一拖动时间差计算鼠标速度；
[0011]根据拖动过程中实时记录的鼠标旋转角度和对应的第二拖动时间差计算鼠标旋转角速度；
[0012]结合所述鼠标速度、所述鼠标旋转角速度及所述惯性实例对象显示的鼠标与所述目标元素的相对速度和相对旋转角速度对所述目标元素进行位置渲染。
[0013]在本专利技术的一种具体实施方式中，在获取待拖拽的目标元素在笛卡尔坐标系中的初始元素坐标之前，还包括：
[0014]通过D3.js可视化工具中的d3
‑
selection模块选中所述目标元素；
[0015]通过所述D3.js可视化工具中的d3
‑
drag模块创建目标拖拽事件，并将所述目标拖
拽事件绑定至所述目标元素；
[0016]通过所述D3.js可视化工具中的d3
‑
timer定时器管理所述目标元素的动画内容。
[0017]在本专利技术的一种具体实施方式中，通过D3.js可视化工具中的d3
‑
selection模块选中所述目标元素之前，还包括：
[0018]通过所述d3
‑
selection模块将原选中元素释放；
[0019]将所述原选中元素与所述d3
‑
drag模块绑定至所述原选中元素的原拖拽事件解绑；
[0020]将原用于管理所述原选中元素的动画内容的所述d3
‑
timer定时器设置为停止状态。
[0021]在本专利技术的一种具体实施方式中，将所述目标元素的横向速度和纵向速度进行初始化，包括：
[0022]将所述目标元素的横向速度和纵向速度均初始化为0。
[0023]在本专利技术的一种具体实施方式中，将所述初始元素坐标和所述元素速度初始化结果挂载至预创建的惯性实例对象，包括：
[0024]将所述初始元素坐标和所述元素速度初始化结果通过数组方式挂载至预创建的惯性实例对象。
[0025]在本专利技术的一种具体实施方式中，在结合所述鼠标速度、所述鼠标旋转角速度及所述惯性实例对象显示的鼠标与所述目标元素的相对速度和相对旋转角速度对所述目标元素进行位置渲染之后，还包括：
[0026]判断是否达到预设停止边界条件；
[0027]若是，则清空拖拽状态；
[0028]若否，则重复执行所述根据拖动过程中实时记录的鼠标位置和对应的第一拖动时间差计算鼠标速度的步骤。
[0029]在本专利技术的一种具体实施方式中，结合所述鼠标速度、所述鼠标旋转角速度及所述惯性实例对象显示的鼠标与所述目标元素的相对速度和相对旋转角速度对所述目标元素进行位置渲染，包括：
[0030]结合所述鼠标速度、所述鼠标旋转角速度及所述惯性实例对象显示的鼠标与所述目标元素的相对速度和相对旋转角速度，通过从0到1的补间参数重复调用渲染方法对所述目标元素进行位置渲染。
[0031]一种元素渲染装置，包括：
[0032]元素初始化单元，用于获取待拖拽的目标元素在笛卡尔坐标系中的初始元素坐标，并将所述目标元素的横向速度和纵向速度进行初始化，得到元素速度初始化结果；
[0033]挂载单元，用于将所述初始元素坐标和所述元素速度初始化结果挂载至预创建的惯性实例对象，并将所述目标元素的状态置为拖拽中；
[0034]鼠标速度计算单元，用于根据拖动过程中实时记录的鼠标位置和对应的第一拖动时间差计算鼠标速度；
[0035]鼠标旋转角速度计算单元，用于根据拖动过程中实时记录的鼠标旋转角度和对应的第二拖动时间差计算鼠标旋转角速度；
[0036]元素渲染单元，用于结合所述鼠标速度、鼠标旋转角速度及所述惯性实例对象显
示的鼠标与所述目标元素的相对速度和相对旋转角速度对所述目标元素进行位置渲染。
[0037]一种元素渲染设备，包括：
[0038]存储器，用于存储计算机程序；
[0039]处理器，用于执行所述计算机程序时实现如前所述元素渲染方法的步骤。
[0040]一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如前所述元素渲染方法的步骤。
[0041]本专利技术所提供的元素渲染方法，获取待拖拽的目标元素在笛卡尔坐标系中的初始元素坐标，并将目标元素的横向速度和纵向速度进行初始化，得到元素速度初始化结果；将初始元素坐标和元素速度初始化结果挂载至预创建的惯性实例对象，并将目标元素的状态置为拖拽中；根据拖动过程中实时记录的鼠标位置和对应的第一拖动时间差计算鼠标速度；根据拖动过程中实时记录的鼠标旋转角度和对应的第二拖动时间差计算鼠标旋转角速度；结合鼠标速度、鼠标旋转角速度及惯性实例对象显示的鼠标与目标元素的相对速度和相对旋转角速度对目标元素进行位置渲染。
[0042]由上述技术方案可知，通过拖动过程中实时记录的鼠标位置和对应的第一拖动时间差计算鼠标速度，并根据拖动过程中实时记录的鼠标旋转角度和对应的第二拖动时间差计算鼠标旋转角速度，结合鼠标速度、鼠标旋转角速度及预创建的惯性实例对象显示的鼠标与目标元素的相对速本文档来自技高网...
【技术保护点】
【技术特征摘要】
1.一种元素渲染方法，其特征在于，包括：获取待拖拽的目标元素在笛卡尔坐标系中的初始元素坐标，并将所述目标元素的横向速度和纵向速度进行初始化，得到元素速度初始化结果；将所述初始元素坐标和所述元素速度初始化结果挂载至预创建的惯性实例对象，并将所述目标元素的状态置为拖拽中；根据拖动过程中实时记录的鼠标位置和对应的第一拖动时间差计算鼠标速度；根据拖动过程中实时记录的鼠标旋转角度和对应的第二拖动时间差计算鼠标旋转角速度；结合所述鼠标速度、所述鼠标旋转角速度及所述惯性实例对象显示的鼠标与所述目标元素的相对速度和相对旋转角速度对所述目标元素进行位置渲染。2.根据权利要求1所述的元素渲染方法，其特征在于，在获取待拖拽的目标元素在笛卡尔坐标系中的初始元素坐标之前，还包括：通过D3.js可视化工具中的d3
‑
selection模块选中所述目标元素；通过所述D3.js可视化工具中的d3
‑
drag模块创建目标拖拽事件，并将所述目标拖拽事件绑定至所述目标元素；通过所述D3.js可视化工具中的d3
‑
timer定时器管理所述目标元素的动画内容。3.根据权利要求2所述的元素渲染方法，其特征在于，在通过D3.js可视化工具中的d3
‑
selection模块选中所述目标元素之前，还包括：通过所述d3
‑
selection模块将原选中元素释放；将所述原选中元素与所述d3
‑
drag模块绑定至所述原选中元素的原拖拽事件解绑；将原用于管理所述原选中元素的动画内容的所述d3
‑
timer定时器设置为停止状态。4.根据权利要求1所述的元素渲染方法，其特征在于，将所述目标元素的横向速度和纵向速度进行初始化，包括：将所述目标元素的横向速度和纵向速度均初始化为0。5.根据权利要求1所述的元素渲染方法，其特征在于，将所述初始元素坐标和所述元素速度初始化结果挂载至预创建的惯性实例对象，包括：将所述初始元素坐标...
【专利技术属性】
技术研发人员：龙文洁，吴小珍，
申请(专利权)人：杭州安恒信息安全技术有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。