CN114610283A - 一种基于html编辑样条曲线的方法和装置 - Google Patents

Abstract

本申请实施例提供了一种基于HTML编辑样条曲线的方法、装置、电子设备及计算机可读存储介质，涉及软件开发领域。该方法包括：首先，创建基于HTML元素的第一实例和画布实例，然后创建曲线控制类对应的第二实例和曲线抽象类对应的第三实例，运行第一实例，并可以根据第二实例和第三实例进行曲线编辑操作。由于该方法是基于支持HTML的环境‑浏览器，因此只要能够支持浏览器运行的环境，都可以应用该方法进行样条曲线的编辑，由于大部分的操作系统都支持浏览器，因此该方案可以得到广泛使用，并在需要的领域中得到复用。

Description

一种基于HTML编辑样条曲线的方法和装置

技术领域

本申请涉及软件开发领域，具体而言，本申请涉及一种基于HTML编辑样条曲线的方法、装置、电子设备及计算机可读存储介质。

背景技术

样条曲线作为一种曲线形式，主要使用在动画、粒子效果的制作上，用于展示一些动画数值变化的效果，可以实现对运动的仿真效果，比如加速运动、减速运动、匀速运动、自由落体等等。

目前，市面上的样条曲线的绘制多半基于相关领域的绘图软件，该绘图软件无法其他领域进行复用。一旦其他领域也需要应用样条曲线时，则需要自行完成绘图软件的制作，然而制作一款绘图软件的过程是繁琐费时的。

因此，针对样条曲线，如何制作一款可以在不同领域复用的绘图软件则成为目前急需解决的问题。

发明内容

本申请的目的旨在能解决上述问题。

根据本申请实施例的一个方面，提供了一种基于HTML编辑样条曲线的方法，该方法包括：

创建组件类对应的第一实例，其中，第一实例包括画布实例，组件类和画布实例对应的类均继承自HTML元素；创建曲线控制类对应的第二实例，以及曲线抽象类对应的第三实例，其中，第一实例对第二实例存在引用关系，第二实例对第三实例存在引用关系；运行第一实例，并根据第二实例和第三实例进行曲线编辑操作。

在一种可能的实现方式中，创建曲线控制类对应的第二实例，以及曲线抽象类对应的第三实例，包括：

调用第一构造接口构造第二实例，其中，第一构造接口的参数包括画布实例；其中，在第一构造接口的调用过程中，包括：调用第二构造接口构造第三实例，其中，第二实例引用第三实例；构造关键帧数组，其中，关键帧数组用于存储建立的关键帧实例。

在一种可能的实现方式中，关键帧实例为基于关键帧类创建的实例对象，关键帧类至少包括以下属性：位置数据；左/右切线的信息；插值模式，其中，插值模式包括曲线模式、直线模式和常量模式；左/右切线的权重调节模式。

在一种可能的实现方式中，在第一构造接口的调用过程中，还包括：

订阅至少一项监听事件。

在一种可能的实现方式中，根据第二实例和第三实例进行曲线编辑操作，包括：

响应于接收的监听事件，调用第二实例以确定监听事件对应的事件处理接口，其中，第二实例中包含至少一个事件处理接口；若事件处理接口用于拖动任一关键帧，调用第三实例更新任一关键帧的位置数据；若事件处理接口用于处理画布中目标区域，确定目标区域中所有的关键帧，并通过调用第二实例以预设显示方式显示目标区域中的所有的关键帧；若事件处理接口用于处理画布上任一曲线线段，调用第二实例以预设显示方式显示任一曲线线段；若事件处理接口用于添加新的关键帧，通过调用第二实例将新的关键帧添加至第三实例的关键帧数组中。

在一种可能的实现方式中，在更新任一关键帧的位置数据时，还包括：

若任一关键帧的插值模式为曲线模式，通过调用第二实例的预设绘制接口重绘任一关键帧两端的曲线线段；若任一关键帧的插值模式为直线模式或者常量模式，按照直线绘制方式重绘任一关键帧两端的曲线线段。

在一种可能的实现方式中，在通过调用第二实例将新的关键帧添加至第三实例的关键帧数组中时，方法还包括：

若新的关键帧在第三实例对应的曲线的中间位置，调用第二实例的预设绘制接口绘制新的关键帧两端的曲线线段；若新的关键帧在第三实例对应的曲线的前方，确定新的关键帧的后一个关键帧，并调用第二实例的预设绘制接口绘制新的关键帧与后一个关键帧之间的曲线线段；若新的关键帧在第三实例对应的曲线的后方，确定新的关键帧的前一个关键帧，并调用第二实例的预设绘制接口绘制新的关键帧与前一个关键帧之间的曲线线段。

