A method and apparatus for editing a spline curve based on HTML

Abstract

The embodiment of the application provides a method and device for editing a spline curve based on HTML, electronic equipment and computer readable storage medium, and relates to the field of software development. The method comprises the following steps: first, creating a first instance based on an HTML element and a canvas instance, then creating a second instance corresponding to a curve control class and a third instance corresponding to a curve abstract class, running the first instance, and performing a curve editing operation according to the second instance and the third instance. Since the method is based on an environment supporting HTML, i.e., a browser, the method can be applied to edit a spline curve as long as an environment supporting the running of the browser. Since most operating systems support browsers, the scheme can be widely used and reused in the required field.

Description

TECHNICAL FIELD

[0001] The present application relates to the field of software development, in particular, the present application relates to a method and device for editing spline curve based on HTML, electronic equipment and computer readable storage medium. BACKGROUND

[0002] As a kind of curve form, spline curve is mainly used in the production of animation, particle effect, for showing some animation numerical change effect, can realize the simulation effect of motion, such as accelerated motion, deceleration, uniform motion, free fall and the like.

[0003] At present, the drawing of spline curve on the market is mostly based on related field drawing software, which cannot be reused in other fields. When spline curve is needed in other fields, drawing software needs to be made by itself, but the process of making a drawing software is tedious and time-consuming.

[0004] Therefore, for spline curve, how to make a drawing software that can be reused in different fields has become a problem that needs to be solved urgently. SUMMARY

[0005] The present application aims to solve the above problems.

[0006] According to an aspect of an embodiment of the present application, a method for editing spline curve based on HTML is provided, the method comprising:

[0007] creating a first instance corresponding to a component class, wherein the first instance includes a canvas instance, and the classes corresponding to the component class and the canvas instance are both inherited from HTML elements; creating a second instance corresponding to a curve control class, and a third instance corresponding to a curve abstract class, wherein the first instance has a reference relationship with the second instance, and the second instance has a reference relationship with the third instance; running the first instance, and performing curve editing operation according to the second instance and the third instance.

[0008] In a possible implementation, creating a second instance corresponding to a curve control class, and a third instance corresponding to a curve abstract class, comprises:

[0009] calling a first construction interface to construct the second instance, wherein the parameters of the first construction interface include the canvas instance; wherein in the calling process of the first construction interface, a second construction interface is called to construct the third instance, wherein the second instance references the third instance; a key frame array is constructed, wherein the key frame array is used to store the established key frame instance.

[0010] In a possible implementation, the keyframe instance is an instance object created based on a keyframe class, and the keyframe class includes at least the following attributes: position data; information of left / right tangent lines; an interpolation mode, where the interpolation mode includes a curve mode, a straight line mode, and a constant mode; and a weight adjustment mode of the left / right tangent lines.

[0011] In a possible implementation, during the calling of the first construction interface, the method further includes:

[0012] Subscribing to at least one listening event.

[0013] In a possible implementation, the curve editing operation is performed according to the second instance and the third instance, and includes:

[0014] In response to the received listening event, the second instance is called to determine an event processing interface corresponding to the listening event, where the second instance includes at least one event processing interface; if the event processing interface is used to drag any keyframe, the third instance is called to update position data of the any keyframe; if the event processing interface is used to process a target region in the canvas, all keyframes in the target region are determined, and all the keyframes in the target region are displayed in a preset display mode by calling the second instance; if the event processing interface is used to process any curve segment on the canvas, the second instance is called to display the any curve segment in the preset display mode; and if the event processing interface is used to add a new keyframe, the new keyframe is added to a keyframe array of the third instance by calling the second instance.

[0015] In a possible implementation, when the position data of the any keyframe is updated, the method further includes:

[0016] If the interpolation mode of the any keyframe is the curve mode, the curve segments at both ends of the any keyframe are redrawn by calling a preset drawing interface of the second instance; if the interpolation mode of the any keyframe is the straight line mode or the constant mode, the curve segments at both ends of the any keyframe are redrawn in a straight line drawing mode.

[0017] In a possible implementation, when the new keyframe is added to the keyframe array of the third instance by calling the second instance, the method further includes:

[0018] If the new keyframe is at a middle position of a curve corresponding to the third instance, curve segments at both ends of the new keyframe are drawn by calling a preset drawing interface of the second instance; if the new keyframe is in front of the curve corresponding to the third instance, a next keyframe of the new keyframe is determined, and curve segments between the new keyframe and the next keyframe are drawn by calling the preset drawing interface of the second instance; and if the new keyframe is behind the curve corresponding to the third instance, a previous keyframe of the new keyframe is determined, and curve segments between the new keyframe and the previous keyframe are drawn by calling the preset drawing interface of the second instance.

[0019] According to another aspect of the embodiments of the present application, there is provided an apparatus for editing a spline curve based on HTML, comprising:

