CN107908341A - 图像显示方法、系统、计算机可读存储介质和计算机设备 - Google Patents

Abstract

本发明涉及一种图像显示方法和系统，图像显示方法包括以下步骤：获取预先设置在图像上的方向路径；在所述图像上覆盖一个图形，并控制所述图形沿着所述方向路径移动；所述图像的原始状态为不可见状态；在所述图形移动过程中，将所述图像上与所述图形重叠的第一目标显示区域的显示状态设置为可见状态。上述图像显示方法和系统，可以根据图像的内容灵活地设置图像的动画方案，提高图像动画显示方法的灵活性。

Description

图像显示方法、系统、计算机可读存储介质和计算机设备

技术领域

本发明涉及图像演示技术领域，特别是涉及一种图像显示方法、系统、计算机可读存储介质和计算机设备。

背景技术

软件演示是通过软件进行信息传达。在用软件演示图像时，为了使演示生动有趣，并且清晰地展示内容的逻辑，往往需要对图像进行动画演示。

在对图像进行动画演示时，需要设置图像的显示方案以及隐藏方案。传统的方案都是按照动画模板对动画进行处理，并不能根据具体的图像内容来显示图像。比方说一个图像上的内容是一串螺旋状的文字，则传统的方法并不能按螺旋状文字内容对图像进行螺旋状的动画显示，只能直接应用演示软件中的动画模板，设置图像从左到右，从上到下，从里向外等模板类型的动画来显示图像。

综上所述，传统的图像动画显示方法灵活性低。

发明内容

基于此，有必要针对传统的图像动画显示方法灵活性低的问题，本发明实施例提供一种图像显示方法和系统。

一方面，本发明实施例提供一种图像显示方法，包括以下步骤：

获取预先设置在图像上的方向路径；

在所述图像上覆盖一个图形，并控制所述图形沿着所述方向路径移动；所述图像的原始状态为不可见状态；

在所述图形移动过程中，显示所述图像上与所述图形重叠的第一目标显示区域的图像内容。

另一方面，本发明实施例提供一种图像显示系统，包括：

获取模块，用于获取预先设置在图像上的方向路径；

绘制模块，用于在所述图像上覆盖一个图形，并控制所述图形沿着所述方向路径移动；所述图像的原始状态为不可见状态；

显示模块，用于在所述图形移动过程中，显示所述图像上与所述图形重叠的第一目标显示区域的图像内容。

进一步地，本发明还提供一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现上述的图像显示方法。

更进一步地，本发明还提供一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现上述的图像显示方法。

上述图像显示方法、系统、计算机可读存储介质和计算机设备，通过在图像上绘制方向路径，并控制一个图形沿着方向路径移动，将图像上与图形重叠的第一目标显示区域的显示状态设置为可见状态，可以根据图像的内容灵活地设置图像的动画方案，提高图像动画显示方法的灵活性。

附图说明

图1为本发明一个实施例的图像显示方法步骤示意图；

图2为本发明一个实施例中圆周率的图片；

图3为本发明一个实施例中圆周率的图片内容呈现的顺序示意图；

图4为本发明一个实施例中在圆周率的图片上绘制方向路径的示意图；

图5为本发明一个实施例中在圆周率的图片上提供默认宽度线条的示意图；

图6为本发明一个实施例中在图片上默认宽度线条上的设有调节点的示意图；

图7为本发明一个实施例中在圆周率的图片上方向路径的坐标示意图；

图8为本发明一个实施例中圆形在方向路径上移动的示意图；

图9为本发明一个实施例中圆周率的图片的动画显示示意图；

图10为本发明一个实施例的图像显示系统结构示意图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。

下面结合图1阐述图像显示方法的实施例。

图1为本发明一个实施例的图像显示方法步骤示意图，包括以下步骤：

S101，获取预先设置在图像上的方向路径；

