[发明专利]WEB页面中向量图形可视化编辑的方法

说明书

技术领域

本发明涉及WEB页面处理技术领域，具体涉及WEB页面中向量图形可视化编辑的方法。

背景技术

对WEB页面中向量图形的编辑是一个困难的问题，多数向量图形的最终显示效果是由一些特殊的点的位置确定的(例如，折线是由所有拐点的位置确定的，曲线是由起点、终点和两个位于曲线外的中间控制点确定的)，而根据这些特殊点的位置最终确定向量图形其他点的数据是一个复杂的计算过程。因此，虽然理论上通过确定这些点的位置就可以确定最终的图形，但在实际中，由于数学运算过于复杂，导致无法准确确定其他点的坐标。比较有效的方法只能通过大量实验来筛选合适的点的位置。这就导致向量图形的编辑效率低下，速度慢。

发明内容

针对现有技术WEB页面向量图形编辑效率低下的问题，本发明提供了一种WEB页面中向量图形可视化编辑的方法，解决了“WEB页面中向量图形可视化编辑”问题，达到“所见即所得”的效果。

本发明技术方案

WEB页面中向量图形可视化编辑的方法包括如下步骤：

⒈在向量图形中选定控制点，具体方法是：

⑴分配N个控制点于一向量图形的边缘，N为大于2的自然数；

⑵依据所述控制点将该向量图形分割为N-2个三角向量图形；

⑶选定上述控制点其中之一进行拖拽；

⑷计算具有被选定的控制点的三角向量图形的一更新向量；

⑸根据所计算的更新向量重新绘制所述三角向量图形

⒉为上述选定的控制点添加事件。

WEB页面中向量图形可视化编辑的方法还包括以下步骤：以可视化形式标识所述选定的控制点。

所述可视化形式为将选定的控制点显示为在所述向量图形中突出可见的黑点。

步骤2中所述添加的事件为鼠标事件和/或键盘事件。

本发明的技术效果：

本发明提供一种WEB页面中向量图形可视化编辑方法，需要分配、分割、生成、拖拽、计算、绘制六个具体动作，归纳为在向量图形中选定控制点和为上述选定的控制点添加事件两大主要步骤。

本发明提供的WEB页面中向量图形可视化编辑方法解决了无法预知给定点的坐标究竟会产生何种效果的问题，通过复杂的运算，脚本语言可以即时确定一个向量图形的所有控制点并通过合适的方式(例如一个黑点)在屏幕上显示出来，并且动态地为这些黑点添加鼠标和键盘事件。在用户按下、移动和释放鼠标或按下按键时，脚本代码会根据预定义的功能移动这些黑点，同时通过运算，重绘相关的向量图形，达到“所见即所得”的效果。

附图说明

图1是本发明WEB页面中向量图形可视化编辑方法示意图。

具体实施方式

WEB页面中向量图形的编辑是一个困难的问题，虽然理论上通过确定这些点的位置就可以确定最终的图形，但在实际中，由于数学运算过于复杂，导致无法预知给定点的坐标究竟会产生什么样的效果。唯一的方法只能通过大量实验来筛选合适的点的位置。本发明提供的WEB页面中向量图形可视化编辑方法解决了无法预知给定点的坐标究竟会产生何种效果的问题，通过复杂的运算，脚本语言可以即时确定一个向量图形的所有控制点并通过合适的方式(例如一个黑点)在屏幕上显示出来，并且动态地为这些黑点添加鼠标和键盘事件。在用户按下、移动和释放鼠标或按下按键时，脚本代码会根据预定义的功能移动这些黑点，同时通过运算，重绘相关的向量图形，达到“所见即所得”的效果。

以下结合附图对本发明的实施例作进一步说明。

图1是本发明WEB页面中向量图形可视化编辑方法示意图。如图1所示，实现本发明WEB页面中向量图形可视化编辑方法需要分配、分割、生成、拖拽、计算、绘制六个具体动作，归纳为在向量图形中选定控制点和为上述选定的控制点添加事件两大主要步骤，具体为

WEB页面中向量图形可视化编辑的方法包括如下步骤：

⒈在向量图形中选定控制点，具体方法是：

⑴分配N个控制点于一向量图形的边缘，N为大于2的自然数；

⑵依据所述控制点将该向量图形分割为N-2个三角向量图形；

⑶选定上述控制点其中之一进行拖拽；

⑷计算具有被选定的控制点的三角向量图形的一更新向量；

⑸根据所计算的更新向量重新绘制所述三角向量图形

⒉为上述选定的控制点添加事件。

WEB页面中向量图形可视化编辑的方法还包括以下步骤：以可视化形式标识所述选定的控制点。所述可视化形式为将选定的控制点显示为在所述向量图形中突出可见的黑点。步骤B中所述添加的事件为鼠标事件和/或键盘事件。

以上对本发明所提供的WEB页面中向量图形可视化编辑方法进行了详细介绍。本文中应用具体实施例对本发明的原理和实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的技术人员，依据本发明的思想，在具体实施方式及应用范围上仍然可以对本发明创造进行修改或者等同替换；综上所述，本说明书内容不应理解为对本发明的限制，一切不脱离本发明的精神和范围的技术方案及其改进，其均涵盖在本发明创造专利的保护范围当中。