[0020] a first creating module configured to create a first instance corresponding to a component class, wherein the first instance comprises a canvas instance, and the component class and the canvas instance each inherit from an HTML element; a second creating module configured to create a second instance corresponding to a curve control class, and a third instance corresponding to a curve abstract class, wherein the first instance has a reference relationship with the second instance, and the second instance has a reference relationship with the third instance; and a running module configured to run the first instance, and perform a curve editing operation according to the second instance and the third instance.

[0021] According to another aspect of the embodiments of the present application, there is provided an electronic device, comprising a memory, a processor, and a computer program stored in the memory, wherein the processor executes the computer program to implement the steps of the method according to the above aspect of the embodiments of the present application.

[0022] According to another aspect of the embodiments of the present application, there is provided a computer readable storage medium having a computer program stored thereon, wherein the computer program is executed by a processor to implement the steps of the method according to the above aspect of the embodiments of the present application.

[0023] The technical scheme provided by the embodiments of the present application has the following beneficial effects:

[0024] The embodiments of the present application provide a method for editing a spline curve based on HTML, which comprises: first, creating a first instance based on an HTML element and a canvas instance, and then creating a second instance corresponding to a curve control class and a third instance corresponding to a curve abstract class. The first instance is run, and a curve editing operation is performed according to the second instance and the third instance. Since the method is based on an environment supporting HTML, i.e., a browser, the method can be applied to edit a spline curve as long as the environment can support the running of the browser. Since most operating systems support browsers, the scheme can be widely used and reused in the required fields. BRIEF DESCRIPTION OF DRAWINGS

[0025] In order to more clearly illustrate the technical scheme in the embodiments of the present application, the drawings needed in the description of the embodiments of the present application will be briefly introduced.

[0026] Figure 1 A flowchart of a method for editing a spline curve based on HTML according to the embodiments of the present application is shown in the figure.

[0027] Figure 2 A scene diagram of editing a spline curve according to the embodiments of the present application is shown in the figure.

[0028] Figure 3 A structure schematic diagram of a device for editing a spline curve based on HTML is provided for an embodiment of the present application. DETAILED DESCRIPTION

[0029] Embodiments of the present application will be described below in conjunction with the accompanying drawings. It should be understood that the embodiments described below in conjunction with the accompanying drawings are exemplary descriptions of the technical solutions of the embodiments of the present application, and do not constitute a limitation on the technical solutions of the embodiments of the present application.

[0030] Those skilled in the art can understand that the singular forms "a", "an" and "the" used herein include plural forms unless specifically stated otherwise. It should be further understood that the terms "include" and "contain" used in the embodiments of the present application mean that the corresponding features can be implemented as the presented features, information, data, steps, operations, elements and / or components, but do not exclude other features, information, data, steps, operations, elements, components and / or their combinations supported by the present technology. It should be understood that when we say that an element is "connected" or "coupled" to another element, the element can be directly connected or coupled to the other element, or it can mean that the element and the other element establish a connection relationship through an intermediate element. In addition, the "connection" or "coupling" used herein can include wireless connection or wireless coupling. The term "and / or" used herein indicates that at least one of the items defined by the term, for example, "A and / or B" can be implemented as "A", or as "B", or as "A and B".

[0031] In order to make the purposes, technical solutions and advantages of the present application clearer, the embodiments of the present application will be further described in detail below in conjunction with the accompanying drawings.

[0032] First, several terms related to the present application are introduced and explained:

[0033] Spline curve: a smooth curve obtained by a given set of control points, the general shape of the curve is controlled by these points. In computer graphics, spline curve specifically refers to a curve obtained by using piecewise polynomial function to calculate data points between a set of control points, and the curve is obtained by interpolating the data points. Among them, if the selected piecewise polynomial function makes the curve pass through each control point, the obtained curve is called the interpolation spline curve of the set of control points. Among them, the interpolation spline curve is often used in digitized drawing or specified path. In the prior art, the determination method of the interpolation spline curve can include natural cubic spline method, Hermite spline method, etc. If the selected piecewise polynomial function makes some or all control points not on the generated curve, the obtained curve is called the approximation spline curve of the set of control points. The approximation curve is generally used as a design tool to construct object shapes. In the prior art, the determination method of the approximation spline curve can include Bezier spline method, Cardinal spline method, etc.

[0034] Since the scheme shown in the embodiment of the present application focuses on providing a visual interpolation curve editing, and the interpolation spline curve is drawn, only the method of drawing the interpolation spline curve is taken as the interpolation calculation type, such as the natural cubic spline method, Hermite spline method, etc. Since this interpolation calculation type is a common interpolation calculation type for drawing curves in the prior art, those skilled in the art can refer to the prior art to increase the corresponding interpolation calculation type.

[0035] Key frame: the control point of the spline curve drawn can be called a key frame, which includes not only position information but also tangent information, interpolation mode, etc. In the embodiment of the present application, the connection between two key frames is called a line segment or a line segment.

