CN103345389B - 一种应用于网页的矢量图形的操作方法和装置 - Google Patents

Abstract

本发明提供了一种应用于网页的矢量图形的操作方法，该方法包括以下步骤：响应用户对网页画板中画笔工具或擦除工具的操作，触发绘制或擦除状态；当触发绘制状态时，基于flash技术获取画笔工具的操作位置，记录画笔工具的绘制轨迹并绘制矢量图形；当触发擦除状态时，以位图的形式缓存已绘制的图形，基于flash技术获取擦除工具的操作位置，记录擦除工具的擦除轨迹并擦除位图图形。相应地，还提供了一种应用于网页的矢量图形的操作装置。本发明提供的图形操作方法和装置可以有效地实现矢量图形的绘制和像素级别的擦除，提升了用户的图形操作体验。

Description

一种应用于网页的矢量图形的操作方法和装置

技术领域

本发明涉及图形操作技术，尤其涉及一种应用于网页的矢量图形的操作方法和装置。

背景技术

现有技术中，操作图形时虽然采用矢量图形的绘制方法，绘制过程中保存每一笔画的位置和形状，但是对图形进行擦除操作时只能针对每一笔画进行擦除，如广泛应用于电脑（pc）桌面的幻灯片（power point，简称ppt）画笔工具，在ppt处于放映状态时，可以通过指针选项选择不同的画笔工具进行各种标注，并通过选择“橡皮擦”工具擦除这些标注。但是由于现有方案仅支持笔画级别的擦除，不支持像素级别的擦除，导致以下问题的出现：第一，擦除操作的效率低，例如ppt上的擦除方式是：使用画笔工具进行重点内容的一次标注后，通过点击“橡皮擦”，一次性擦除所述标注轨迹，不能实现按需按量擦除，容易引起误操作，用户可能还需要进行再次标注；第二，橡皮擦效果不够真实。

此外，虽然操作***（例如，windows）提供的画图工具可以实现对图形的像素级别的擦除，但是该工具仅仅是通过pc编程技术应用在pc本地上，而不能基于flash技术应用于网络，由此，该画图工具针对的服务对象仅仅是桌面用户，对于使用浏览器上网的互联网用户却无能为力。

因此，希望可以提出一种用于解决上述问题的应用于网页的矢量图形的操作方法和装置。

发明内容

本发明的目的是提供一种应用于网页的矢量图形的操作方法和装置，可以实现对网页上的矢量图形进行有效操作。需要说明的是，本文所述的flash技术主要是指矢量动画技术，用于设计和编辑动画。

根据本发明的一个方面，提供了一种应用于网页的矢量图形的操作方法，该方法包括以下步骤：

响应用户对网页画板中画笔工具或擦除工具的操作，触发绘制或擦除状态；

当触发绘制状态时，基于flash技术获取画笔工具的操作位置，记录画笔工具的绘制轨迹并绘制矢量图形；

当触发擦除状态时，以位图的形式缓存已绘制的图形，基于flash技术获取擦除工具的操作位置，记录擦除工具的擦除轨迹并擦除位图图形。

根据本发明的另一个方面，还提供了一种应用于网页的矢量图形的操作装置，包括：

状态触发单元，用于响应用户对网页画板中画笔工具或擦除工具的操作，触发绘制或擦除状态；

绘制单元，基于flash技术获取画笔工具的操作位置，记录画笔工具的绘制轨迹并绘制矢量图形；

擦除单元，以位图的形式缓存已绘制的图形，基于flash技术获取擦除工具的操作位置，记录擦除工具的擦除轨迹并擦除位图图形。

与现有技术相比，本发明具有以下优点：

本发明相对于现有技术的图形操作技术，提高了操作效果，尤其在图像擦除方面实现了像素级别的擦除，提升了擦除的效果，更好地满足用户的需求。

附图说明

通过阅读参照以下附图所作的对非限制性实施例所作的详细描述，本发明的其它特征、目的和优点将会变得更明显：

图1为根据现有技术的ppt画笔工具进行绘制的页面示意图；

图2为根据现有技术的ppt画笔工具进行擦除的页面示意图；

图3为根据本发明一个优选实施例的应用于网页的矢量图形的操作方法流程图；

图4为根据本发明一个优选实施例的应用于网页的画笔工具进行绘制的页面示意图；

图5为根据本发明一个优选实施例的应用于网页的画笔工具进行擦除的页面示意图；

