用户轨迹绘制方法、装置、计算机设备和存储介质制造方法及图纸

本申请涉及一种用户轨迹绘制方法、装置、计算机设备和存储介质。所述方法包括：通过JavaScript处理事件分发，利用Canvas在画布上绘制全等级轨迹，全等级轨迹包括多个等级节点和用于连接各等级节点的全等级轨迹圆弧；根据用户成长值计算用户节点的节点坐标，根据全等级轨迹圆弧的起点坐标和用户节点的节点坐标计算用户轨迹弧度；根据用户轨迹弧度，结合JavaScript的requestAnimationFrame函数绘制动态的用户轨迹。本申请实施例能够利用Javascript事件分发和Canvas2D绘制技术实现复杂多变的动画效果。复杂多变的动画效果。复杂多变的动画效果。

【技术实现步骤摘要】
用户轨迹绘制方法、装置、计算机设备和存储介质


[0001]本申请涉及计算机领域，特别是涉及一种用户轨迹绘制方法、装置、计算机设备和存储介质。

技术介绍

[0002]目前，事件分发由canvas处理，绘制的内容的事件需要自己做处理，即canvas没有提供为其内部元素添加事件监听的方法，比如要使Canvas内的元素能够响应事件，需要通过获取点击元素的坐标范围监听并对其内元素做出改变，并且由于Canvas的绘制是静态的，因而无法实现循环重绘，上述原因导致使用canvas不能绘制复杂多变的动画，如自定义曲线，不规则多边形如圆角矩形，进而满足不了用户需求。

技术实现思路