[0036] In the embodiment of the present application, the control point described above can be called a key frame when the spline curve is edited. There is a coordinate system on the canvas of the spline curve, and the key frames on each spline curve are arranged in sequence in the horizontal direction (i.e. the X-axis direction of the coordinate system), and the line segments are connected between the front and rear key frames.

[0037] The technical scheme of the embodiment of the present application and the technical effects generated by the technical scheme of the present application will be described below by describing several exemplary embodiments. It should be pointed out that the following embodiments can be mutually referenced, borrowed or combined. For the same terms, similar features and similar implementation steps in different embodiments, they will not be described repeatedly.

[0038] Reference is made to Figure 1The embodiment of the application provides a flowchart of a method for editing a spline curve based on HTML, which can be applied to a terminal. The terminal can be an electronic device such as a computer and supports a browser. The flowchart can specifically include the following steps:

[0039] In S110, a first instance corresponding to a component class is created, wherein the first instance includes a canvas instance, and the component class and the canvas instance correspond to classes that are inherited from an HTML element.

[0040] Specifically, the component class can be inherited from HTMLElement, and the class corresponding to the canvas instance can be inherited from HTMLCanvasElement, wherein "inherited from" can be understood as "inherited or directly for". HTMLElement represents the root (top element) of an HTML document, so it is also called a root element, and all other HTML elements must be descendants of this element. HTML is a kind of hypertext editing language, which is a relatively mature existing technology. Those skilled in the art can refer to the description of HTML language or HTML element in the prior art to implement the method shown in the application. For the sake of brevity of description, various features of HTML language or HTML element will not be described here. It should be pointed out that the browser is an application tool frequently used by users, and various components created based on HTML can be run on various browsers on the market. From this point of view, the method provided by the embodiment of the application can be implemented on various browsers, and thus the curve editing operation can be performed in various environments.

[0041] The canvas instance is a canvas required for the curve editing operation, which can display curve segments, key frames and the like, and can also receive input mouse events. In the process of creating the first instance, the reference relationship between the first instance and the created canvas instance is also established. During the running of the component, only one canvas instance needs to be created, and other instances only need to establish a reference relationship with the canvas instance. Exemplarily, the created canvas instance can be identified by canvas.

[0042] Exemplarily, the class name of the component class can be defined as CurveEditor, and the CurveEditor inherits from HTMLElement. Since the CurveEditor inherits from the HTMLElement, i.e., inherits all the properties and methods of the HTMLElement, the properties and methods of the CurveEditor can be further extended on this basis. Specifically, the added properties can include: a canvas (class name: HTMLCanvasElement), an interpolation calculation type, a curve color, a curve control object (i.e., an object corresponding to the curve control class CurveCtrl), and the like. A person skilled in the art can extend the CurveEditor as needed. In addition, since the properties are added, when an instance of the CurveEditor is constructed, some properties also need to be initialized, and therefore, the constructor can be reconstructed, and the initial assignment operation of some properties can be added in the constructor.

[0043] In S120, a second instance corresponding to the curve control class and a third instance corresponding to the curve abstract class are created, where the first instance has a reference relationship with the second instance, and the second instance has a reference relationship with the third instance.

[0044] Exemplarily, the class name of the curve control class can be defined as CurveCtrl, and the CurveCtrl inherits from EventEmitter. The created second instance can be identified by cCtrl. Wherein, the EventEmitter is a class provided by the built-in module events of Node.js (a common development framework in front-end development), and the class adopts the most classic design pattern in JavaScript, i.e., the subscription / publisher pattern. The CurveCtrl inherited from the EventEmitter can extend other methods and events. The role of the EventEmitter can be compared to a signal scheduling center, which stores all internal event signals and can receive external event signals. When receiving any signal, the corresponding event can be triggered according to the signal. As can be seen, various events (such as mouse events, keyboard events, etc.) can be subscribed through the cCtrl, and when receiving the signal of the external event (such as receiving the click operation on the canvas), the corresponding processing can be performed according to the preset logic.

[0045] Exemplarily, the class name of the curve abstraction class can be defined as HermiteCurve, indicating that the curve abstraction class needs to be interpolated by the Hermite interpolation calculation type in the process of drawing the curve. The HermiteCurve inherits from an abstract class with the class name of CurveBase, and the CurveBase includes attributes describing various characteristics of the curve or various methods of operating the curve. In addition, if the interpolation mode of the curve is cubic spline interpolation, a curve abstraction class that inherits from the CurveBase can also be created to implement the corresponding curve editing operation.