根据本申请实施例的另一个方面，提供了一种基于HTML编辑样条曲线的装置，该装置包括：

第一创建模块，用于创建组件类对应的第一实例，其中，第一实例包括画布实例，组件类和画布实例对应的类均继承自HTML元素；第二创建模块，用于创建曲线控制类对应的第二实例，以及曲线抽象类对应的第三实例，其中，第一实例对第二实例存在引用关系，第二实例对第三实例存在引用关系；运行模块，用于运行第一实例，并根据第二实例和第三实例进行曲线编辑操作。

根据本申请实施例的另一个方面，提供了一种电子设备，该电子设备包括存储器、处理器及存储在存储器上的计算机程序，该处理器执行计算机程序以实现本申请实施例上述一个方面所示方法的步骤。

根据本申请实施例的再一个方面，提供了一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现本申请实施例上述一个方面所示方法的步骤。

本申请实施例提供的技术方案带来的有益效果是：

本申请实施例提供了一种基于HTML编辑样条曲线的方法，该方法包括：首先，创建基于HTML元素的第一实例和画布实例，然后创建曲线控制类对应的第二实例和曲线抽象类对应的第三实例。运行第一实例，并根据第二实例和第三实例进行曲线编辑操作。由于该方法是基于支持HTML的环境-浏览器，因此只要能够支持浏览器运行的环境，都可以应用该方法进行样条曲线的编辑。由于大部分的操作系统都支持浏览器，因此该方案可以得到广泛使用，并在需要的领域中得到复用。

附图说明

为了更清楚地说明本申请实施例中的技术方案，下面将对本申请实施例描述中所需要使用的附图作简单地介绍。

图1为本申请实施例提供的一种基于HTML编辑样条曲线的方法的流程示意图；

图2为本申请实施例提供的编辑样条曲线的场景示意图；

图3为本申请实施例提供的一种基于HTML编辑样条曲线的装置的结构示意图。

具体实施方式

下面结合本申请中的附图描述本申请的实施例。应理解，下面结合附图所阐述的实施方式，是用于解释本申请实施例的技术方案的示例性描述，对本申请实施例的技术方案不构成限制。

本技术领域技术人员可以理解，除非特意声明，这里使用的单数形式“一”、“一个”、“所述”和“该”也可包括复数形式。应该进一步理解的是，本申请实施例所使用的术语“包括”以及“包含”是指相应特征可以实现为所呈现的特征、信息、数据、步骤、操作、元件和/或组件，但不排除实现为本技术领域所支持其他特征、信息、数据、步骤、操作、元件、组件和/或它们的组合等。应该理解，当我们称一个元件被“连接”或“耦接”到另一元件时，该一个元件可以直接连接或耦接到另一元件，也可以指该一个元件和另一元件通过中间元件建立连接关系。此外，这里使用的“连接”或“耦接”可以包括无线连接或无线耦接。这里使用的术语“和/或”指示该术语所限定的项目中的至少一个，例如“A和/或B”可以实现为“A”，或者实现为“B”，或者实现为“A和B”。

为使本申请的目的、技术方案和优点更加清楚，下面将结合附图对本申请实施方式作进一步地详细描述。

首先对本申请涉及的几个名词进行介绍和解释：

样条曲线：通过给定的一组控制点而得到一条平滑曲线，曲线的大致形状由这些点予以控制。在计算机图形学中，样条曲线具体是指，在一组控制点之间使用分段多项式函数计算得到数据点，由这些数据点进行插值连接而成的曲线。其中，若选取的分段多项式函数使得曲线通过每个控制点，则所得曲线称为该组控制点的插值样条曲线。其中，插值样条曲线常用语数字化绘图或指定路径。现有技术中，插值样条曲线的确定方式可以包括：自然三次样条方式、Hermite样条方式等。若选取的分段多项式函数使得部分或者全部控制点不在生成的曲线上，则所得曲线称为该组控制点的逼近样条曲线。逼近曲线一般作为设计工具来构造对象形体。现有技术中，逼近样条曲线的确定方式可以包括：Bezier样条方式、Cardinal样条方式等。

由于本申请实施例所示方案的重点在于提供一种可视化的插值曲线编辑，绘制的是插值样条曲线，因此，仅将绘制插值样条曲线的方式作为插值计算类型，例如上述自然三次样条方式、Hermite样条方式。由于该插值计算类型是现有技术中常见的绘制曲线的插值计算类型，本领域技术人员可以参考现有技术来增加相应插值计算类型。