图6为根据本发明另一个优选实施例的应用于网页的矢量图形的操作装置的示意性框图。

具体实施方式

下面结合附图对本发明作进一步详细描述。

根据本发明的一个方面，提供了一种应用于网页的矢量图形的操作方法。

请参考图3，图3为根据本发明一个优选实施例的应用于网页的矢量图形的操作方法流程图。

如图3所示，本发明所提供的应用于网页的矢量图形的操作方法包括以下步骤：

步骤S301，响应用户对网页画板中画笔工具或擦除工具的操作，触发绘制或擦除状态。

具体地，用户通过诸如鼠标、触屏设备、触屏手等在网页画板中选取各种图形操作工具，包括画笔工具、图形擦除工具（典型地如橡皮）。选取完毕后，即可以应用该图形操作工具进行图形的各种操作，如通过鼠标点击画笔工具后即可在画板中绘制图形，又如通过鼠标点击橡皮工具即可在画板中擦除已绘制的图形。

步骤S302，当触发绘制状态时，基于flash技术获取画笔工具的操作位置，记录画笔工具的绘制轨迹并绘制矢量图形。

具体地，当绘制状态触发后，通过诸如鼠标、触屏设备、触屏手等选取画笔工具，并通过程序读取所述画笔工具在网页画板的操作位置。以鼠标选取画笔工具为例，首先建立flash项目文档类，将全局对象stage（画笔所作用的舞台）单例化，以便可以在flash程序的任意模块获取属性值stage.MouseX（鼠标的横坐标）和stage.MouseY（鼠标的纵坐标），从而获得所述以画笔工具样式显示的实际鼠标相对与舞台原点所按下的位置（或全局坐标）。其中，所述flash项目文档类是flash技术中所引进的类，这个类的作用是管理flash文档；所述将全局对象单例化是指该对象只能创建其子类的唯一对象。所述MouseX属性和MouseY属性来自flash全局坐标的DisplayObject类，通常用于表示鼠标坐标，具体表示鼠标偏移坐标系原点的偏移量。

进一步地，加入逐帧判断函数记录鼠标绘制轨迹。其中，所述逐帧判断函数主要用于刷新鼠标位置，用户在绘制或擦除过程中需要记录鼠标当前位置。通过定义私有变量positionX、positionY，在动画播放的每一帧记录鼠标位置，并在每一帧的末段将stage.MouseX、stage.MouseY分别赋值给二者。其中，所述每一帧实现步骤的伪代码可参照如下内容：

接下来，调用flash矢量绘制类shape的绘制线段（lineTo）方法进行矢量图形绘制。记录轨迹的同时在鼠标位置处绘制线条。其中，所述矢量绘制类Shape主要用于绘制矢量图形，lineTo方法用来绘制线段，通过传入当前需绘制位置参数完成绘制，由于绘制过程在动画播放的每一帧都进行刷新故每帧绘制的线条片段较为细致。可参考图4，图4为根据本发明一个优选实施例的应用于网页的画笔工具进行绘制的页面示意图，如图4所示，应用矢量绘制类shape的lineTo方法绘制了图中的线条部分（图4中以红色线条标注）。

以鼠标选取画笔工具为例，按照以上方法绘制矢量线条图形时，默认情况下用户的一个绘制行为包括：按下鼠标---绘制图像---抬起鼠标三个过程。一个绘制行为触发之后会立刻将用户所绘制的图形缓存成为位图。如果用户有多次绘制行为，则缓存成多张位图。

步骤S303，当触发擦除状态时，以位图的形式缓存已绘制的图形，基于flash技术获取擦除工具的操作位置，记录擦除工具的擦除轨迹并擦除位图图形。

具体地，当触发的状态由绘制切换到擦除时，将所记录的多张位图数据合并，生成一张完整的图像。

接下来，与前述的绘制状态类似，通过诸如鼠标、触屏设备、触屏手等选取擦除工具，并通过程序读取所述擦除工具在网页画板的操作位置。同样，以鼠标为例，基于flash程序获取属性stage.MouseX和stage.MouseY，从而获得所述以擦除工具样式显示的实际鼠标相对与舞台原点所按下的位置（或全局坐标），以精确确定以位图形式缓存的图形的像素级擦除位置。可参考图5，图5为根据本发明一个优选实施例的应用于网页的画笔工具进行擦除的页面示意图。图5示出了以像素级别擦除原有绘制标注的过程（图5中以红色非连续线段展示）。