具体地，图像可以是静态的图片也可以是动态的视频，本发明实施例中以静态的图片为例对本发明的方案进行详细的介绍。其中，方向路径为代表方向的直线或曲线，可以使用绘图工具创建任意形状的方向路径，方向路径没有粗细的概念，只代表方向。方向路径可以分为开放的方向路径和封闭的方向路径两种，可以根据具体图像的内容以及要显示的动画方案选择方向路径的类型。可以通过绘图工具在图像上根据图像的目标显示区域以及目标显示区域的显示顺序绘制方向路径，使得目标显示区域按显示顺序进行动画显示。

在一个具体的实施例中，在步骤S101之前还可以包括以下步骤：在图像上绘制方向路径。即，该方向路径可以预先绘制在图像上。在图像上绘制方向路径就可以根据图像的具体内容和想要呈现的动画效果来灵活地绘制方向路径，进而灵活地设置图像的动画方案。

具体地，在一个实施例中，可以通过以下步骤在图像上绘制图像的方向路径：在图像上设置起点坐标、节点坐标和终点坐标；根据所述起点坐标、节点坐标和终点坐标生成所述方向路径。

上述实施例中，节点代表的是可拖动的支点，节点之间可以由线段连接，通过调整节点的位置就可以调整线段的长度和位置。起点、节点和终点构成的曲线就是方向路径。

上述实施例，通过在方向路径上设置起点坐标、节点坐标和终点坐标来确定构成方向路径的曲线的长度和具体的形状，在图像上绘制方向路径就可以根据图像的具体内容和想要呈现的动画效果来灵活地绘制方向路径，进而灵活地设置图像的动画方案。

可选的，在一个实施例中，节点的数量可以为多个，各个节点的位置可以调整。当节点的数量为多个时，可以将起点、各个节点和终点进行连接构成一条曲线，将该曲线设为方向路径。

上述实施例，通过在方向路径上设置多个节点来灵活地调整方向路径的长度和形状，在图像上绘制方向路径就可以根据图像的具体内容和想要呈现的动画效果来灵活地绘制方向路径，进而灵活地设置图像的动画方案。

另外，在本方案的一个实施例中，在图像上绘制方向路径之前可以将图像导入演示软件中，选中图片，控制图片进入编辑路径的状态，可以使用贝赛尔曲线所构成的一段闭合或者开放的曲线段来表示方向路径。贝塞尔曲线是应用于二维图形应用程序的数学曲线，一般的矢量图形软件通过它来精确画出曲线，贝塞尔曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋，我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。贝塞尔曲线是计算机图形学中相当重要的参数曲线，在一些比较成熟的位图软件中也有贝塞尔曲线工具，比如Photo Shop，Flash 5等都提供了贝塞尔曲线工具。

上述实施例中，通过贝赛尔曲线来绘制方向路径可以使得设计师在计算机上绘制曲线就像使用常规作图工具一样得心应手。

在另一个实施例中，在获取预先设置在图像上的方向路径之后，还可以包括以下步骤：在所述方向路径上绘制预设宽度的线条；根据线条的宽度调整所述图形的尺寸。

上述实施例中，一般在演示软件中，在图像上绘制完方向路径之后，会提供一个默认宽度的线条，这个线条的宽度是可以调整的。这个线条所在的区域就是动画执行时真正呈现的区域。

上述实施例，通过调整线条的宽度可以覆盖合适的图像内容，灵活地调整动画方案，可以根据图像内容显示独特的动画。

具体的，在一个实施例中，可以根据以下方法调整线条的粗细：在所述线条的各个边界上选取调节点；通过调节所述调节点的位置来调节线条的粗细。

上述实施例中，线条的上下边界上可以各分布一个调节点，通过调整上下边界上调节点的位置来调节线条的粗细。线条越粗，同样长度的线条所呈现的图像区域的面积就越大。

上述实施例，通过在线条的边界上设置调节点，使得线条的宽度可以调整，进而通过调整线条的宽度覆盖合适的图像内容，灵活地调整动画方案，可以根据图像内容显示独特的动画。

S102，在所述图像上覆盖一个图形，并控制所述图形沿着所述方向路径移动；所述图像的原始状态为不可见状态；