关键帧：可以将绘制样条曲线的控制点称作关键帧，该关键帧除了包括位置信息，还包括切线信息、插值模式等。在本申请实施例中，将两个关键帧之间的连接称作连接线段或者线段。

在本申请实施例中，对样条曲线进行编辑时，上述控制点可以称作关键帧。在编辑样条曲线的画布上存在一个坐标系，每个样条曲线上的关键帧在水平方向上(即该坐标系的X轴方向)，是依序排列并且前后关键帧之间连接着线段。

下面通过对几个示例性实施方式的描述，对本申请实施例的技术方案以及本申请的技术方案产生的技术效果进行说明。需要指出的是，下述实施方式之间可以相互参考、借鉴或结合，对于不同实施方式中相同的术语、相似的特征以及相似的实施步骤等，不再重复描述。

参见图1，本申请实施例提供了一种基于HTML编辑样条曲线的方法的流程示意图，该方法可以应用于终端。该终端可以是计算机等电子设备，并支持浏览器，该流程具体可以包括：

S110，创建组件类对应的第一实例，其中，第一实例包括画布实例，组件类和画布实例对应的类均继承自HTML元素。

具体而言，组件类可以继承自HTMLElement，画布实例对应的类可以继承自HTMLCanvasElement，其中，“继承自”可以理解为“继承或者直接为”。其中，HTMLElement表示一个HTML文档的根(顶级元素)，所以它也被称为根元素，所有其他HTML元素必须是此元素的后代。HTML语言为一种超文本编辑语言，是比较成熟的现有技术，本领域技术人员可以参考现有技术对HTML语言或者HTML元素的描述来实施本申请所示的方法，为描述简洁，在此不再赘述关于HTML语言或者HTML元素的各种特征。应当指出，浏览器为用户经常使用的一种应用工具，而基于HTML创建的各种组件可以搭载在市面上各种浏览器上运行，从这一角度出发，本申请实施例提供的方法可以实施在各种浏览器上，进而实现在各种环境下进行曲线编辑操作。

其中，画布实例即为曲线编辑操作所需的画布，可以显示曲线线段、关键帧等，还可以接收输入鼠标事件等。在创建第一实例的过程中，还包括建立所述第一实例和已创建的画布实例的引用关系。在组件运行过程中，仅需创建一个画布实例，其他实例仅需建立与该画布实例的引用关系。示例性地，可以将创建的画布实例用canvas来标识。

示例性地，该组件类的类名可以自定义为CurveEditor，CurveEditor继承自HTMLElement。由于CurveEditor继承自HTMLElement，即继承了HTMLElement的所有的属性和方法，在此基础上，还可以进一步地扩充CurveEditor的属性和方法。具体而言，增加的属性可以包括：画布(类名：HTMLCanvasElement)、插值计算类型、曲线颜色、曲线控制对象(即曲线控制类CurveCtrl对应的对象)等。本领域技术人员可以根据需要对CurveEditor进行拓展。另外，由于新增加了属性，在构造CurveEditor的实例时，也同样需要对部分属性进行初始化，因此，还可以重构构造函数，并在该构造函数中增加对部分属性的初始赋值操作。

S120，创建曲线控制类对应的第二实例，以及曲线抽象类对应的第三实例，其中，第一实例对第二实例存在引用关系，第二实例对第三实例存在引用关系。

示例性地，该曲线控制类的类名可以自定义为CurveCtrl，继承自EventEmitter，所创建的第二实例可以通过cCtrl来标识。其中，EventEmitter是Node.js(前端开发中常见的开发框架)的内置模块events提供的一个类，该类采用了JavaScript中最经典的设计模式，订阅/发布者模式。继承于EventEmitter的CurveCtrl，可以扩展其他方法和事件。EventEmitter的作用可以比拟为信号调度中心，该调度中心存储了所有内部事件的信号，并可以接收外部事件的信号。当接收到任一信号时，可以根据信号去触发对应的事件。由此可见，可以通过cCtrl去订阅各种事件(例如，鼠标事件、键盘事件等)，在接收到外部事件的信号时(例如，接收到针对画布的点击操作)，可以根据预设逻辑去进行相应的处理。

示例性地，该曲线抽象类的类名可以自定义为HermiteCurve，表示在绘制曲线的过程中，需要以Hermite插值计算类型进行插值的曲线抽象类。HermiteCurve继承自类名为CurveBase的抽象类，CurveBase中包括描述曲线各种特征的属性，或者操作曲线的各种方法。另外，若对曲线的插值模式为三次样条插值，还可以创建一个继承于CurveBase的曲线抽象类，以实现相应的曲线编辑操作。