[0003]本申请针对上述不足或缺点，提供了一种用户轨迹绘制方法、装置、计算机设备和存储介质，本申请实施例能够利用Javascript事件分发和Canvas2D绘制技术实现复杂多变的动画效果。
[0004]本申请根据第一方面提供了一种用户轨迹绘制方法，在一个实施例中，该方法包括：
[0005]通过JavaScript处理事件分发，利用Canvas在画布上绘制全等级轨迹，全等级轨迹包括多个等级节点和用于连接各等级节点的全等级轨迹圆弧；
[0006]根据用户成长值计算用户节点的节点坐标，根据全等级轨迹圆弧的起点坐标和用户节点的节点坐标计算用户轨迹弧度；
[0007]根据用户轨迹弧度，结合JavaScript的requestAnimationFrame函数绘制动态的用户轨迹。
[0008]在一个实施例中，利用Canvas在画布上绘制全等级轨迹，包括：
[0009]使用Canvas绘制画布；
[0010]确定圆上各等级节点的横坐标、圆心坐标和圆半径，根据各等级节点的横坐标、圆心坐标和圆半径确定各等级节点的纵坐标；
[0011]在画布上绘制各等级节点；
[0012]根据该多个等级节点中的起始等级节点的节点坐标和结尾等级节点的节点坐标确定两节点之间的弧度；
[0013]根据圆心坐标、圆半径和两节点之间的弧度，绘制圆弧连接各等级节点。
[0014]在一个实施例中，使用Canvas绘制画布，包括：
[0015]获取window变量中的devicePixelRatio属性信息；
[0016]获取canvas context中的webkitBackingStorePixelRatio属性信息；
[0017]根据devicePixelRatio属性信息和所webkitBackingStorePixelRatio属性信息计算得到缩放比例；
[0018]根据缩放比例绘制画布。
[0019]在一个实施例中，根据用户轨迹弧度，结合JavaScript的requestAnimationFrame函数绘制动态的用户轨迹，包括：
[0020]将用户轨迹弧度分成N份弧度；
[0021]通过requestAnimationFrame函数控制在下一次重绘之前执行动态弧度逻辑处理函数，以依次绘制N份弧度对应的轨迹。
[0022]在一个实施例中，通过requestAnimationFrame函数控制在下一次重绘之前执行动态弧度逻辑处理函数，以依次绘制N份弧度对应的轨迹，包括：
[0023]将动态弧度逻辑处理函数定义为requestAnimationFrame函数传入的回调函数，使得在下一次重绘之前执行动态弧度逻辑处理函数，以绘制第n份弧度对应的轨迹，以及判断n是否不小于N，若是，根据绘制后获得的回调唯一标识结束绘制，若否，更新n的值，并回调动态弧度逻辑处理函数。
[0024]在一个实施例中，在绘制第n份弧度对应的轨迹时，该方法还包括：
[0025]同步绘制第n份弧度对应的轨迹经过的等级节点；
[0026]判断第n份弧度对应的轨迹是否经过加速度区域；
[0027]在判定结果为是时，更新预先制定的轨迹加速度，并根据更新后的轨迹加速度绘制第n份弧度对应的轨迹。
[0028]在一个实施例中，在绘制第n份弧度对应的轨迹时，该方法还包括：
[0029]先展示预先缓存的静态绘制的背景及静态轨迹图，再绘制第n份弧度对应的轨迹。
[0030]本申请根据第二方面提供了一种用户轨迹绘制装置，在一个实施例中，该装置包括：
[0031]第一轨迹绘制模块，用于通过JavaScript处理事件分发，利用Canvas在画布上绘制全等级轨迹，全等级轨迹包括多个等级节点和用于连接各等级节点的全等级轨迹圆弧；
[0032]用户轨迹弧度计算模块，用于根据用户成长值计算用户节点的节点坐标，根据全等级轨迹圆弧的起点坐标和用户节点的节点坐标计算用户轨迹弧度；
[0033]第二轨迹绘制模块，用于根据用户轨迹弧度，结合JavaScript的requestAnimationFrame函数绘制动态的用户轨迹。
[0034]本申请根据第三方面提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行计算机程序时实现上述任一方法的实施例的步骤。
[0035]本申请根据第四方面提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现上述任一方法的实施例的步骤。
[0036]在本申请实施例中，通过JavaScript处理事件分发，利用Canvas在画布上绘制全等级轨迹，全等级轨迹包括多个等级节点和用于连接各等级节点的全等级轨迹圆弧；根据用户成长值计算用户节点的节点坐标，根据全等级轨迹圆弧的起点坐标和用户节点的节点坐标计算用户轨迹弧度；根据用户轨迹弧度，结合JavaScript的requestAnimationFrame函数绘制动态的用户轨迹，能够利用Javascript事件分发和Canvas2D绘制技术实现复杂多变的动画效果。
附图说明
[0037]图1为一个实施例中一种用户轨迹绘制方法的流程示意图；
[0038]图2为一个实施例中绘制好的全等级轨迹和用户轨迹的示意图；
[0039]图3为一个具体示例中的绘制用户轨迹的流程图；
[0040]图4为一个实施例中一种用户轨迹绘制装置的结构框图；
[0041]图5为一个实施例中计算机设备的内部结构图。
具体实施方式
[0042]为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处描述的具体实施例仅用以解释本申请，并不用于限定本申请。
[0043]本申请提供了一种用户轨迹绘制方法。在一个实施例中，该用户轨迹绘制方法包括如图1所示的步骤，下面对该方法进行详细说明。
[0044]S110：通过JavaScript处理事件分发，利用Canvas在画布上绘制全等级轨迹，全等级轨迹包括多个等级节点和用于连接各等级节点的全等级轨迹圆弧。
[0045]其中，通过JavaScript处理事本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种用户轨迹绘制方法，其特征在于，所述方法包括：通过JavaScri pt处理事件分发，利用Canvas在画布上绘制全等级轨迹，所述全等级轨迹包括多个等级节点和用于连接各所述等级节点的全等级轨迹圆弧；根据用户成长值计算用户节点的节点坐标，根据所述全等级轨迹圆弧的起点坐标和所述用户节点的节点坐标计算用户轨迹弧度；根据所述用户轨迹弧度，结合JavaScript的requestAnimationFrame函数绘制动态的用户轨迹。2.如权利要求1所述的方法，其特征在于，所述利用Canvas在画布上绘制全等级轨迹，包括：使用Canvas绘制画布；确定圆上各所述等级节点的横坐标、圆心坐标和圆半径，根据各所述等级节点的横坐标、圆心坐标和圆半径确定各所述等级节点的纵坐标；在所述画布上绘制各所述等级节点；根据所述多个等级节点中的起始等级节点的节点坐标和结尾等级节点的节点坐标确定两节点之间的弧度；根据所述圆心坐标、圆半径和所述两节点之间的弧度，绘制圆弧连接各所述等级节点。3.如权利要求2所述的方法，其特征在于，所述使用Canvas绘制画布，包括：获取window变量中的devicePixelRatio属性信息；获取canvas context中的webkitBackingStorePixelRati o属性信息；根据所述devicePixelRatio属性信息和所webkitBackingStorePixelRatio属性信息计算得到缩放比例；根据所述缩放比例绘制画布。4.如权利要求1所述的方法，其特征在于，根据所述用户轨迹弧度，结合JavaScript的requestAnimati onFrame函数绘制动态的用户轨迹，包括：将用户轨迹弧度分成N份弧度；通过所述requestAnimationFrame函数控制在下一次重绘之前执行动态弧度逻辑处理函数，以依次绘制所述N份弧度对应的轨迹。5.如权利要求4所述的方法，其特征在于，所述通过所述requestAnimation...

【专利技术属性】
技术研发人员：徐协鹏，
申请(专利权)人：深圳依时货拉拉科技有限公司，
类型：发明
国别省市：