在一个具体的实施例中，图像上覆盖的图形可以是半透明的圆形，也可以是正方形，长方形或者三角形，需要强调的是此处不对图形的形状和图形的透明度做限制，可以根据实际情况进行相应的调整。此时图像的状态可以为不可见状态，图像为不可见状态时，屏幕呈现的状态就是在页面背景上有一条方向路径。其中，在方向路径设置好后可以提供一个默认宽度的线条，可以调节线条的宽度，这个线条所对应的图像上的区域就是动画执行时真正呈现的区域，此线条两边都分布调节点，可以调节线条的粗细，用于覆盖合适的内容。

S103，在所述图形移动过程中，可以将所述图像上与所述图形重叠的第一目标显示区域的显示状态设置为可见状态。

比方说，在一个具体的实施例中，当图形为圆形时，第一目标显示区域就是图像上与图形重叠的圆形区域。第一目标显示区域可以设置为可见状态，原先整张图片为不可见状态，此时，图像上圆形区域的图像内容就可以由不可见变为可见，随着圆形在方向路径上的移动，图像上不同区域的图像内容就不断地显示出来。圆形在移动后，之前圆形在图像上所经过的区域仍然可以保持可见状态，也可以根据最终所要呈现的动画效果，使之前圆形在图像上所经过的区域的显示状态设置为不可见状态。由于方向路径的移动可以是连续的，故最终呈现出来的效果就可以是连续的动画。

上述实施例，通过在图像上绘制方向路径，并控制一个图形沿着方向路径移动，将图像上与图形重叠的第一目标显示区域的显示状态设置为可见状态，可以根据图像的内容灵活地设置图像的动画方案，提高图像动画显示方法的灵活性。

可选的，在一个实施例中，在步骤S103之后，还可以包括以下步骤：在所述图形相对于所述第一目标显示区域移动之后，保持所述第一目标显示区域的显示状态设置为可见状态。即圆形在移动后，之前图形在图像上所经过的区域仍然可以保持可见状态。

在上述实施例中，保持所述第一目标显示区域的显示状态设置为可见状态，可以使图像上大面积的图像内容以动画的方式显示出来，给观众更好的视觉体验，也可以根据图像的内容灵活地设置图像的动画方案，提高图像动画显示方法的灵活性。

优选地，本发明的实施例中，图形为圆形。将覆盖在图像上的图形设置为圆形可以使图形在方向路径上移动时，图形所经过的区域完全与预设的线条所在的区域重合，特别是当方向路径为曲线时，圆形相对其他图形可以更好地使所经过的区域完全与预设宽度的线条所在的区域重合。

上述实施例，通过将覆盖在图像上的图形设置为圆形，使得图形所经过的区域能更好地与预设的线条所在的区域重合，可以更精确地显示图像的动画方案。

下面结合一个具体的实施例来对本发明的图像显示方法进行详细的说明：

如图2所示的圆周率图片，图片中圆周率数字呈螺旋状，如果需要按照其中的文字内容，也就是如图3所示，将π＝3.1415926535...逐步显示，图片就需要按螺旋状动画显示出来，图片中的文字内容是按照图3中曲线的箭头所标示的方向进行动画显示。可以通过以下方式使图片中的内容按螺旋状动画显示出来。首先，可以将图片导入到演示软件中，并选中图片，使图片进入编辑路径的状态。如图4所示，可以设置方向路径的起点、若干中间节点和终点，节点之间可以通过贝塞尔曲线控制点来调节。节点构成的贝塞尔曲线就是动画路径，这个路径是没有粗细概念的，只代表方向。如图5所示，在设置完这个代表方向的路径后，会提供一个默认宽度的线条，这就是动画执行时真正呈现的区域。如图6所示，此线条各个边界上都分布调节点A、B、C和D，选取A和B两个调节点进行调整，通过调整A和B的位置可以调节线条的粗细，用于覆盖合适的内容。如图7所示，路径的坐标相对图片的坐标来确定，以图片的左上角为起点(0，0)，其中方向路径的起始节点是(38，315)，它两边的宽度控制点分别是(7，308)，(70，319)。所有节点构成方向路径，而所有控制点则构成路径区域。