应当说明的是，实例化是指在面向对象的编程中，把用类创建对象的过程称为实例化，将最后创建的对象称作实例，代表可在终端运行等。实例化是将一个抽象的概念类，具体到该类实物的过程。本申请中，第一实例、第二实例、第三实例、画布实例等，都是通过实例化过程获得。例如，当启动一个组件时，终端首先创建一个CurveEditor对应的实例，该实例可用cEditor来标识，然后对该cEditor进行初始化操作(例如配置参数、创建其他实例等)，最后运行该cEditor，以表征启动组件的过程。当关闭一个该组件时，终端需要销毁该cEditor，并回收cEditor所占用的内存资源。其中，可以在初始化cEditor时创建cCtrl，也可以在创建cEditor的过程中创建cCtrl，并建立cEditor对cCtrl的引用关系。基于该引用关系，通过运行的cEditor来间接运行cCtrl，并通过cCtrl进行一系列的曲线控制操作。应当指出，实例之间的引用为现有技术，通过引用关系，可以间接获取被引用实例的接口、属性，或者对被引用实例的属性进行调整等，为描述简洁，在此不再赘述。

S130，运行第一实例，并根据第二实例和第三实例进行曲线编辑操作。

具体而言，可以在浏览器上运行该第一实例。其中，该浏览器可以为IE浏览器、Google浏览器、猎豹浏览器、360浏览器等等。该浏览器也可以为Linux操作系统、Windows操作系统、MacOS或者移动操作系统(iOS和Android)中任一浏览器。其中，该浏览器应支持基于HTML语言、JavaScript语言编写的组件。

本申请实施例提供了一种基于HTML编辑样条曲线的方法，该方法包括：首先，创建基于HTML元素的第一实例和画布实例，然后创建曲线控制类对应的第二实例和曲线抽象类对应的第三实例。运行第一实例，并根据第二实例和第三实例进行曲线编辑操作。由于该方法是基于支持HTML的环境-浏览器，因此只要能够支持浏览器运行的环境，都可以应用该方法进行样条曲线的编辑。由于大部分的操作系统都支持浏览器，因此该方案可以得到广泛使用，并在需要的领域中得到复用。

本申请实施例还提供了一种可能的实现方式，创建曲线控制类对应的第二实例，以及曲线抽象类对应的第三实例，包括：

调用第一构造接口构造第二实例，其中，第一构造接口的参数包括画布实例；

其中，在调用第一构造接口构造第二实例时，还可以包括：调用第二构造接口构造第三实例，并建立第二实例对第三实例的引用关系；构造关键帧数组，其中，关键帧数组用于存储建立的关键帧实例。

具体而言，将画布实例作为参数，可以在构造第二实例的过程中，建立第二实例对画布实例的引用关系。在第一构造接口中，可以引入构造第三实例的操作，从而建立第二实例对第三实例的引用关系。进一步地，还可以对生成的各个实例进行初始化。

在一种可能的实现方式中，关键帧实例为基于关键帧类创建的实例对象，关键帧类至少包括以下属性：

左/右切线的信息；位置数据；插值模式，其中，插值模式包括曲线模式、直线模式和常量模式；左/右切线的权重调节模式。

具体而言，关键帧在画布上显示时，是一个小圆点，该画布实例还配置有坐标系。其中，位置数据为该小圆点在该坐标系的坐标，具体为X坐标和Y坐标。每个关键帧还包括相应的左/右切线信息，以左切线为例，左切线即为小圆点为切点，该小圆点左边的曲线对应的切线，左切线信息具体可以包括左切线的斜率和权重。插值模式，表示关键帧的线段绘制方式，主要有曲线模式和非曲线模式(非曲线模式包括直线模式和常量模式)两种，当插值模式为曲线模式时，需要将插值计算方式作为预设的绘制接口的参数，绘制关键帧两边的线段。应当示出，如无特殊说明，在本申请关键帧实例即为实例化的关键帧，可以简称为关键帧；画布实例即为实例化的画布，可以简称为画布，其他实例化的对象的描述方式类似。

本申请实施例还提供了一种可能的实现方式，在创建第二实例之后，还可以包括：订阅至少一项监听事件。

具体而言，可以通过画布实例订阅以下至少一项监听事件：鼠标移动事件、鼠标落下事件、鼠标放开事件、鼠标滚动事件。应当指出，监听事件包括但不限于所列举的前述事件，在实施本申请所示的方法时，本领域技术人员可以根据需求自行拓展。

在一个示例中，可以通过“mousemove”、“mousedown”、“mouseup”、“wheel”来标识上述事件，调用canvas的添加订阅接口addEventListener()来实现对上述事件的订阅。例如，针对“mousemove”所标识的事件，可以采用如下调用方式：