进一步地，通过加入逐帧判断函数记录鼠标擦除轨迹。在记录轨迹的同时将记录的位置部分映射到位图实际位置并擦除所记录位置的位图像素，完成擦除。

以鼠标选取擦除工具为例，按照以上方法对位图像素进行擦除时，默认情况下用户的一个擦除行为包括：按下鼠标---擦除图像---抬起鼠标三个过程。每一个过程都需要对缓存到的位图进行像素删除操作。

当用户再次切换到绘制状态时，擦除后的位图锁定，并等待再次缓存入新的矢量图形。

进一步地，可将上述方法扩展至网页上所有的可视化应用。优选地，将上述方法应用于网页ppt的播放器中，进行图形的绘制和擦除。

进一步地，上述绘制和擦除的过程是相互独立的，可以相互切换。例如，从绘制过程切换到擦除过程再切换到绘制过程时，擦除后的位图锁定，并再次缓存新的矢量图形。

与现有技术相比，本发明所提供的应用于网页的矢量图形的操作方法具有以下优点：基于本实施例提供的矢量图形操作方法，可以帮助用户在线操作图形，如在ppt画板中在线使用画笔圈点重点内容，并使用擦除工具进行任意地、精准地擦除，防止一次性擦除给用户带来的不便。

根据本发明的另一个方面，还提供了一种应用于网页的矢量图形的操作装置。请参考图6所示，图6为根据本发明另一个优选实施例的应用于网页的矢量图形的操作装置的示意性框图，如图6所示，该装置包括：

状态触发单元601，用于响应用户对网页画板中画笔工具或擦除工具的操作，触发绘制或擦除状态；

绘制单元602，基于flash技术获取画笔工具的操作位置，记录画笔工具的绘制轨迹并绘制矢量图形；

擦除单元603，以位图的形式缓存已绘制的图形，基于flash技术获取擦除工具的操作位置，记录擦除工具的擦除轨迹并擦除位图图形。

下面，将对本发明所提供的各单元或各模块的工作过程进行具体说明。

其中，状态触发单元601根据用户对画板工具的不同选择，触发相应的操作状态。典型地，用户通过鼠标、触屏设备等在网页画板中选取画笔工具或图像擦除工具后，由状态触发单元触发相应的绘制状态或擦除状态，如通过鼠标点击画笔工具后即可在画板中绘制图形，又如通过鼠标点击橡皮工具即可在画板中擦除已绘制的图形。

当状态触发单元601触发的状态为绘制状态时，由绘制单元602通过程序读取所述画笔工具在网页画板的操作位置。以鼠标选取画笔为例，所述绘制单元602首先建立flash项目文档类，将全局对象stage单例化，以便可以在flash程序的任意模块获取属性stage.MouseX和stage.MouseY，从而获得所述以画笔工具样式显示的实际鼠标相对与舞台原点所按下的位置（或全局坐标）。其中，所述MouseX属性和MouseY属性来自flash全局坐标的DisplayObject类，通常用于表示鼠标坐标，具体表示鼠标偏移坐标系原点的偏移量。

进一步地，所述绘制单元602通过逐帧判断函数记录鼠标绘制轨迹。其中，所述逐帧判断函数主要用于刷新鼠标位置，用户在绘制或擦除过程中需要记录鼠标当前位置。通过定义私有变量positionX、positionY，在动画播放的每一帧记录鼠标位置，并在每一帧的末段将stage.MouseX、stage.MouseY分别赋值给二者。

进一步地，所述绘制单元602调用flash矢量绘制类shape的lineTo方法进行矢量图形绘制。记录轨迹的同时在鼠标位置处绘制线条。Shape类主要用于绘制矢量图形，lineTo方法用来绘制线段，通过传入当前需绘制位置参数完成绘制，由于绘制过程在动画播放的每一帧都进行刷新故每帧绘制的线条片段较为细致。

以鼠标选取画笔工具为例，绘制矢量线条图形时，默认情况下用户的一个绘制行为包括：按下鼠标---绘制图像---抬起鼠标三个过程。一个绘制行为触发之后，所述绘制单元602会立刻将用户所绘制的图形缓存成为位图；如果用户有多次绘制行为，则缓存成多张位图。