[0046] It should be noted that instantiation refers to the process of creating an object using a class in object-oriented programming, and the last created object is called an instance, representing the terminal running and the like. Instantiation is the process of making an abstract concept class specific to the physical object of the class. In this application, the first instance, the second instance, the third instance, the canvas instance, and the like are all obtained through the instantiation process. For example, when starting a component, the terminal first creates an instance corresponding to the CurveEditor, which can be identified by cEditor, and then initializes the cEditor (such as configuring parameters, creating other instances, etc.), and finally runs the cEditor to represent the process of starting the component. When closing the component, the terminal needs to destroy the cEditor and recycle the memory resources occupied by the cEditor. Among them, the cCtrl can be created when the cEditor is initialized, or the cCtrl can be created during the creation of the cEditor and the reference relationship of the cEditor to the cCtrl is established. Based on the reference relationship, the cCtrl is indirectly run through the running cEditor, and a series of curve control operations are performed through the cCtrl. It should be pointed out that the reference between instances is prior art, and through the reference relationship, the interface, attribute of the referenced instance can be indirectly obtained, or the attribute of the referenced instance can be adjusted. For the sake of brevity, the description will not be repeated here.

[0047] S130, running the first instance and performing curve editing operations according to the second instance and the third instance.

[0048] Specifically, the first instance can be run on a browser. The browser can be an IE browser, a Google browser, a Leopad browser, a 360 browser, etc. The browser can also be any browser in a Linux operating system, a Windows operating system, a Mac OS, or a mobile operating system (iOS and Android). The browser should support components written in HTML language and JavaScript language.

[0049] The embodiment of the present application provides a method for editing a spline curve based on HTML, which comprises the following steps: first, creating a first instance based on an HTML element and a canvas instance, then creating a second instance corresponding to a curve control class and a third instance corresponding to a curve abstract class. The first instance is run, and a curve editing operation is performed according to the second instance and the third instance. Since the method is based on an environment supporting HTML, i.e., a browser, the method can be applied to edit a spline curve as long as an environment supporting the running of the browser. Since most operating systems support browsers, the scheme can be widely used and reused in the required fields.

[0050] The embodiment of the present application further provides a possible implementation manner, creating a second instance corresponding to a curve control class and a third instance corresponding to a curve abstract class, comprising the following steps:

[0051] calling a first construction interface to construct the second instance, wherein parameters of the first construction interface comprise the canvas instance;

[0052] In the process of calling the first construction interface to construct the second instance, the second construction interface can be called to construct the third instance, and a reference relationship of the second instance to the third instance is established; a key frame array is constructed, wherein the key frame array is used to store the established key frame instance.

[0053] Specifically, the canvas instance is taken as a parameter, and a reference relationship of the second instance to the canvas instance can be established in the process of constructing the second instance. In the first construction interface, an operation of constructing the third instance can be introduced, so that a reference relationship of the second instance to the third instance is established. Further, each instance generated can be initialized.

[0054] In a possible implementation manner, the key frame instance is an instance object created based on a key frame class, and the key frame class comprises at least the following attributes:

[0055] information of left / right tangent; position data; an interpolation mode, wherein the interpolation mode comprises a curve mode, a straight line mode and a constant mode; a weight adjustment mode of left / right tangent.

[0056] Specifically, the key frame is a small dot when displayed on the canvas, and the canvas instance is also configured with a coordinate system. Among them, the position data is the coordinates of the small dot in the coordinate system, specifically the X coordinate and the Y coordinate. Each key frame also includes corresponding left / right tangent information. Taking the left tangent as an example, the left tangent is the tangent corresponding to the curve on the left of the small dot as the tangent point. The left tangent information specifically can include the slope and weight of the left tangent. The interpolation mode indicates the line segment drawing mode of the key frame, mainly including curve mode and non-curve mode (non-curve mode includes straight line mode and constant mode). When the interpolation mode is curve mode, the interpolation calculation mode needs to be taken as a parameter of the preset drawing interface to draw the line segments on both sides of the key frame. It should be shown that, unless otherwise specified, the key frame instance in this application is the instantiated key frame, which can be referred to as the key frame; the canvas instance is the instantiated canvas, which can be referred to as the canvas, and the description method of other instantiated objects is similar.

[0057] The embodiment of the application further provides a possible implementation manner, after creating the second instance, the method can further include: subscribing to at least one listening event.

[0058] Specifically, the canvas instance can subscribe to at least one of the following listening events: mouse move event, mouse down event, mouse up event, and mouse wheel event. It should be pointed out that the listening events include but are not limited to the foregoing events listed, and those skilled in the art can expand them according to needs when implementing the method shown in the application.

[0059] In one example, the above events can be identified by "mousemove", "mousedown", "mouseup", and "wheel", and the subscription to the above events can be implemented by calling the addSubscription interface addEventListener() of the canvas. For example, for the event identified by "mousemove", the following calling method can be used:

[0060] canvas.addEventListener('mousemove', this.eventHandlers.mousemove);

[0061] The embodiment of the application further provides a possible implementation manner, and the curve editing operation is performed according to the second instance and the third instance, which can specifically include:

[0062] In response to the received listening event, the second instance is called to determine the event handling interface corresponding to the listening event, wherein the second instance includes at least one event handling interface.