canvas.addEventListener('mousemove',this.eventHandlers.mousemove)；

本申请实施例还提供了一种可能的实现方式，根据第二实例和第三实例进行曲线编辑操作，具体可以包括：

响应于接收的监听事件，调用第二实例以确定监听事件对应的事件处理接口，其中，第二实例中包含至少一个事件处理接口。

具体而言，由于第二实例对画布实例存在引用关系，可以确定第二实例对订阅的监听事件的掌握，因此，还可以在第二实例中创建多个事件处理接口，以响应相应的监听事件。

其中，事件处理接口可以实现多项操作，具体地：若事件处理接口用于拖动任一关键帧，调用第三实例更新任一关键帧的位置数据。若事件处理接口用于处理画布中目标区域，确定目标区域中所有的关键帧，并通过调用第二实例以预设显示方式显示目标区域中的所有的关键帧。若事件处理接口用于处理画布上任一曲线线段，调用第二实例以预设显示方式显示任一曲线线段。若事件处理接口用于添加新的关键帧，通过调用第二实例将新的关键帧添加至第三实例的关键帧数组中。

其中，该预设显示方式包括高亮显示、更换显目的颜色来显示，以突出选中的线段或者关键帧。

应当指出，本领域技术人员还可以拓展更多的事件处理接口。例如，事件处理接口还可以用于选中任一关键帧的切线杆，还可以用于调整任一关键帧的切线的数据，例如斜率、权重，还可以用于删除/复制任一关键帧。

在一种可能的实现方式中，在更新任一关键帧的位置数据时，还可以包括：

若任一关键帧的插值模式为曲线模式，通过调用第二实例的预设绘制接口重绘任一关键帧两端的曲线线段；若任一关键帧的插值模式为直线模式或者常量模式，按照直线绘制方式重绘任一关键帧两端的曲线线段。

在一个示例中，根据两个关键帧绘制一段曲线，该两个关键帧的插值模式均为曲线模式。由于启动之初，设置的插值计算模式为Hermite，因此，该曲线也可以称作Hermite曲线。该预设绘制接口的输入参数为该两个关键帧和画布，在绘制过程中设定执行具体绘制操作的绘制实例，该绘制实例通过ctx来标识。具体而言，ctx为CanvasRenderingContext2D对应的实例。其中，CanvasRenderingContext2D包括一组用来在画布上绘制的图形函数，是一项成熟的现有技术，为描述简便，在此不再赘述。

示例性地参见图2所示的第三实例，在图2中，hCurve的keyArray中包括7个关键帧实例，依次用key1-key7来标识，这7个关键帧从左至右依次排列，每个关键帧实例的插值模式如下表1所示：

关键帧序号

key 1

key 2

key 3

key 4

key 5

key 6

key 7

插值模式

线性

线性

曲线

曲线

直线

直线

直线

表1关键帧的插值模式

上述7个关键帧实例总共组成了6个线段。例如，key 1和，key 2之间为线性直线；key 3和，key 4之间为曲线；key 5和key 6之间为包括水平直线的线段。其中，key 2和key3的插值模式不同，在两者之间的线段上也出现了相应的平滑过渡处理。

在一种可能的实现方式中，在通过调用第二实例将新的关键帧添加至第三实例的关键帧数组中时，方法还包括：

若新的关键帧在第三实例对应的曲线的中间位置，调用第二实例的预设绘制接口绘制新的关键帧两端的曲线线段；若新的关键帧在第三实例对应的曲线的前方，确定新的关键帧的后一个关键帧，并调用第二实例的预设绘制接口绘制新的关键帧与后一个关键帧之间的曲线线段；若新的关键帧在第三实例对应的曲线的后方，确定新的关键帧的前一个关键帧，并调用第二实例的预设绘制接口绘制新的关键帧与前一个关键帧之间的曲线线段。

为了更清楚地描述上述方法，本申请实施例提供了一种基于HTML的样条曲线编辑组件，该编辑组件与其他的HTML标签一样，插入HTML页面中。其中，该样条曲线编辑组件包括多个与绘制操作相关的抽象类，该抽象类可以基于TypeScript语言进行编写。该编辑组件还提供了基于HTML的画布，该画布用于显示样条曲线等。

下面对该编辑组件中涉及的主要类进行介绍。

keyFrames，关键帧类或者关键帧结构体，具体参考表2所示的keyFrames。

表2关键帧类/关键帧结构体

CurveCtrl，曲线控制类。针对于CurveCtrl，可以在该抽象类中定义好曲线绘制操作中的常用接口，例如：重构构造函数、初始化关键帧数据并进行绘制等，具体如下表3所示。