当状态触发单元601触发的状态为擦除状态时，由擦除单元603通过程序读取所述擦除工具在网页画板的操作位置。以鼠标选取擦除工具为例，所述擦除单元603首先建立flash项目文档类，将全局对象stage单例化，以便可以在flash程序的任意模块获取属性stage.MouseX和stage.MouseY，从而获得所述以擦除工具样式显示的实际鼠标相对与舞台原点所按下的位置（或全局坐标），以精确确定以位图形式缓存的图形的像素级擦除位置。

进一步地，所述擦除单元603通过逐帧判断函数记录鼠标擦除轨迹。在记录轨迹的同时将记录的位置部分映射到位图实际位置并擦除所记录位置的位图像素，完成擦除。

以鼠标选取擦除工具为例，对位图像素进行擦除时，默认情况下用户的一个擦除行为包括：按下鼠标---擦除图像---抬起鼠标三个过程。每一个过程都需要对缓存到的位图进行像素删除操作。

当用户再次切换到绘制状态时，擦除后的位图锁定，并等待再次缓存入新的矢量图形。

进一步地，可将上述装置扩展至网页上所有的可视化应用。优选地，将上述装置应用于网页ppt的播放器中，进行图形的绘制和擦除。

进一步地，上述绘制单元和擦除单元的工作过程是相互独立的，可以相互切换。例如，从绘制过程切换到擦除过程再切换到绘制过程时，擦除后的位图锁定，并再次缓存新的矢量图形。

与现有技术相比，本发明所提供的应用于网页的矢量图形的操作装置可以扩展应用于网页上的图形操作，帮助用户在线操作图形，如在ppt画板中使用画笔圈点重点内容，并实现按需绘制和按需擦除，防止一次性擦除给用户带来的不便，提升了用户使用画板工具的体验。

以上所揭露的仅为本发明的较佳实施例而已，当然不能以此来限定本发明之权利范围，因此依本发明权利要求所作的等同变化，仍属本发明所涵盖的范围。

Claims (12)

1.一种应用于网页的矢量图形的操作方法，该方法包括：

响应用户对网页画板中画笔工具或擦除工具的操作，触发绘制或擦除状态；

当触发绘制状态时，基于flash技术获取画笔工具的操作位置，记录画笔工具的绘制轨迹并绘制矢量图形；

当触发擦除状态时，以位图的形式缓存已绘制的图形，基于flash技术获取擦除工具的操作位置，记录擦除工具的擦除轨迹并擦除位图图形。

2.根据权利要求1所述的操作方法，其特征在于，所述画笔工具或擦除工具通过鼠标、触屏设备或触屏手选取。

3.根据权利要求2所述的操作方法，其特征在于，所述画笔工具由鼠标选取后，建立flash项目文档类，将全局对象stage单例化，通过flash程序获取属性值stage.MouseX和stage.MouseY以获得所述画笔工具在画板的相对位置。

4.根据权利要求1或3所述的操作方法，其特征在于，调用flash矢量绘制类shape的lineTo方法绘制矢量图形。

5.根据权利要求1或3所述的操作方法，其特征在于，通过加入逐帧判断函数记录所述画笔工具或擦除工具的操作轨迹。

6.根据权利要求1至3任意一项所述的操作方法，其特征在于，所述方法应用于网页ppt播放器中。

7.一种应用于网页的矢量图形的操作装置，包括：

状态触发单元，用于响应用户对网页画板中画笔工具或擦除工具的操作，触发绘制或擦除状态；

绘制单元，基于flash技术获取画笔工具的操作位置，记录画笔工具的绘制轨迹并绘制矢量图形；

擦除单元，以位图的形式缓存已绘制的图形，基于flash技术获取擦除工具的操作位置，记录擦除工具的擦除轨迹并擦除位图图形。

8.根据权利要求7所述的操作装置，其中，所述画笔工具或擦除工具通过鼠标、触屏设备或触屏手选取，并由状态触发单元触发相应的绘制或擦除状态。

9.根据权利要求8所述的操作装置，其中，所述画笔工具由鼠标选取后，建立flash项目文档类，将全局对象stage单例化，通过flash程序获取属性值stage.MouseX和stage.MouseY以获得所述画笔工具在画板的相对位置。

10.根据权利要求7或9所述的操作装置，其中，所述绘制单元调用flash矢量绘制类shape的lineTo方法绘制矢量图形。

11.根据权利要求7或9所述的操作装置，其中，所述绘制单元或擦除单元分别通过加入逐帧判断函数记录所述画笔工具或擦除工具的操作轨迹。

12.根据权利要求7至9任意一项所述的操作装置，其特征在于，所述装置应用于网页ppt播放器中。