如图8所示，在执行动画的时候，令一个圆沿着方向路径移动，圆的大小根据宽度控制点调整。在圆移动的过程中，圆与路径区域相交的几何区域不断合并，最终会构成路径区域，而其合并的过程，就是路径区域按照方向路径显示出来的过程。而在此之前，整张图片一直是透明的，页面背景可以是任意颜色。如图9所示，随着路径动画，其内容才逐渐不透明而显示出来。

如图10所示，本发明还提供一种图像显示系统，包括：

获取模块11，用于获取预先设置在图像上的方向路径；

在一个具体的实施例中，图像可以是静态的图片也可以是动态的视频，本发明实施例中以静态的图片为例对本发明的方案进行详细的介绍。其中，方向路径为代表方向的曲线，可以使用绘图工具创建任意形状的方向路径，方向路径没有粗细的概念，只代表方向。方向路径可以分为开放的方向路径和封闭的方向路径两种，可以根据具体图像的内容以及要显示的动画方案选择方向路径的类型。可以通过绘图工具在图像上根据图像的目标显示区域以及目标显示区域的显示顺序绘制方向路径，使得目标显示区域按显示顺序进行动画显示。

绘制模块12，用于在所述图像上覆盖一个图形，并控制所述图形沿着所述方向路径移动；所述图像的原始状态为不可见状态；

在一个具体的实施例中，图像上覆盖的图形可以是半透明的圆形，也可以是正方形，长方形或者三角形，需要强调的是此处不对图形的形状和图形的透明度做限制，可以根据实际情况进行相应的调整。此时图像的状态可以为不可见状态，图像为不可见状态时，屏幕呈现的状态就是在页面背景上有一条方向路径。其中，在方向路径设置好后可以提供一个默认宽度的线条，可以调节线条的宽度，这个线条所对应的图像上的区域就是动画执行时真正呈现的区域，此线条两边都分布调节点，可以调节线条的粗细，用于覆盖合适的内容。

显示模块13，用于在所述图形移动过程中，将所述图像上与所述图形重叠的第一目标显示区域的显示状态设置为可见状态。

比方说，在一个实施例中，当图形为圆形时，第一目标显示区域就是图像上与图形重叠的圆形区域。第一目标显示区域可以设置为可见状态，原先整张图片为不可见状态，此时，图像上圆形区域的图像内容就可以由不可见变为可见，随着圆形在方向路径上的移动，图像上不同区域的图像内容就不断地显示出来。圆形在移动后，之前圆形在图像上所经过的区域仍然可以保持可见状态，也可以根据最终所要呈现的动画效果，使之前圆形在图像上所经过的区域的显示状态为不可见状态。由于方向路径的移动可以是连续的，故最终呈现出来的效果就是可以是连续的动画。

上述实施例，通过在图像上绘制方向路径，并控制一个图形沿着方向路径移动，将图像上与图形重叠的第一目标显示区域的显示状态设置为可见状态，可以根据图像的内容灵活地设置图像的动画方案，提高图像动画显示方法的灵活性。

进一步地，本发明还提供一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现图像显示方法。

上述实施例与本发明的图像显示方法中对应的实施例相类似，此处不再赘述。

更进一步地，本发明还提供一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现如上述各实施例中的任意一种图像显示方法。

上述实施例与本发明的图像显示方法中对应的实施例相类似，此处不再赘述。

本发明的图像显示系统与本发明的图像显示方法一一对应，在上述图像显示方法的实施例阐述的技术特征及其有益效果均适用于图像显示系统的实施例中，特此声明。

在流程图中表示或在此以其他方式描述的逻辑和/或步骤，例如，可以被认为是用于实现逻辑功能的可执行指令的定序列表，可以具体实现在任何计算机可读介质中，以供指令执行系统、装置或设备(如基于计算机的系统、包括处理器的系统或其他可以从指令执行系统、装置或设备取指令并执行指令的系统)使用，或结合这些指令执行系统、装置或设备而使用。就本说明书而言，“计算机可读介质”可以是任何可以包含、存储、通信、传播或传输程序以供指令执行系统、装置或设备或结合这些指令执行系统、装置或设备而使用的装置。