CurveBase，曲线控制基类，具体参考表4所示的CurveBase。

表4 CurveBase

由于样条曲线的类型存在多种，例如Hermite样条、三次样条等，不同的样条的插值计算过程不同。在按照某种样式绘制样条曲线时，需要以CurveBase作为父类来构造新的曲线抽象类，例如，若需要构造Hermite样条曲线，构造一个新的曲线抽象类HermiteCurve。在HermiteCurve中，既可以重构CurveBase中的接口，还可以构造一些新的接口，如下表5所示。

表5 HermiteCurve

在一个示例中，基于HermiteCurve创建一个曲线实例，用hCurve来标识，并且该样条曲线上的多个关键帧存储在hCurve的keyArray中，该keyArray中存储了N个关键帧实例，依次使用key1…keyN表示。在实际操作的过程中，将hCurve这条曲线拆分成多个线段(例如，针对于有两个关键帧的hCurve，则无需拆分，针对于有三个关键帧的hCurve，则需要拆分成两个线段，每个线段两端各有一个关键帧，其他的以此类推)，根据每个线段两端的关键帧的插值模式interpMode来确定如何进行绘制。例如，在interpMode取值常量模式时，在两个关键帧之间绘制水平直线线段；在interpMode取值线性模式时，在两个关键帧之间绘制线性线段；在interpMode取值曲线模式时，参考Hermite样条方式来绘制曲线线段。若线段两端的关键帧的插值模式不同，可在线段中的某一处进行平滑过渡处理，关于该平滑过渡处理的具体实现过程，可以参考现有技术，本申请在此不做任何限制。

再次参看表1，上述7个关键帧实例总共组成了6个线段。例如，key1和，key 2之间为线性直线；key 3和，key 4之间为曲线；key 5和key 6之间为包括水平直线的线段。其中，key 2和key 3的插值模式不同，在两者之间的线段上也出现了相应的平滑过渡处理。。

在一个示例中，在接收到用户输入的携带插值计算类型的启动指令之后，启动组件，具体启动过程可以参考上述实施例。启动组件的过程中，可以创建一个曲线控制类对应的实例cCtrl，以及一个曲线抽象类对应的实例hCurve，并通过canvas订阅各类监听事件。本申请实施例提供了几个具体操作示例：

示例1、移动关键帧：

若通过cCtrl先后接收到“mousedown”事件信号和“mouseup”事件信号，该“mousedown”事件信号所携带的坐标与任一关键帧的坐标相同，确定该任一关键帧为选中的关键帧，调用hCurve来标记选中的关键帧的点击状态(例如，高亮显示选中的关键帧)，并在鼠标移动的监听事件内不断的更新选中的关键帧的位置数据(具体为x、y值)。

其中，在选中的关键帧移动到两个关键帧之间时，需要调用cCtrl重新计算选中的关键帧和该两个关键帧之间的切线值，然后调用hCurve的预设绘制接口重新绘制选中的关键帧和该两个关键帧之间的连接线段。在绘制过程中，还可以删除该两个关键帧之间的已有的线段。在绘制时，可以仅绘制与选中的关键帧有关的线段，以提高绘制性能。

示例2、框选多个关键帧：

若通过cCtrl接收到“mousedown”事件信号，然后又持续接收到“mousemove”事件信号，最后接收到“mouseup”事件信号。具体而言，在接收到“mousemove”事件信号的过程中，调用cCtrl来绘制矩形的移动范围框，并确定坐标位置处于该移动范围框中的关键帧，以及这些关键帧之间的连接线段，用高亮颜色重绘该区域的关键帧和曲线以标识选中效果。

针对该范围中的多个关键帧可以进行移动、移除、缩放等操作，这些操作都会调用cCtrl、hCurve、canvas。

示例3、线段预设功能：

若通过cCtrl先后接收到“mousedown”事件信号和“mouseup”事件信号，该“mousedown”事件信号所携带的坐标在某一线段上，则确定该某一线段为选定的线段，对该选定的线段以及该线段两端的关键帧进行高亮显示。若通过cCtrl接收到携带目标贝塞尔曲线的选择指令，将上述选定的线段替换为该目标贝塞尔曲线(实际上是调用绘制接口，在上述选定的线段两端的关键帧之间绘制该目标贝塞尔曲线)，并调用cCtrl来根据该目标贝塞尔曲线两端的关键帧数据更新上述选定的线段两端的关键帧，具体可以是更新关键帧的切线信息、插值模式。

示例4、在线段上添加关键帧：