[0063] Specifically, since the second instance has a reference relationship with the canvas instance, it can be determined that the second instance has the mastery of the subscribed listening events, and therefore, a plurality of event processing interfaces can be created in the second instance to respond to the corresponding listening events.

[0064] The event processing interface can implement a plurality of operations, specifically: if the event processing interface is used to drag any key frame, the third instance is called to update the position data of any key frame. If the event processing interface is used to process a target region in the canvas, all key frames in the target region are determined, and all key frames in the target region are displayed in a preset display manner by calling the second instance. If the event processing interface is used to process any curve segment on the canvas, the second instance is called to display any curve segment in a preset display manner. If the event processing interface is used to add a new key frame, the new key frame is added to the key frame array of the third instance by calling the second instance.

[0065] The preset display manner includes highlighting, changing the color of the target region to highlight the selected line segment or key frame.

[0066] It should be pointed out that those skilled in the art can also expand more event processing interfaces. For example, the event processing interface can also be used to select the tangent bar of any key frame, and can also be used to adjust the data of the tangent of any key frame, such as slope and weight, and can also be used to delete / copy any key frame.

[0067] In a possible implementation, when updating the position data of any key frame, the following operations can also be included:

[0068] If the interpolation mode of any key frame is a curve mode, the curve segments at both ends of any key frame are redrawn by calling the preset drawing interface of the second instance; if the interpolation mode of any key frame is a straight line mode or a constant mode, the curve segments at both ends of any key frame are redrawn in a straight line drawing manner.

[0069] In one example, a curve is drawn according to two key frames, and the interpolation modes of the two key frames are both curve modes. Since the interpolation calculation mode is set to Hermite at the beginning of the start, the curve can also be called a Hermite curve. The input parameters of the preset drawing interface are the two key frames and the canvas, and a drawing instance that performs specific drawing operations is set during the drawing process, and the drawing instance is identified by ctx. Specifically, ctx is an instance corresponding to CanvasRenderingContext2D. CanvasRenderingContext2D includes a group of graphic functions used to draw on the canvas, and is a mature existing technology. For the sake of brevity, it will not be described here.

[0070] For example,Figure 2 In the third example shown, Figure 2 In the third example shown, the keyArray of hCurve includes 7 key frame instances, which are identified by key1-key7 in sequence, and the 7 key frames are arranged from left to right in sequence. The interpolation mode of each key frame instance is shown in Table 1.

[0071] Key frame number key 1 key 2 key 3 key 4 key 5 key 6 key 7 Interpolation mode Linear Linear Curved Curved Straight Straight Straight

[0072] Table 1: Interpolation mode of key frame

[0073] The 7 key frame instances above form 6 line segments in total. For example, the line segment between key 1 and key 2 is a linear straight line; the line segment between key 3 and key 4 is a curve; and the line segment between key 5 and key 6 includes a horizontal straight line. The interpolation modes of key 2 and key 3 are different, and the corresponding smooth transition is performed on the line segment between the two.

[0074] In a possible implementation, when a new key frame is added to the key frame array of the third example by calling the second example, the method further includes:

[0075] If the new key frame is in the middle of the curve corresponding to the third example, the preset drawing interface of the second example is called to draw the curve segments at both ends of the new key frame; if the new key frame is in front of the curve corresponding to the third example, the next key frame of the new key frame is determined, and the preset drawing interface of the second example is called to draw the curve segment between the new key frame and the next key frame; if the new key frame is behind the curve corresponding to the third example, the previous key frame of the new key frame is determined, and the preset drawing interface of the second example is called to draw the curve segment between the new key frame and the previous key frame.

[0076] In order to more clearly describe the above method, an embodiment of the present application provides an HTML-based spline curve editing component, which is inserted into an HTML page like other HTML tags. The spline curve editing component includes a plurality of abstract classes related to drawing operations, which can be written based on the TypeScript language. The editing component also provides an HTML-based canvas for displaying spline curves and the like.

[0077] The main classes involved in the editing component are introduced below.

[0078] keyFrames, a key frame class or a key frame structure, which is specifically shown in Table 2.

[0079]

[0080] Table 2 Keyframe class / Keyframe structure

[0081] CurveCtrl, curve control class. For CurveCtrl, common interfaces in curve drawing operations can be defined in the abstract class, such as: reconstructing the constructor, initializing the keyframe data and drawing, etc. The details are shown in Table 3 as follows.

[0082]

[0083] CurveBase, curve control base class, refer to CurveBase shown in Table 4.

[0084]

[0085] Table 4 CurveBase

[0086] Since there are various types of spline curves, such as Hermite spline, cubic spline, etc., the interpolation calculation process of different splines is different. When drawing a spline curve in a certain style, a new curve abstract class is constructed with CurveBase as the parent class, for example, if a Hermite spline curve needs to be constructed, a new curve abstract class HermiteCurve is constructed. In HermiteCurve, the interfaces in CurveBase can be reconstructed, and some new interfaces can also be constructed, as shown in Table 5.