计算机可读介质的更具体的示例(非穷尽性列表)包括以下：具有一个或多个布线的电连接部(电子装置)，便携式计算机盘盒(磁装置)，随机存取存储器(RAM)，只读存储器(ROM)，可擦除可编辑只读存储器(EPROM或闪速存储器)，光纤装置，以及便携式光盘只读存储器(CDROM)。另外，计算机可读介质甚至可以是可在其上打印所述程序的纸或其他合适的介质，因为可以例如通过对纸或其他介质进行光学扫描，接着进行编辑、解译或必要时以其他合适方式进行处理来以电子方式获得所述程序，然后将其存储在计算机存储器中。

应当理解，本发明的各部分可以用硬件、软件、固件或它们的组合来实现。在上述实施方式中，多个步骤或方法可以用存储在存储器中且由合适的指令执行系统执行的软件或固件来实现。例如，如果用硬件来实现，和在另一实施方式中一样，可用本领域公知的下列技术中的任一项或他们的组合来实现：具有用于对数据信号实现逻辑功能的逻辑门电路的离散逻辑电路，具有合适的组合逻辑门电路的专用集成电路，可编程门阵列(PGA)，现场可编程门阵列(FPGA)等。

在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不一定指的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。

以上所述实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。

Claims (11)

1.一种图像显示方法，其特征在于，包括以下步骤：

获取预先设置在图像上的方向路径；

在所述图像上覆盖一个图形，并控制所述图形沿着所述方向路径移动；所述图像的原始状态为不可见状态；

在所述图形移动过程中，显示所述图像上与所述图形重叠的第一目标显示区域的图像内容。

2.根据权利要求1所述的图像显示方法，其特征在于，在显示所述图像上与所述图形重叠的第一目标显示区域的图像内容之后，还包括以下步骤：

在所述图形相对于所述第一目标显示区域移动之后，仍然显示所述第一目标显示区域的图像内容。

3.根据权利要求1所述的图像显示方法，其特征在于，在获取预先设置在图像上的方向路径之后，还包括以下步骤：

在所述方向路径上绘制预设宽度的线条；

根据线条的宽度调整所述图形的尺寸。

4.根据权利要求3所述的图像显示方法，其特征在于，在所述方向路径上绘制预设宽度的线条之后，还包括以下步骤：

在所述线条的各个边界上选取调节点；

通过调节所述调节点的位置来调节线条的粗细。

5.根据权利要求1所述的图像显示方法，其特征在于，在获取预先设置在图像上的方向路径之前，还包括以下步骤：

在所述图像上绘制方向路径。

6.根据权利要求5所述的图像显示方法，其特征在于，在所述图像上绘制方向路径之前，还包括以下步骤：

将图像导入演示软件中，控制图像处于可编辑状态。

7.根据权利要求5所述的图像显示方法，其特征在于，在图像上绘制图像的方向路径，具体包括以下步骤：

在图像上设置起点坐标、节点坐标和终点坐标；

根据所述起点坐标、节点坐标和终点坐标生成所述方向路径。

8.根据权利要求7所述的图像显示方法，其特征在于，所述节点的数量为多个；各个节点的位置可以调整；

根据所述起点、节点和终点生成所述方向路径，具体包括以下步骤：

将所述起点、各个节点和终点进行连接构成一条曲线，将该曲线设为方向路径。

9.一种图像显示系统，其特征在于，包括：

获取模块，用于获取预先设置在图像上的方向路径；

绘制模块，用于在所述图像上覆盖一个图形，并控制所述图形沿着所述方向路径移动；所述图像的原始状态为不可见状态；

显示模块，用于在所述图形移动过程中，显示所述图像上与所述图形重叠的第一目标显示区域的图像内容。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现权利要求1至8任意一项所述的图像显示方法。

11.一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现权利要求1至8任意一项所述的图像显示方法。