若通过cCtrl先后接收到“mousedown”事件信号和“mouseup”事件信号，然后接收到插入关键帧的插入指令。其中，该“mousedown”事件信号所携带的坐标落在某一线段上，则可以确定在该任一点的位置插入关键帧。调用cCtrl来根据该插入关键帧和该某一线段两端的关键帧重新绘制线段。

示例5、同时显示多条样条曲线并进行编辑：

在画布上可以同时显示并编辑多条样条曲线，例如可以存在多个hCurve。

参见图3，本申请实施例提供了一种基于HTML编辑样条曲线的装置的结构示意图，该装置300可以包括：

第一创建模块310，用于创建组件类对应的第一实例，其中，第一实例包括画布实例，组件类和画布实例对应的类均继承自HTML元素；第二创建模块320，用于创建曲线控制类对应的第二实例，以及曲线抽象类对应的第三实例，其中，第一实例对第二实例存在引用关系，第二实例对第三实例存在引用关系；运行模块330，用于运行第一实例，并根据第二实例和第三实例进行曲线编辑操作。

在一种可能的实现方式中，第二创建模块320在创建曲线控制类对应的第二实例，以及曲线抽象类对应的第三实例中，具体用于：

调用第一构造接口构造第二实例，其中，第一构造接口的参数包括画布实例；其中，在第一构造接口的调用过程中，包括：调用第二构造接口构造第三实例，其中，第二实例引用第三实例；构造关键帧数组，其中，关键帧数组用于存储建立的关键帧实例。

其中，关键帧实例为基于关键帧类创建的实例对象，关键帧类至少包括以下属性：位置数据；左/右切线的信息；插值模式，其中，插值模式包括曲线模式、直线模式和常量模式；左/右切线的权重调节模式。

在一种可能的实现方式中，第二创建模块320在第一构造接口的调用过程中，还用于：

订阅至少一项监听事件。

在一种可能的实现方式中，运行模块330在根据第二实例和第三实例进行曲线编辑操作中，具体用于：

响应于接收的监听事件，调用第二实例以确定监听事件对应的事件处理接口，其中，第二实例中包含至少一个事件处理接口；若事件处理接口用于拖动任一关键帧，调用第三实例更新任一关键帧的位置数据；若事件处理接口用于处理画布中目标区域，确定目标区域中所有的关键帧，并通过调用第二实例以预设显示方式显示目标区域中的所有的关键帧；若事件处理接口用于处理画布上任一曲线线段，调用第二实例以预设显示方式显示任一曲线线段；若事件处理接口用于添加新的关键帧，通过调用第二实例将新的关键帧添加至第三实例的关键帧数组中。

在一种可能的实现方式中，运行模块330在更新任一关键帧的位置数据时，还可以用于：

若任一关键帧的插值模式为曲线模式，通过调用第二实例的预设绘制接口重绘任一关键帧两端的曲线线段；若任一关键帧的插值模式为直线模式或者常量模式，按照直线绘制方式重绘任一关键帧两端的曲线线段。

在一种可能的实现方式中，运行模块330在通过调用第二实例将新的关键帧添加至第三实例的关键帧数组中时，还可以用于：

若新的关键帧在第三实例对应的曲线的中间位置，调用第二实例的预设绘制接口绘制新的关键帧两端的曲线线段；若新的关键帧在第三实例对应的曲线的前方，确定新的关键帧的后一个关键帧，并调用第二实例的预设绘制接口绘制新的关键帧与后一个关键帧之间的曲线线段；若新的关键帧在第三实例对应的曲线的后方，确定新的关键帧的前一个关键帧，并调用第二实例的预设绘制接口绘制新的关键帧与前一个关键帧之间的曲线线段。

本申请实施例中提供了一种电子设备，包括存储器、处理器及存储在存储器上的计算机程序，处理器执行计算机程序以实现前述方法实施例的步骤及相应内容。

本申请实施例提供了一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，计算机程序被处理器执行时可实现前述方法实施例的步骤及相应内容。

本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”、“第四”、“1”、“2”等(如果存在)是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例能够以除图示或文字描述以外的顺序实施。

应该理解的是，虽然本申请实施例的流程图中通过箭头指示各个操作步骤，但是这些步骤的实施顺序并不受限于箭头所指示的顺序。除非本文中有明确的说明，否则在本申请实施例的一些实施场景中，各流程图中的实施步骤可以按照需求以其他的顺序执行。此外，各流程图中的部分或全部步骤基于实际的实施场景，可以包括多个子步骤或者多个阶段。这些子步骤或者阶段中的部分或全部可以在同一时刻被执行，这些子步骤或者阶段中的每个子步骤或者阶段也可以分别在不同的时刻被执行。在执行时刻不同的场景下，这些子步骤或者阶段的执行顺序可以根据需求灵活配置，本申请实施例对此不限制。