[0087]

[0088] Table 5 HermiteCurve

[0089] In one example, a curve instance is created based on the Hermite Curve, identified as hCurve, and a plurality of key frames on the spline curve are stored in the keyArray of hCurve, which stores N key frame instances in turn using key1…keyN. In actual operation, the curve hCurve is divided into a plurality of line segments (for example, for hCurve with two key frames, no division is needed, and for hCurve with three key frames, it needs to be divided into two line segments, each of which has one key frame at each end, and the like), and how to draw is determined according to the interpolation mode interpMode of the key frames at each end of the line segment. For example, when interpMode takes the constant mode, a horizontal straight line segment is drawn between the two key frames; when interpMode takes the linear mode, a linear line segment is drawn between the two key frames; and when interpMode takes the curve mode, a curve line segment is drawn according to the Hermite spline method. If the interpolation modes of the key frames at the ends of the line segment are different, a smooth transition can be performed at a certain place in the line segment. The specific implementation process of the smooth transition can be referred to the prior art, which is not limited by the present application.

[0090] Referring again to Table 1, the above-mentioned 7 key frame instances together form 6 line segments. For example, between key1 and key2 is a linear straight line; between key3 and key4 is a curve; and between key5 and key6 is a line segment including a horizontal straight line. Among them, the interpolation modes of key2 and key3 are different, and a corresponding smooth transition is performed on the line segment between them.

[0091] In one example, after receiving the start instruction carrying the interpolation calculation type input by the user, the component is started, and the specific starting process can be referred to the above-mentioned embodiments. In the process of starting the component, an instance cCtrl corresponding to the curve control class and an instance hCurve corresponding to the curve abstract class can be created, and each type of listening event can be subscribed through canvas. The present application provides several specific operation examples:

[0092] Example 1, moving key frames:

[0093] If the “mousedown” event signal and the “mouseup” event signal are received in turn by cCtrl, the coordinates carried by the “mousedown” event signal are the same as those of any key frame, it is determined that the any key frame is the selected key frame, hCurve is called to mark the click state of the selected key frame (for example, highlight the selected key frame), and the position data (specifically, x and y values) of the selected key frame is constantly updated in the mouse movement listening event.

[0094] Wherein, when the selected keyframe moves between two keyframes, cCtrl is called to recalculate the tangent values between the selected keyframe and the two keyframes, and then the preset drawing interface of hCurve is called to redraw the connection line segment between the selected keyframe and the two keyframes. In the drawing process, the existing line segment between the two keyframes can also be deleted. In the drawing process, only the line segment related to the selected keyframe can be drawn to improve the drawing performance.

[0095] Example 2, frame multiple keyframes:

[0096] If the "mousedown" event signal is received through cCtrl, and then the "mousemove" event signal is continuously received, and finally the "mouseup" event signal is received. Specifically, in the process of receiving the "mousemove" event signal, cCtrl is called to draw the moving range frame of the rectangle, and the keyframes whose coordinate positions are in the moving range frame are determined, as well as the connection line segment between these keyframes. The keyframes and curves in the area are redrawn with a highlight color to identify the selected effect.

[0097] The multiple keyframes in the range can be moved, removed, scaled, etc. These operations will call cCtrl, hCurve, canvas.

[0098] Example 3, line segment preset function:

[0099] If the "mousedown" event signal and the "mouseup" event signal are received through cCtrl in sequence, and the coordinates carried by the "mousedown" event signal are on a certain line segment, then the certain line segment is determined as the selected line segment, and the selected line segment and the keyframes at both ends of the line segment are highlighted. If the selection instruction carrying the target Bezier curve is received through cCtrl, the selected line segment is replaced by the target Bezier curve (actually, the drawing interface is called to draw the target Bezier curve between the keyframes at both ends of the selected line segment), and cCtrl is called to update the keyframes at both ends of the selected line segment according to the keyframe data of the target Bezier curve. Specifically, the tangent information and interpolation mode of the keyframes can be updated.

[0100] Example 4, adding keyframes on line segments:

[0101] If the "mousedown" event signal and the "mouseup" event signal are received in sequence through the cCtrl, and then the insertion instruction of the insertion key frame is received, and the coordinate carried by the "mousedown" event signal falls on a line segment, it can be determined that the key frame is inserted at the position of the point. The cCtrl is called to redraw the line segment according to the insertion key frame and the key frames at both ends of the line segment.

[0102] Example 5, simultaneously display and edit multiple spline curves:

[0103] Multiple spline curves can be simultaneously displayed and edited on the canvas, for example, multiple hCurve can exist.

[0104] Referring to Figure 3 The embodiment of the present application provides a structure schematic diagram of a device for editing a spline curve based on HTML. The device 300 can include:

[0105] A first creation module 310 is configured to create a first instance corresponding to a component class, wherein the first instance includes a canvas instance, and the classes corresponding to the component class and the canvas instance are both inherited from an HTML element; a second creation module 320 is configured to create a second instance corresponding to a curve control class, and a third instance corresponding to a curve abstract class, wherein the first instance has a reference relationship with the second instance, and the second instance has a reference relationship with the third instance; and a running module 330 is configured to run the first instance, and perform a curve editing operation according to the second instance and the third instance.

[0106] In a possible implementation, in the process of creating the second instance corresponding to the curve control class and the third instance corresponding to the curve abstract class, the second creation module 320 is specifically configured to:

[0107] invoke a first construction interface to construct the second instance, wherein the parameters of the first construction interface include the canvas instance; and in the process of invoking the first construction interface, the second creation module 320 is configured to:

[0108] The key frame instance is an instance object created based on a key frame class, and the key frame class includes at least the following attributes: position data; information of left / right tangent; interpolation mode, wherein the interpolation mode includes a curve mode, a straight line mode and a constant mode; and a weight adjustment mode of the left / right tangent.

[0109] In a possible implementation, in the process of invoking the first construction interface, the second creation module 320 is further configured to:

[0110] subscribe to at least one listening event.

[0111] In a possible implementation, the running module 330 is configured to, in the curve editing operation according to the second instance and the third instance, specifically for:

[0112] In response to the received listening event, the second instance is called to determine an event processing interface corresponding to the listening event, wherein the second instance contains at least one event processing interface; if the event processing interface is used to drag any key frame, the third instance is called to update position data of the any key frame; if the event processing interface is used to process a target region in the canvas, all key frames in the target region are determined, and all key frames in the target region are displayed in a preset display manner by calling the second instance; if the event processing interface is used to process any curve segment on the canvas, the second instance is called to display any curve segment in a preset display manner; if the event processing interface is used to add a new key frame, the new key frame is added to a key frame array of the third instance by calling the second instance.

[0113] In a possible implementation, the running module 330, when updating the position data of the any key frame, can also be configured to:

[0114] If the interpolation mode of the any key frame is a curve mode, the curve segments at both ends of the any key frame are redrawn by calling a preset drawing interface of the second instance; if the interpolation mode of the any key frame is a straight line mode or a constant mode, the curve segments at both ends of the any key frame are redrawn in a straight line drawing manner.

[0115] In a possible implementation, the running module 330, when adding the new key frame to the key frame array of the third instance by calling the second instance, can also be configured to:

[0116] If the new key frame is at a middle position of the curve corresponding to the third instance, curve segments at both ends of the new key frame are drawn by calling a preset drawing interface of the second instance; if the new key frame is in front of the curve corresponding to the third instance, a next key frame of the new key frame is determined, and curve segments between the new key frame and the next key frame are drawn by calling the preset drawing interface of the second instance; if the new key frame is behind the curve corresponding to the third instance, a previous key frame of the new key frame is determined, and curve segments between the new key frame and the previous key frame are drawn by calling the preset drawing interface of the second instance.

[0117] In the embodiments of the present application, an electronic device is provided, which includes a memory, a processor, and a computer program stored in the memory. The processor executes the computer program to implement the steps and corresponding contents of the foregoing method embodiments.

[0118] The embodiment of the present application provides a computer readable storage medium, and the computer readable storage medium stores a computer program. The computer program is executed by a processor to implement the steps and corresponding contents of the foregoing method embodiment.

[0119] The terms "first", "second", "third", "fourth", "1", "2", and the like (if any) in the specification and claims of the present application and the above-described drawings are used to distinguish similar objects, and do not necessarily have to be used to describe a specific order or sequence. It should be understood that the data thus used can be interchanged under appropriate circumstances, so that the embodiments of the present application described herein can be implemented in an order other than that illustrated or described.

[0120] It should be understood that, although the flowcharts of the embodiments of the present application indicate the respective operation steps by arrows, the implementation order of the steps is not limited to the order indicated by the arrows. Unless otherwise specified herein, in some implementation scenarios of the embodiments of the present application, the implementation steps in each flowchart can be executed in other orders as required. In addition, part or all of the steps in each flowchart can include multiple sub-steps or multiple stages based on the actual implementation scenario. Part or all of the sub-steps or stages can be executed at the same time, and each of the sub-steps or stages can also be executed at different times. In the scenario where the execution times are different, the execution order of the sub-steps or stages can be flexibly configured according to requirements, and the embodiments of the present application do not limit this.

[0121] The above is only an optional implementation manner of some implementation scenarios of the present application, and it should be pointed out that, for ordinary skilled persons in the technical field, other similar implementation manners based on the technical concept of the present application without departing from the technical concept of the present application also belong to the protection scope of the embodiments of the present application.

Claims