以上所述仅是本申请部分实施场景的可选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本申请的方案技术构思的前提下，采用基于本申请技术思想的其他类似实施手段，同样属于本申请实施例的保护范畴。

Claims (10)

1.一种基于HTML编辑样条曲线的方法，其特征在于，所述方法包括：

创建组件类对应的第一实例，其中，所述第一实例包括画布实例，所述组件类和所述画布实例对应的类均继承自HTML元素；

创建曲线控制类对应的第二实例，以及曲线抽象类对应的第三实例，其中，所述第一实例对所述第二实例存在引用关系，所述第二实例对所述第三实例存在引用关系；

运行所述第一实例，并根据所述第二实例和所述第三实例进行曲线编辑操作。

2.根据权利要求1所述的方法，其特征在于，创建曲线控制类对应的第二实例，以及曲线抽象类对应的第三实例，包括：

调用第一构造接口构造第二实例，其中，所述第一构造接口的参数包括所述画布实例；

其中，在第一构造接口的调用过程中，包括：

调用第二构造接口构造第三实例，其中，所述第二实例引用所述第三实例；

构造关键帧数组，其中，所述关键帧数组用于存储建立的关键帧实例。

3.根据权利要求2所述的方法，其特征在于，关键帧实例为基于关键帧类创建的实例对象，所述关键帧类至少包括以下属性：

位置数据；

左/右切线的信息；

插值模式，其中，所述插值模式包括曲线模式、直线模式和常量模式；

左/右切线的权重调节模式。

4.根据权利要求3所述的方法，其特征在于，在第一构造接口的调用过程中，还包括：

订阅至少一项监听事件。

5.根据权利要求4所述的方法，其特征在于，所述根据所述第二实例和所述第三实例进行曲线编辑操作，包括：

响应于接收的监听事件，调用所述第二实例以确定所述监听事件对应的事件处理接口，其中，所述第二实例中包含至少一个事件处理接口；

若所述事件处理接口用于拖动任一关键帧，调用所述第三实例更新所述任一关键帧的位置数据；

若所述事件处理接口用于处理所述画布中目标区域，确定所述目标区域中所有的关键帧，并通过调用所述第二实例以预设显示方式显示所述目标区域中的所有的关键帧；

若所述事件处理接口用于处理所述画布上任一曲线线段，调用所述第二实例以预设显示方式显示所述任一曲线线段；

若所述事件处理接口用于添加新的关键帧，通过调用所述第二实例将所述新的关键帧添加至所述第三实例的关键帧数组中。

6.根据权利要求5所述的方法，其特征在于，在更新所述任一关键帧的位置数据时，还包括：

若所述任一关键帧的插值模式为曲线模式，通过调用所述第二实例的预设绘制接口重绘所述任一关键帧两端的曲线线段；

若所述任一关键帧的插值模式为直线模式或者常量模式，按照直线绘制方式重绘所述任一关键帧两端的曲线线段。

7.根据权利要求5所述的方法，其特征在于，在通过调用所述第二实例将所述新的关键帧添加至所述第三实例的关键帧数组中时，所述方法还包括：

若所述新的关键帧在第三实例对应的曲线的中间位置，调用所述第二实例的预设绘制接口绘制所述新的关键帧两端的曲线线段；

若所述新的关键帧在第三实例对应的曲线的前方，确定所述新的关键帧的后一个关键帧，并调用所述第二实例的预设绘制接口绘制所述新的关键帧与所述后一个关键帧之间的曲线线段；

若所述新的关键帧在第三实例对应的曲线的后方，确定所述新的关键帧的前一个关键帧，并调用所述第二实例的预设绘制接口绘制所述新的关键帧与所述前一个关键帧之间的曲线线段。

8.一种基于HTML编辑样条曲线的装置，其特征在于，所述装置包括：

第一创建模块，用于创建组件类对应的第一实例，其中，所述第一实例包括画布实例，所述组件类和所述画布实例对应的类均继承自HTML元素；

第二创建模块，用于创建曲线控制类对应的第二实例，以及曲线抽象类对应的第三实例，其中，所述第一实例对所述第二实例存在引用关系，所述第二实例对所述第三实例存在引用关系；

运行模块，用于运行所述第一实例，并根据所述第二实例和所述第三实例进行曲线编辑操作。

9.一种电子设备，包括存储器、处理器及存储在存储器上的计算机程序，其特征在于，所述处理器执行所述计算机程序以实现权利要求1-7任一项所述方法的步骤。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1-7任一项所述方法的步骤。

Images