1. A method of editing a spline curve based on HTML, characterized by, The method comprises: creating a first instance corresponding to a component class, wherein the first instance comprises a canvas instance, and the component class and the canvas instance correspond to classes inherited from an HTML element; creating a second instance corresponding to a curve control class and a third instance corresponding to a curve abstract class, wherein the first instance has a reference relationship with the second instance, and the second instance has a reference relationship with the third instance; the curve control class is configured to, in the case of receiving a signal of an external event, perform corresponding processing according to preset logic; the curve abstract class comprises attributes describing various characteristics of a curve or various methods for operating a curve; running the first instance and performing a curve editing operation according to the second instance and the third instance; the curve editing operation according to the second instance and the third instance comprises: in response to a received listening event, calling the second instance to determine an event processing interface corresponding to the listening event, wherein the second instance comprises at least one event processing interface; if the event processing interface is used to drag any key frame, calling the third instance to update position data of the any key frame; if the event processing interface is used to process a target region in the canvas, determining all key frames in the target region, and displaying all key frames in the target region in a preset display manner by calling the second instance; if the event processing interface is used to process any curve segment on the canvas, calling the second instance to display the any curve segment in a preset display manner; if the event processing interface is used to add a new key frame, adding the new key frame to a key frame array of the third instance by calling the second instance.

2. The method of claim 1, wherein, creating a second instance corresponding to a curve control class and a third instance corresponding to a curve abstract class comprises: calling a first construction interface to construct the second instance, wherein parameters of the first construction interface comprise the canvas instance; wherein, in the calling process of the first construction interface, the following is included: calling a second construction interface to construct the third instance, wherein the second instance references the third instance; constructing a key frame array, wherein the key frame array is used to store established key frame instances.

3. The method of claim 2, wherein, The key frame instance is an instance object created based on a key frame class, and the key frame class comprises at least the following attributes: position data; information of left / right tangent lines; an interpolation mode, wherein the interpolation mode comprises a curve mode, a straight line mode and a constant mode; a weight adjustment mode of left / right tangent lines.

4. The method of claim 3, wherein, In the calling process of the first construction interface, the following is further included: subscribing to at least one listening event.

5. The method of claim 1, wherein, In the process of updating the position data of the any key frame, the following is further included: if the interpolation mode of the any key frame is the curve mode, redrawing curve segments at both ends of the any key frame by calling a preset drawing interface of the second instance; if the interpolation mode of the any key frame is the straight line mode or the constant mode, redrawing curve segments at both ends of the any key frame in a straight line drawing mode.

6. The method of claim 1, wherein, In the process of adding the new key frame to the key frame array of the third instance by calling the second instance, the method further comprises: if the new key frame is in the middle of the curve corresponding to the third instance, calling the preset drawing interface of the second instance to draw the curve segments on both ends of the new key frame; if the new key frame is in front of the curve corresponding to the third instance, determining a next key frame of the new key frame, and calling the preset drawing interface of the second instance to draw the curve segment between the new key frame and the next key frame; if the new key frame is behind the curve corresponding to the third instance, determining a previous key frame of the new key frame, and calling the preset drawing interface of the second instance to draw the curve segment between the new key frame and the previous key frame.

7. An apparatus for editing a spline curve based on HTML, characterized by The device comprises: a first creating module configured to create a first instance corresponding to a component class, wherein the first instance comprises a canvas instance, and the component class and the canvas instance correspond to classes which are all inherited from an HTML element; a second creating module configured to create a second instance corresponding to a curve control class and a third instance corresponding to a curve abstract class, wherein the first instance has a reference relationship with the second instance, and the second instance has a reference relationship with the third instance; the curve control class is configured to, in a case where a signal of an external event is received, perform corresponding processing according to preset logic; the curve abstract class comprises attributes for describing various features of a curve or various methods for operating a curve; a running module configured to run the first instance and perform a curve editing operation according to the second instance and the third instance; the running module is further configured to, in response to a received listening event, call the second instance to determine an event processing interface corresponding to the listening event, wherein the second instance comprises at least one event processing interface; if the event processing interface is used to drag any key frame, the third instance is called to update position data of the any key frame; if the event processing interface is used to process a target region in the canvas, all key frames in the target region are determined, and all the key frames in the target region are displayed in a preset display manner by calling the second instance; if the event processing interface is used to process any curve segment on the canvas, the second instance is called to display the any curve segment in a preset display manner; if the event processing interface is used to add a new key frame, the new key frame is added to a key frame array of the third instance by calling the second instance.

8. An electronic device comprising a memory, a processor, and a computer program stored on the memory, wherein the computer program, when executed by the processor, is arranged to perform the method of any one of claims 1 to 7. The processor executes the computer program to implement the steps of the method of any one of claims 1-6.

9. A computer readable storage medium having stored thereon a computer program, characterized in that, The computer program is executed by the processor to implement the steps of the method of any one of claims 1-6.

Images