CN112732155B - 图像显示方法、图像显示装置、电子设备及存储介质 - Google Patents

Abstract

一种图像显示方法、图像显示装置、电子设备及存储介质，该图像显示方法包括：建立图像区块组，图像区块组包括多个图像区块；存储多个图像区块对应的位图和矢量数据；基于对屏幕所显示内容的图像切换操作，获取需要显示的图像区块对应的位图并基于获取的位图进行第一阶段显示；基于需要显示的图像区块对应的矢量数据进行渲染，并基于渲染结果进行第二阶段显示，以完成显示图像的切换。该图像显示方法可以缓解或避免电子白板的卡顿问题，提升操作的流畅度，提高电子白板重绘的性能，且不会影响笔迹的显示速度和显示效果。

Description

图像显示方法、图像显示装置、电子设备及存储介质

技术领域

本公开的实施例涉及一种图像显示方法、图像显示装置、电子设备及存储介质。

背景技术

随着计算机技术的发展，在教育领域，电子板书逐渐取代黑板板书成为新一代的主流板书方式。老师可以利用触控笔或手指在电子白板的屏幕上书写内容，该屏幕基于老师书写的轨迹和力度显示相应的笔迹，从而实现板书的书写。电子板书不仅可以实现传统的黑板板书的功能，还可以具有存储、数据传输、数据编辑等多种功能，因此得到越来越广泛的应用。

发明内容

本公开至少一个实施例提供一种图像显示方法，包括：建立图像区块组，其中，所述图像区块组包括多个图像区块；存储所述多个图像区块对应的位图和矢量数据；基于对屏幕所显示内容的图像切换操作，获取需要显示的图像区块对应的位图并基于获取的位图进行第一阶段显示；基于所述需要显示的图像区块对应的矢量数据进行渲染，并基于渲染结果进行第二阶段显示，以完成显示图像的切换。

例如，在本公开一实施例提供的图像显示方法中，建立所述图像区块组包括：根据所述屏幕的尺寸以及所述屏幕的坐标系，建立所述图像区块组，其中，所述多个图像区块彼此之间具有固定的位置关系。

例如，在本公开一实施例提供的图像显示方法中，建立所述图像区块组还包括：根据显示比例和显示位置，在所述图像区块组中增加图像区块，以使所述屏幕显示的内容均落入所述图像区块组中。

例如，在本公开一实施例提供的图像显示方法中，根据所述显示比例和所述显示位置，在所述图像区块组中增加图像区块，包括：响应于所述显示比例缩小使得所述屏幕中存在显示区域无对应的图像区块，根据所述显示位置确定增补方向，并沿所述增补方向顺次增加图像区块，使得所述显示区域与增加的图像区块对应；其中，在所述显示比例下，增加的图像区块的尺寸与所述图像区块组中除了增加的图像区块以外的其他图像区块的尺寸相同。

例如，在本公开一实施例提供的图像显示方法中，在所述图像区块组中，所述多个图像区块的尺寸相同，所述多个图像区块均为正方形或均为矩形。

例如，在本公开一实施例提供的图像显示方法中，存储所述多个图像区块对应的位图和矢量数据包括：在每次笔迹操作完成时，将所述笔迹操作涉及的图像区块对应的位图和矢量数据存储到存储单元中。

例如，在本公开一实施例提供的图像显示方法中，在每次笔迹操作完成时，将所述笔迹操作涉及的图像区块对应的位图和矢量数据存储到所述存储单元中，包括：在每次笔迹操作完成时，更新所述存储单元中所述笔迹操作涉及的图像区块对应的位图和矢量数据；其中，在所述存储单元中，每个图像区块对应唯一的位图和唯一的矢量数据。

例如，在本公开一实施例提供的图像显示方法中，在每次笔迹操作完成时，将所述笔迹操作涉及的图像区块对应的位图和矢量数据存储到所述存储单元中，包括：在每次笔迹操作完成时，将所述笔迹操作涉及的图像区块对应的位图和矢量数据存储到所述存储单元中，并且，响应于所述存储单元中已经存在该图像区块对应的位图和矢量数据，保留已经存在的该图像区块对应的位图和矢量数据；其中，在所述存储单元中，每个图像区块对应于至少一张位图和至少一个矢量数据，所述存储单元中还存储有所述至少一张位图和所述至少一个矢量数据与所述笔迹操作中各个笔画的对应关系。

例如，在本公开一实施例提供的图像显示方法中，所述笔迹操作包括书写笔画和/或擦除笔画。

例如，在本公开一实施例提供的图像显示方法中，所述位图和所述矢量数据基于indexdb进行存储。

例如，在本公开一实施例提供的图像显示方法中，所述矢量数据包括笔迹轮廓点阵数据，所述笔迹轮廓点阵数据包括多个点坐标，所述多个点坐标包括基准点坐标，所述多个点坐标中除所述基准点坐标之外的点坐标基于该点坐标与所述基准点坐标之间的差值进行数据描述。

例如，在本公开一实施例提供的图像显示方法中，所述矢量数据还包括数据组织结构，所述数据组织结构体现所述笔迹操作中各个笔画的粗细信息、颜色信息、作者信息中的至少之一。

例如，在本公开一实施例提供的图像显示方法中，基于所述图像切换操作，获取需要显示的图像区块对应的位图并基于获取的位图进行所述第一阶段显示，包括：基于所述图像切换操作，从所述存储单元获取所述需要显示的图像区块对应的所述位图，并且显示所述位图以实现所述第一阶段显示。

例如，在本公开一实施例提供的图像显示方法中，所述图像切换操作包括缩放操作、平移操作、拖动操作和旋转操作中至少之一，基于所述图像切换操作，从所述存储单元获取所述需要显示的图像区块对应的所述位图，并且显示所述位图以实现所述第一阶段显示，包括：基于所述图像切换操作，从所述存储单元获取所述需要显示的图像区块对应的唯一的位图，并且显示获取的所述位图以实现所述第一阶段显示，或者，基于所述图像切换操作，从所述存储单元获取所述需要显示的图像区块对应的至少一张位图中最后存储的位图，并且显示获取的所述位图以实现所述第一阶段显示。

例如，在本公开一实施例提供的图像显示方法中，基于所述需要显示的图像区块对应的矢量数据进行渲染，并基于所述渲染结果进行所述第二阶段显示，包括：从所述存储单元获取所述需要显示的图像区块对应的唯一的矢量数据，基于获取的所述矢量数据进行渲染，并基于所述渲染结果进行所述第二阶段显示，或者，从所述存储单元获取所述需要显示的图像区块对应的至少一个矢量数据中最后存储的矢量数据，基于获取的所述矢量数据进行渲染，并基于所述渲染结果进行所述第二阶段显示。

例如，在本公开一实施例提供的图像显示方法中，所述图像切换操作包括擦除操作和撤销操作中至少之一，基于所述图像切换操作，从所述存储单元获取所述需要显示的图像区块对应的所述位图，并且显示所述位图以实现所述第一阶段显示，包括：基于所述图像切换操作，从所述存储单元获取所述需要显示的图像区块对应的至少一张位图中与所述图像切换操作涉及的笔画相对应的位图，并且显示获取的所述位图以实现所述第一阶段显示。

例如，在本公开一实施例提供的图像显示方法中，基于所述需要显示的图像区块对应的矢量数据进行渲染，并基于所述渲染结果进行所述第二阶段显示，包括：从所述存储单元获取所述需要显示的图像区块对应的至少一个矢量数据中与所述图像切换操作涉及的笔画相对应的矢量数据，基于获取的所述矢量数据进行渲染，并基于所述渲染结果进行所述第二阶段显示。

例如，在本公开一实施例提供的图像显示方法中，所述第一阶段显示用于呈现所述图像切换操作对应的图像切换过程。

例如，在本公开一实施例提供的图像显示方法中，所述第二阶段显示用于呈现所述图像切换操作完成后所显示的图像。

例如，本公开一实施例提供的图像显示方法还包括：基于选择的目标区域生成所述目标区域对应的位图；在屏幕中移除所述目标区域对应的矢量图；基于针对所述目标区域的操作，利用所述目标区域对应的位图进行第三阶段显示；完成针对所述目标区域的操作后，基于所述目标区域对应的矢量数据进行渲染并进行第四阶段显示。

例如，在本公开一实施例提供的图像显示方法中，所述目标区域对应的位图和所述目标区域对应的矢量图显示在不同的画布层上。

例如，在本公开一实施例提供的图像显示方法中，所述第三阶段显示用于呈现针对所述目标区域的操作所对应的图像切换过程，所述第四阶段显示用于呈现针对所述目标区域的操作完成后所显示的图像。

例如，在本公开一实施例提供的图像显示方法中，针对所述目标区域的操作包括缩放操作、平移操作、拖动操作和旋转操作中至少之一。

本公开至少一个实施例还提供一种图像显示装置，包括：建立单元，配置为建立图像区块组，其中，所述图像区块组包括多个图像区块；处理单元，配置为存储所述多个图像区块对应的位图和矢量数据；第一显示单元，配置为基于图像切换操作，获取需要显示的图像区块对应的位图并基于获取的位图进行第一阶段显示；第二显示单元，配置为基于所述需要显示的图像区块对应的矢量数据进行渲染，并基于渲染结果进行第二阶段显示，以完成显示图像的切换。

本公开至少一个实施例还提供一种电子设备，包括：处理器；存储器，包括一个或多个计算机程序模块；其中，所述一个或多个计算机程序模块被存储在所述存储器中并被配置为由所述处理器执行，所述一个或多个计算机程序模块包括用于实现本公开任一实施例所述的图像显示方法。

本公开至少一个实施例还提供一种存储介质，用于存储非暂时性计算机可读指令，当所述非暂时性计算机可读指令由计算机执行时可以实现本公开任一实施例所述的图像显示方法。

附图说明

为了更清楚地说明本公开实施例的技术方案，下面将对实施例的附图作简单地介绍，显而易见地，下面描述中的附图仅仅涉及本公开的一些实施例，而非对本公开的限制。

图1A为电子白板的屏幕显示内容示意图之一；

图1B为电子白板的屏幕显示内容示意图之二；

图1C为对应于图1A的画布窗口示意图；

图1D为对应于图1B的画布窗口示意图；

图2为本公开一些实施例提供的一种图像显示方法的流程示意图；

图3为图2中步骤S10的流程示意图；

图4A为本公开一些实施例提供的一种图像显示方法中建立的图像区块组的示意图；

图4B和图4C为本公开一些实施例提供的一种图像显示方法中增加图像区块的示意图；

图5A为本公开一些实施例提供的一种图像显示方法中笔迹操作涉及的图像区块的示意图；

图5B为本公开一些实施例提供的一种图像显示方法中笔迹操作涉及的图像区块的渲染过程示意图；

图6为本公开一些实施例提供的一种图像显示方法中基于图像区块进行显示的示意图；

图7为本公开一些实施例提供的另一种图像显示方法的流程示意图；

图8为本公开一些实施例提供的一种图像显示方法中进行第三阶段显示和第四阶段显示的示意图；

图9为一种可用于实施本公开实施例提供的图像显示方法的系统示意图；

图10为本公开一些实施例提供的一种图像显示装置的示意框图；

图11为本公开一些实施例提供的一种电子设备的示意框图；

图12为本公开一些实施例提供的另一种电子设备的示意框图；以及

图13为本公开一些实施例提供的一种存储介质的示意图。

具体实施方式

为使本公开实施例的目的、技术方案和优点更加清楚，下面将结合本公开实施例的附图，对本公开实施例的技术方案进行清楚、完整地描述。显然，所描述的实施例是本公开的一部分实施例，而不是全部的实施例。基于所描述的本公开的实施例，本领域普通技术人员在无需创造性劳动的前提下所获得的所有其他实施例，都属于本公开保护的范围。

除非另外定义，本公开使用的技术术语或者科学术语应当为本公开所属领域内具有一般技能的人士所理解的通常意义。本公开中使用的“第一”、“第二”以及类似的词语并不表示任何顺序、数量或者重要性，而只是用来区分不同的组成部分。同样，“一个”、“一”或者“该”等类似词语也不表示数量限制，而是表示存在至少一个。“包括”或者“包含”等类似的词语意指出现该词前面的元件或者物件涵盖出现在该词后面列举的元件或者物件及其等同，而不排除其他元件或者物件。“连接”或者“相连”等类似的词语并非限定于物理的或者机械的连接，而是可以包括电性的连接，不管是直接的还是间接的。“上”、“下”、“左”、“右”等仅用于表示相对位置关系，当被描述对象的绝对位置改变后，则该相对位置关系也可能相应地改变。

无限板书是一种支持无限笔迹的电子板书。用户可以在整个屏幕上无限制地写字，当屏幕写满时，用户只要往下或者往右继续写字，屏幕继续滚动以提供新的书写区域，从而使用户感觉被提供了一张永远都写不满的画布。

图1A为电子白板的屏幕显示内容示意图之一，图1B为电子白板的屏幕显示内容示意图之二。例如，该电子白板支持无限笔迹，也即可以实现无限板书。假设在初始时刻，用户在电子白板的屏幕上书写了四行诗词，然后对屏幕中显示的内容进行放大操作。假设在A时刻，屏幕上显示了两行诗词，也即“白日依山尽，黄河入海流，欲穷千里目，更上一层楼”。接着，用户对屏幕进行向上的滑动操作，使显示的内容上翻，从而使“白日依山尽，黄河入海流”这句诗词从屏幕上方移出屏幕并不再显示，使“解落三秋叶，能开二月花”这句诗词从屏幕下方进入屏幕并显示。完成滑动操作后，在B时刻，屏幕上显示的内容为“欲穷千里目，更上一层楼，解落三秋叶，能开二月花”。

例如，屏幕中所呈现的内容通过画布(Canvas)来绘制，Canvas是html5里的一个标准元素，可以用来渲染图形。无限板书的后台数据是无限的，但是显示在屏幕上的内容只用一张Canvas呈现。对屏幕进行上述示例中的滑动操作时，可以实现翻屏，也即是，Canvas窗口下移一个页面。图1C为对应于图1A的画布窗口示意图，图1D为对应于图1B的画布窗口示意图。如图1C和图1D所示，后台数据中包括用户书写的4行诗词，在A时刻，Canvas窗口渲染并显示“白日依山尽，黄河入海流，欲穷千里目，更上一层楼”这两行诗词，在B时刻，Canvas窗口渲染并显示“欲穷千里目，更上一层楼，解落三秋叶，能开二月花”这两行诗词，这类似于探照灯扫描的效果。通过这种方式，基于用户的操作，Canvas窗口可以渲染并显示后台数据中的任意内容，可以实现翻屏。

电子白板可以集成手写板输入设备(例如wacom)。wacom手写板输入设备提供输入点的x坐标和y坐标，还提供压感值。wacom ink sdk是与硬件配套的笔迹优化软件开发包，利用ink sdk可以得到优美的手写输出笔迹，每一笔的渲染都会生成一个矢量图形，因此进行缩放后不会存在锯齿，图像不会失真。然而，ink sdk利用输入的x坐标、y坐标和压感值这三个参数计算出光滑的笔迹(带笔锋)线条，是一个耗时的操作。假设一个笔画有约20个点，则需要消耗约0.2秒的时间才能计算出相应的笔迹。

在电子白板的使用过程中，在做平移/缩放/擦除/撤销等操作时，一般都采用重新构建和渲染所有笔迹数据的方法，也即是，针对所有笔迹数据进行矢量计算和渲染。由于重绘大量笔迹数据(也即，重新计算和构造大量矢量图形)，计算量非常大，因此会出现卡顿和不流畅的问题，这会影响操作的流畅度，降低用户体验。

本公开至少一个实施例提供一种图像显示方法、图像显示装置、电子设备及存储介质。该图像显示方法可以缓解或避免电子白板的卡顿问题，提升操作的流畅度，提高电子白板重绘的性能，且不会影响笔迹的显示速度和显示效果。

下面，将参考附图详细地说明本公开的实施例。应当注意的是，不同的附图中相同的附图标记将用于指代已描述的相同的元件。

本公开至少一个实施例提供一种图像显示方法。该图像显示方法包括：建立图像区块组，图像区块组包括多个图像区块；存储多个图像区块对应的位图和矢量数据；基于对屏幕所显示内容的图像切换操作，获取需要显示的图像区块对应的位图并基于获取的位图进行第一阶段显示；基于需要显示的图像区块对应的矢量数据进行渲染，并基于渲染结果进行第二阶段显示，以完成显示图像的切换。

图2为本公开一些实施例提供的一种图像显示方法的流程示意图。

例如，该图像显示方法应用于一电子白板，例如支持无限笔迹的电子白板，也可以为其他任意适用的电子设备，本公开的实施例对此不作限制。例如，该电子白板具有中央处理单元(Central Processing Unit，CPU)或图形处理单元(Graphics Processing Unit，GPU)，以及还包括存储器。该存储器例如为非易失性存储器(例如只读存储器(Read OnlyMemory，ROM))。例如，存储器上存储有代码或指令，通过运行这些代码或指令，可以实现本公开实施例提供的图像显示方法。

例如，该电子白板还可以包括触摸装置，例如触摸屏或触摸板，以获取用户书写时在触摸装置的工作表面上形成的笔迹。该触摸屏可以感测书写操作以形成笔迹，例如可以为电容式触摸屏，例如自容式触摸屏或互容式触摸屏，还可以为电阻式触摸屏、表面声波式触摸屏、红外式触摸屏等，本公开的实施例对此不作限制。用户可以用手指直接在触摸屏的工作表面上进行书写，也可以利用主动式触控笔或被动式触控笔在触摸屏的工作表面上进行书写，本公开的实施例对此不作限制。这里，工作表面是指用于检测用户的触摸操作的表面，例如触摸屏的触摸表面。需要说明的是，本公开的实施例中，触摸装置的类型不受限制，不仅可以为触摸屏，还可以为其他任意类型的具有触控功能的装置，这可以根据实际需求而定。

例如，该电子白板可以包括显示装置，该显示装置例如为液晶显示屏(LiquidCrystal Display，LCD)、有机发光二极管(Organic Light Emitting Diode，OLED)显示屏、量子点发光二极管(Quantum Dot Light Emitting Diode，QLED)显示屏、投影部件等，本公开的实施例对此不作限制。该显示装置可以基于本公开实施例提供的图像显示方法进行显示。

如图2所示，在至少一个实施例中，该图像显示方法包括如下操作。

步骤S10：建立图像区块组，其中，图像区块组包括多个图像区块；

步骤S20：存储多个图像区块对应的位图和矢量数据；

步骤S30：基于对屏幕所显示内容的图像切换操作，获取需要显示的图像区块对应的位图并基于获取的位图进行第一阶段显示；

步骤S40：基于需要显示的图像区块对应的矢量数据进行渲染，并基于渲染结果进行第二阶段显示，以完成显示图像的切换。

例如，如图3所示，上述步骤S10可以包括如下操作。

步骤S11：根据屏幕的尺寸以及屏幕的坐标系，建立图像区块组；

步骤S12：根据显示比例和显示位置，在图像区块组中增加图像区块，以使屏幕显示的内容均落入图像区块组中。

例如，在步骤S11中，图像区块组包括多个图像区块(Chunk)，多个图像区块彼此之间具有固定的位置关系。这里，图像区块是存在于后台数据中的虚拟区域，是一个逻辑单位，虽然图像区块在建立时需要依据屏幕的尺寸以及屏幕的坐标系，但是一旦建立好之后，图像区块则不再依附于屏幕。例如，当该图像显示方法应用于支持无限笔迹的电子白板时，图像区块实质上是对后台中的无限数据进行划分所得到的虚拟区域。例如，多个图像区块彼此之间具有固定的位置关系，也即是，各个图像区块彼此之间的相对位置保持不变。

如图4A所示，屏幕的可视区域reg约等于屏幕的尺寸，将屏幕的可视区域reg划分为多个阵列排布的正方形区域，每个正方形区域中所显示的内容对应于一个图像区块CU。例如，屏幕的可视区域reg为可操作区域，也即是，能够进行书写和显示的区域。在图4A所示的示例中，根据屏幕的尺寸，共划分了12个图像区块CU。每个图像区块CU包含了屏幕上的一个N*N(例如，N＝500，表示像素数量)的屏幕区域里的显示内容，图像区块CU中包含对应的屏幕区域内的位图(也即截屏)、坐标、长宽、变换矩阵、渲染器的上下文环境等信息。

例如，可以根据屏幕的坐标系确定每个图像区块CU的中心点的坐标。如图4A所示，(-1,-2)、(-1,-1)……(1,0)、(1,1)等表示各个图像区块CU的中心点的坐标，基于这些中心点的坐标，可以确定各个图像区块CU彼此之间的相对位置关系，从而在后续操作中保持固定的位置关系。需要说明的是，图像区块CU的中心点的坐标是以屏幕的坐标系作为参照而确定的，但图像区块CU的中心点的坐标并非一定是屏幕的坐标系中的坐标，图像区块CU的中心点的坐标可以是经过归一化、等比例缩放等处理之后所得到的坐标，这可以根据实际需求而定，只要能根据这些坐标确定各个图像区块CU彼此之间的相对位置关系即可，本公开的实施例对此不作限制。例如，各个图像区块CU的中心点的坐标中表示为(0,0)的点可以为屏幕中心点，也可以为屏幕中任意的一点，本公开的实施例对此不作限制。

需要说明的是，每个图像区块CU对应的屏幕的区域不限于为500*500，也可以为其他任意的尺寸，图像区块CU的数量也不限于为12个，可以为其他任意数量，这可以根据实际需求而定，本公开的实施例对此不作限制。

当图像区块组建立好之后，图像区块组中各个图像区块CU所包含的对应的屏幕区域内的位图(也即截屏)、坐标、长宽、变换矩阵、渲染器的上下文环境等信息被存储到后台数据中，各个图像区块CU彼此之间的位置关系也被存储到后台数据中。

例如，在步骤S12中，根据显示比例和显示位置，在图像区块组中增加图像区块，以使屏幕显示的内容均落入图像区块组中。如图4B所示，当在屏幕上执行缩小操作时，则此前划分的12个图像区块CU对应显示在屏幕上的内容被缩小，因此可视区域reg中出现了空白区域bla，空白区域bla不与任何图像区块CU对应。为了使用户在空白区域bla中书写的内容也以图像区块CU的形式存储到后台数据中，需要在图像区块组中增加图像区块CU，以使屏幕显示的内容均落入图像区块组中。也即是，需要增加对应于空白区块bla的图像区块CU。

需要说明的是，在图4B所示的情形中，屏幕中的原始内容被缩小并且显示在屏幕的左上部，因此需要在图像区块组的右侧和下侧增加图像区块CU以使屏幕显示的内容均落入图像区块组中，但这并不构成对本公开实施例的限制。对于实际应用中的具体操作(例如缩小、滑动、平移、旋转等)，只需要根据显示比例和显示位置，在可视区域reg中不与任何图像区块CU对应的区域中增加图像区块CU即可，这可以根据实际需求而定，本公开的实施例对此不作限制。

例如，在步骤S12中，根据显示比例和显示位置，在图像区块组中增加图像区块，还可以进一步包括：响应于显示比例缩小使得屏幕中存在显示区域无对应的图像区块，根据显示位置确定增补方向，并沿增补方向顺次增加图像区块，使得显示区域与增加的图像区块对应。例如，在该显示比例下，增加的图像区块的尺寸与图像区块组中除了增加的图像区块以外的其他图像区块的尺寸相同。

例如，如图4B所示，当显示比例缩小使得屏幕中存在显示区域无对应的图像区块，也即是，存在空白区域bla，该空白区域bla不与任何图像区块CU对应，则根据显示位置确定增补方向。例如，在图4B所示的示例中，根据空白区域bla的位置确定第一增补方向和第二增补方向。然后，如图4C所示，沿增补方向(例如第一增补方向和第二增补方向)顺次增加图像区块CU，使得该显示区域与增加的图像区块CU对应。由此，可以使屏幕显示的内容均落入图像区块组中，也即是，屏幕的任何区域均有对应的图像区块CU。

例如，在该显示比例下，增加的图像区块CU的尺寸与图像区块组中除了增加的图像区块CU以外的其他图像区块CU的尺寸相同。也即是，增加的图像区块CU的尺寸(也即，对应于屏幕中的区域的尺寸)需要与图像区块组中已经存在的图像区块CU的尺寸保持一致。例如，如图4A所示，在初始建立图像区块组时，每个图像区块CU包含了屏幕上的一个500*500的屏幕区域里的显示内容。当对屏幕执行缩小操作后，如图4B和图4C所示，每个图像区块CU对应于屏幕上的一个400*400的屏幕区域，此时增加的图像区块CU也需要对应于屏幕上的一个400*400的屏幕区域，从而使得各个图像区块CU对应于相同大小的屏幕区域。

例如，在图像区块组中，多个图像区块CU的尺寸相同。例如，多个图像区块CU的形状相同，可以均为正方形或均为矩形，本公开的实施例对此不作限制。

例如，如图2所示，在步骤S20中，存储多个图像区块对应的位图和矢量数据包括：在每次笔迹操作完成时，将笔迹操作涉及的图像区块对应的位图和矢量数据存储到存储单元中。例如，笔迹操作可以包括书写笔画和/或擦除笔画。

例如，在图5A和图5B所示的示例中，用户在屏幕上画了一条直线，该直线在屏幕上的位置对应于图像区块CU1、CU2、CU3、CU4和CU5。每个图像区块都有一个专门的渲染环境，负责渲染该图像区块对应的显示区域内的输入。当用户画的直线被渲染到屏幕上时，由于该直线落在图像区块CU1、CU2、CU3、CU4和CU5对应的显示区域内，图像区块CU1、CU2、CU3、CU4和CU5各自只负责渲染该直线落在自己区域内的部分，图像区块CU1、CU2、CU3、CU4和CU5各自的渲染结果拼接在一起从而形成连续的直线。

例如，如图5B所示，具体的渲染过程描述如下。在鼠标按下和移动的过程中(或者在利用触控笔或手指在屏幕上书写的过程中)，只对输入的点数据做简单的运算，保证渲染的连续性，把中间结果渲染到上层一个临时的Canvas上(例如渲染到图5B所示的临时渲染层上)。鼠标弹起的时候(或者触控笔或手指离开屏幕时)，计算所有输入点的数据，在下层的一个专用的Canvas(例如图5B所示的展示窗口层)上形成一条光滑的笔迹矢量图。

在笔迹操作完成时(也即用户画完直线时)，将该笔迹操作涉及的图像区块CU1、CU2、CU3、CU4和CU5所对应的位图和矢量数据存储到存储单元中。例如，由于采用了inksdk，因此可以得到并记录该直线的矢量数据，该矢量数据指的是根据图像区块内的单笔输入点计算出来的矢量数据。此时，在屏幕上显示的直线是基于该直线的矢量数据进行渲染然后进行屏幕光栅化的结果，屏幕上每个像素用RGBA等子像素来填充。图像区块所对应的位图是指该图像区块对应的显示区域光栅化后显示的内容，可以理解为该显示区域的截屏。对于笔迹操作所涉及到的每个图像区块，既需要存储该图像区块对应的矢量数据，又需要存储该图像区块对应的位图，该位图与屏幕上对应显示区域的显示画面相同。

例如，该存储单元为非易失性存储单元。非易失性存储单元例如可以包括只读存储器(ROM)、硬盘、可擦除可编程只读存储器(EPROM)、便携式紧致盘只读存储器(CD-ROM)、USB存储器、闪存等任意类型的存储器件，本公开的实施例对此不作限制。例如，该存储单元可以为集成在电子白板中的部件，也可以为部署在云端的存储部件，本公开的实施例对此不作限制。

例如，在一些示例中，在每次笔迹操作完成时，将笔迹操作涉及的图像区块对应的位图和矢量数据存储到存储单元中，包括：在每次笔迹操作完成时，更新存储单元中该笔迹操作涉及的图像区块对应的位图和矢量数据。在存储单元中，每个图像区块对应唯一的位图和唯一的矢量数据。也即是，若笔迹操作涉及某一图像区块，则将该图像区块最新的位图和矢量数据存储到存储单元中，若在本次存储之前，存储单元中已经存在该图像区块对应的位图和矢量数据，则将存储单元中已经存在的对应于该图像区块的位图和矢量数据删除。由此，使得每个图像区块对应唯一的位图和唯一的矢量数据。

例如，在另一些示例中，在每次笔迹操作完成时，将笔迹操作涉及的图像区块对应的位图和矢量数据存储到存储单元中，包括：在每次笔迹操作完成时，将笔迹操作涉及的图像区块对应的位图和矢量数据存储到存储单元中，并且，响应于存储单元中已经存在该图像区块对应的位图和矢量数据，保留已经存在的该图像区块对应的位图和矢量数据。例如，在存储单元中，每个图像区块对应于至少一张位图和至少一个矢量数据，存储单元中还存储有至少一张位图和至少一个矢量数据与笔迹操作中各个笔画的对应关系。也即是，若笔迹操作涉及某一图像区块，则将该图像区块最新的位图和矢量数据存储到存储单元中，若在本次存储之前，存储单元中已经存在该图像区块对应的位图和矢量数据，则保留存储单元中已经存在的对应于该图像区块的位图和矢量数据。

此时，每个图像区块可能对应于一张位图或多张位图，相应地，也对应于一个矢量数据或多个矢量数据。为了对这些位图或矢量数据进行区分，将位图和矢量数据与笔迹操作中各个笔画的对应关系也存储到存储单元中。例如，可以采用映射表的方式存储位图和矢量数据与笔迹操作中各个笔画的对应关系。例如，在一些示例中，若某一位图和某一矢量数据与某一笔画对应，则是指该位图和该矢量数据是书写该笔画之前的时刻所存储的位图和矢量数据，或者也可以指该位图和该矢量数据是书写该笔画完成的时刻所存储的位图和矢量数据，或者还可以指该位图和该矢量数据是与该笔画关联的其他时刻所存储的位图和矢量数据，本公开的实施例对此不作限制。位图和矢量数据与笔迹操作中各个笔画的对应关系是指位图和矢量数据与各个笔画相关联的时刻的对应关系。

例如，图像区块组中所有图像区块所对应的位图和矢量数据构成了后台中的无限数据，这些位图和矢量数据是根据与图像区块的对应关系分区存储的。基于无限数据，可以实现无限笔迹、无限板书。

例如，位图和矢量数据基于indexdb进行存储。indexdb是一种可以在浏览器内持久化存储数据的方法。当应用本公开实施例提供的图像显示方法的电子白板基于B/S架构进行操作时，可以采用indexdb实现数据存储。关于indexdb的详细说明可参考常规设计，此处不再详述。需要说明的是，本公开的实施例中，位图和矢量数据也可以基于其他适用的方式进行存储，而不限于indexdb，这可以根据实际需求而定，本公开的实施例对此不作限制。

例如，每个图像区块对应的矢量数据包括笔迹轮廓点阵数据。笔迹轮廓点阵数据包括多个点坐标，多个点坐标包括基准点坐标，多个点坐标中除基准点坐标之外的点坐标基于该点坐标与基准点坐标之间的差值进行数据描述。这里，“数据描述”例如是指坐标表示方式。

也即是，首先由ink sdk得到多个初始点坐标，关于利用ink sdk得到初始点坐标的方法可以参考常规设计，此处不再详述。接着，可以在多个初始点坐标中选择一个作为基准点坐标。例如，可以根据实际需求选择任意的初始点坐标作为基准点坐标。然后，除了基准点坐标以外，计算其他初始点坐标与基准点坐标之间的差值，并利用计算得到的差值来描述点坐标，从而构成笔迹轮廓点阵数据。

例如，在一些示例中，对于某一初始点坐标，可以将该初始点坐标的前一个初始点坐标作为基准点坐标，并利用两者的差值来描述点坐标。在对每一个初始点坐标进行数据描述时，都是以该初始点坐标的前一个初始点坐标作为基准点坐标进行的。通过这种方式，可以使差值的数值较小，便于存储和传输。

例如，在另一些示例中，可以将所有初始点坐标作为一组，选定一个基准点坐标之后，对于其余的初始点坐标，计算每个初始点坐标与基准点坐标之间的差值，并利用计算得到的差值来描述相应的点坐标。通过这种方式，可以简化计算，提高计算效率，减小积累误差。

例如，在再一些示例中，可以将所有初始点坐标划分为多组，每组初始点坐标的数量不受限制，可以根据实际需求而定。对于每组初始点坐标，在该组初始点坐标中选择一个作为该组的基准点坐标，然后计算该组中其余初始点坐标与该组的基准点坐标之间的差值，并利用计算得到的差值来描述相应的点坐标。不同组初始点坐标的数量可以相同也可以不同，这可以根据实际需求而定，例如根据笔迹的轨迹特点而定。通过这种方式，可以提高计算精度，可以在笔迹较为复杂的情形仍然具有较高的精度。

例如，在所有初始点坐标被划分为多组的情形，可以针对每一组初始点坐标设置权重值，并利用权重值以及初始点坐标与基准点坐标之间的差值来描述相应的点坐标。例如，在一些示例中，所有初始点坐标被划分为三组，分别针对这三组初始点坐标设置三个权重值，每一组初始点坐标对应于一个权重值。假设第一组初始点坐标的权重值为Q，第一组初始点坐标包括第一初始点坐标(例如由ink sdk得到的坐标值为P1)和第二初始点坐标(例如由ink sdk得到的坐标值为P2)，第一组的基准坐标点的坐标值例如为H(也是由inksdk得到)，则采用本公开实施例提供的数据描述方式时，第一初始点坐标可以表示为(P1-H)*Q，第二初始点坐标可以表示为(P2-H)*Q。例如，权重值Q的范围为0～1，例如还可以为0.2～0.8。

需要说明的是，当P1、P2、H这些坐标值较为接近，仅在精度位上有差异时，则P1-H可以表示精度位上的差值，P2-H也可以表示精度位上的差值，只需要另行保留精度位的信息即可。

通过设置权重值，可以针对不同的笔迹或针对笔迹中不同的部分进行坐标调节，以实现减小误差、美化笔迹的目的。例如，不同组初始点坐标所对应的权重值可以相同也可以不同，这可以根据实际需求而定，例如根据笔迹的轨迹特点而定。

例如，在一些示例中，采用浮点数据，假设屏幕中有三个点的初始点坐标为1.222333、1.222335、1.222336，如果按照实际的数据格式传输这些坐标，需要28个字符。然而，在本公开的实施例中，在一些示例中，可以选择1.222333作为基准点坐标，并且协同多方确定了精度位置为小数点后保留6位，则1.222335可以采用其与基准点坐标的差值(也即2，在确定了精度位置为小数点后保留6位的前提下)来描述，1.222336也可以采用其与基准点坐标的差值(也即3，在确定了精度位置为小数点后保留6位的前提下)来描述。因此，这些点坐标可以表示为1.222333、2、3，在进行传输时只需要传输9个字符即可。

或者，在另一些示例中，在表示1.222335这个点时，采用其前一个点也即1.222333作为基准点坐标，则1.222335可以采用其与基准点坐标的差值(也即2，在确定了精度位置为小数点后保留6位的前提下)来描述；在表示1.222336这个点时，采用其前一个点也即1.222335作为基准点坐标，则1.222336可以采用其与基准点坐标的差值(也即1，在确定了精度位置为小数点后保留6位的前提下)来描述。在该情形下，这些点坐标可以表示为1.222333、2、1，在进行传输时只需要传输9个字符即可。

在本公开的实施例中，笔迹轮廓点阵数据采用的模型与传统的SVG矢量数据不同，而是采用上文描述的增量方式进行数据描述的模型。因此，当通过网络传输本公开实施例的笔迹轮廓点阵数据时，可以极大地减少数据量，提高传输效率，降低对带宽的要求。

例如，除了包括笔迹轮廓点阵数据之外，各个图像区块对应的矢量数据还可以包括数据组织结构，该数据组织结构体现笔迹操作中各个笔画的粗细信息、颜色信息、作者信息中的至少之一，这些信息可以利用ink sdk得到，此处不再详述。例如，在需要进行数据传输时，可以采用protobuffer和gzip压缩来对矢量数据进行压缩。

例如，如图2所示，在步骤S30中，可以基于图像切换操作，从存储单元获取需要显示的图像区块对应的位图，并且显示位图以实现第一阶段显示。例如，图像切换操作包括缩放操作、平移操作、拖动操作、旋转操作、擦除操作和撤销操作中至少之一。例如，第一阶段显示用于呈现该图像切换操作对应的图像切换过程，也即是，呈现具有动态变化效果的切换过程。例如，当图像切换操作为缩放操作时，第一阶段显示用于呈现所选择的屏幕内容的缩小或放大的动态变化过程，当图像切换操作为旋转操作时，第一阶段显示用于呈现所选择的屏幕内容的旋转过程。

例如，在一些示例中，如图5B所示，当需要对屏幕中显示的直线进行缩放操作时，可以获取图像区块CU1、CU2、CU3、CU4和CU5分别对应的位图，将利用该位图呈现的缩小或放大过程显示在展示窗口层，从而实现第一阶段显示。

需要说明的是，在第一阶段显示的过程中，并不会对需要显示的图像区块所对应的矢量数据进行渲染，而是利用该图像区块对应的位图进行显示，也即，利用位图来呈现与图像切换操作相对应的动态变化过程。

例如，在一些示例中，当存储单元中存储了每个图像区块对应的唯一的位图和唯一的矢量数据，且图像切换操作包括缩放操作、平移操作、拖动操作和旋转操作中至少之一时，可以基于图像切换操作，从存储单元获取需要显示的图像区块对应的唯一的位图，并且显示获取的位图以实现第一阶段显示。也即是，利用获取的位图来呈现具有动态变化效果的图像切换过程，例如对该位图进行缩放、平移、拖动或旋转。

例如，在一些示例中，当存储单元中存储有每个图像区块对应的至少一张位图和至少一个矢量数据，且图像切换操作包括缩放操作、平移操作、拖动操作和旋转操作中至少之一时，可以基于图像切换操作，从存储单元获取需要显示的图像区块对应的至少一张位图中最后存储的位图，并且显示获取的位图以实现第一阶段显示。也即是，利用获取的位图来呈现具有动态变化效果的图像切换过程，例如对该位图进行缩放、平移、拖动或旋转。

例如，在一些示例中，当存储单元中存储有每个图像区块对应的至少一张位图和至少一个矢量数据，且图像切换操作包括擦除操作和撤销操作中至少之一时，可以基于图像切换操作，从存储单元获取需要显示的图像区块对应的至少一张位图中与该图像切换操作涉及的笔画相对应的位图，并且显示获取的位图以实现第一阶段显示。也即是，当要擦除或撤销某一笔画时，获取与该笔画对应的位图(例如，对应的位图为书写该笔画的初始时刻所存储的位图，该位图中还没有该笔画)，利用获取的位图来呈现具有动态变化效果的图像切换过程，例如呈现擦除或撤销笔画的过程，也即该笔画从有变为无的过程。

例如，如图2所示，在步骤S40中，基于需要显示的图像区块对应的矢量数据进行渲染，并基于渲染结果进行第二阶段显示，以完成显示图像的切换。例如，该第二阶段显示用于呈现图像切换操作完成后所显示的图像，也即是，呈现切换完成之后的静态显示效果。例如，当图像切换操作为缩放操作时，第二阶段显示用于呈现所选择的屏幕内容被缩小或放大之后的图像，当图像切换操作为旋转操作时，第二阶段显示用于呈现所选择的屏幕内容在旋转完成之后的图像。例如，第二阶段显示与第一阶段显示为连续的两个显示阶段，在第一阶段显示完成后进行第二阶段显示。

例如，在一些示例中，如图5B所示，在对屏幕中显示的直线进行缩放操作且缩放操作完成之后，对图像区块CU1、CU2、CU3、CU4和CU5分别应用变换矩阵，然后获取图像区块CU1、CU2、CU3、CU4和CU5分别对应的矢量数据，利用获取的矢量数据进行渲染并基于渲染结果在展示窗口层进行显示，从而实现第二阶段显示。

例如，在一些示例中，当存储单元中存储了每个图像区块对应的唯一的位图和唯一的矢量数据，且图像切换操作包括缩放操作、平移操作、拖动操作和旋转操作中至少之一时，可以从存储单元获取需要显示的图像区块对应的唯一的矢量数据，基于获取的矢量数据进行渲染，并基于渲染结果进行第二阶段显示。也即是，利用获取的矢量数据进行渲染，以显示切换完成之后的图像。

例如，在一些示例中，当存储单元中存储有每个图像区块对应的至少一张位图和至少一个矢量数据，且图像切换操作包括缩放操作、平移操作、拖动操作和旋转操作中至少之一时，可以从存储单元获取需要显示的图像区块对应的至少一个矢量数据中最后存储的矢量数据，基于获取的矢量数据进行渲染，并基于渲染结果进行第二阶段显示。也即是，利用获取的矢量数据进行渲染，以显示切换完成之后的图像。

例如，在一些示例中，当存储单元中存储有每个图像区块对应的至少一张位图和至少一个矢量数据，且图像切换操作包括擦除操作和撤销操作中至少之一时，可以从存储单元获取需要显示的图像区块对应的至少一个矢量数据中与该图像切换操作涉及的笔画相对应的矢量数据(例如对该笔画进行擦除操作或撤销操作完成之后所存储的矢量数据)，基于获取的矢量数据进行渲染，并基于渲染结果进行第二阶段显示。也即是，利用获取的矢量数据进行渲染，以显示切换完成之后的图像。例如，当图像切换操作为擦除操作时，在基于矢量数据进行渲染时，可以只渲染擦除的笔画所在的局部区域，而其他区域可以使用执行擦除操作之前该图像区块对应的位图来进行显示，从而可以提高渲染效率和速度。例如，在一些示例中，擦除的是最后书写的笔画，则擦除完成后，可以省略渲染的过程，直接采用执行擦除操作之前该图像区块对应的位图来进行显示。

图6为本公开一些实施例提供的一种图像显示方法中基于图像区块进行显示的示意图。例如，在一些示例中，如图6所示，在A时刻，屏幕上显示诗句“白日依山尽，黄河入海流，欲穷千里目，更上一层楼”，这些诗句为图像区块CU6对应的内容，此时基于CU6对应的矢量数据进行渲染并显示上述诗句。接着，用户对屏幕进行向上的滑动操作，使显示的内容上翻，从而使“白日依山尽，黄河入海流”这句诗词从屏幕上方移出屏幕并不再显示，使“解落三秋叶，能开二月花”这句诗词从屏幕下方进入屏幕并显示。

完成滑动操作后，在B时刻，屏幕上显示的内容为“欲穷千里目，更上一层楼，解落三秋叶，能开二月花”。用户的该操作涉及的图像区块为CU6和CU7，因此，在用户进行滑动操作的过程中，从后台中的无限数据中读取图像区块CU6和CU7分别对应的位图，并基于位图显示屏幕内容上移的过程。当完成滑动操作后，从后台中的无限数据中读取图像区块CU6和CU7分别对应的矢量数据，基于矢量数据进行渲染并基于渲染结果进行显示。

在使用支持无限笔迹的电子白板时，用户对屏幕上显示的内容进行缩放、平移、拖动、旋转、擦除和撤销等操作时，若使用矢量数据进行渲染并呈现这些操作对应的动态变化效果，由于基于矢量数据的渲染需要花费较多时间而动态变化效果具有较快的变化速度，因此会出现卡顿、不流畅的问题，这影响了用户的使用体验。

在本公开的实施例中，利用图像区块对应的位图进行第一阶段显示(也即，呈现图像切换操作对应的图像切换过程)，并利用图像区块对应的矢量数据进行第二阶段显示(也即，呈现图像切换操作完成后所显示的图像)。即使图像切换过程的动态变化效果具有较快的变化速度，但是由于使用位图来呈现该动态变化效果，而无需基于矢量数据来渲染，因此大大提高了操作的流畅度，缓解或避免了卡顿问题。图像切换过程通常持续时间较短，因此在该过程中即使使用位图显示，也不会对用户所看到的图像的清晰度造成影响。在图像切换操作完成后，使用矢量数据进行渲染并显示，可以保证用户看到的图像的清晰度。通过利用缓存机制(例如存储位图)，可以减少内存消耗(例如减少进行矢量数据渲染所导致的内存消耗)，不会损失速度。

本公开实施例提供的图像显示方法可以提高电子白板重绘的性能，不会影响笔迹的显示速度和显示效果。利用该图像显示方法，使用电子白板的用户既可以使书写的笔画具有笔锋，达到美观的效果，又可以流畅地无限制地进行书写。

例如，用户在滚动屏幕的过程中，画布窗口(Canvas)扫描由多个图像区块组成的无限数据，且画布窗口只负责显示画布窗口内对应的图像区块里的内容。用户在快速地滚动屏幕、缩放屏幕、甚至旋转屏幕的过程中，在鼠标移动时，重绘的是图像区块对应的位图，而不需要重新计算和逐帧构建矢量图来进行重绘，极大地提升了操作的流畅度，缓解或避免了卡顿问题。当用户松开鼠标时，才需要重新构建和渲染在画布窗口内需要显示的矢量图。

图7为本公开一些实施例提供的另一种图像显示方法的流程示意图，图8为本公开一些实施例提供的一种图像显示方法中进行第三阶段显示和第四阶段显示的示意图。

例如，如图7所示，在一些实施例中，该图像显示方法还可以包括如下操作。

步骤S50：基于选择的目标区域生成目标区域对应的位图；

步骤S60：在屏幕中移除目标区域对应的矢量图；

步骤S70：基于针对目标区域的操作，利用目标区域对应的位图进行第三阶段显示；

步骤S80：完成针对目标区域的操作后，基于目标区域对应的矢量数据进行渲染并进行第四阶段显示。

下面结合图7和图8对上述各个步骤进行说明。

例如，在步骤S50中，在可视区域中，假设用户选择了一个目标区域并要对该目标区域显示的内容进行操作，则基于选择的目标区域生成目标区域对应的位图。如图8所示，在一些示例中，可视区域基于矢量数据渲染并显示了三个数字，分别为1、2、3，这些数字的矢量图被渲染到下层画布中。假设用户框选了显示数字2的区域(该区域即为目标区域)，则基于用户框选的区域生成该区域对应的位图(例如该区域的截屏)。例如，生成的位图被渲染到上层画布中。

例如，在步骤S60中，在屏幕中移除目标区域对应的矢量图。如图8所示，移除可视区域中显示的数字2对应的矢量图，需要说明的是，此时上层画布中显示了数字2所在区域的位图，因此用户通过屏幕看到的内容中仍然包括数字2。

例如，在步骤S70中，基于针对目标区域的操作，利用目标区域对应的位图进行第三阶段显示。例如，第三阶段显示用于呈现针对目标区域的操作所对应的图像切换过程。例如，如图8所示，用户对数字2所在区域执行了旋转操作，那么采用该区域的位图在上层画布中呈现旋转变化过程。由于采用位图而非矢量图来进行显示，因此即使该区域的旋转变化过程的变化速度较快，也不会出现卡顿、不流畅的问题。而且，由于该区域的旋转变化过程的持续时间很短，即使采用位图显示，也不会对用户所看到的数字2的清晰度造成影响。

例如，在步骤S80中，完成针对目标区域的操作后，基于目标区域对应的矢量数据进行渲染并进行第四阶段显示。例如，第四阶段显示用于呈现针对目标区域的操作完成后所显示的图像。例如，如图8所示，用户对数字2所在的区域的旋转操作执行结束后，ink sdk会将变换矩阵应用于该区域对应的矢量数据，从而得到更新后的矢量数据，然后基于更新后的矢量数据进行渲染并在下层画布上显示数字2。此时是基于矢量数据的渲染结果进行显示，因此可以保证用户看到的数字2的清晰度。对于数字1和数字3所在的区域，可以无需进行矢量图的重绘。

通过上述方式，可以使针对局部区域的操作所对应的画面显示更流畅，缓解或避免卡顿的问题，从而提高用户体验。

例如，目标区域对应的位图和目标区域对应的矢量图显示在不同的画布层上。例如在图8所示的示例中，目标区域对应的位图显示在上层画布上，而目标区域对应的矢量图显示在下层画布上。例如，针对目标区域的操作包括缩放操作、平移操作、拖动操作和旋转操作中至少之一。

需要说明的是，本公开的实施例中，图像显示方法的各个步骤的执行顺序不受限制，虽然上文以特定顺序描述了各个步骤的执行过程，但这并不构成对本公开实施例的限制。该图像显示方法中的各个步骤可以串行执行或并行执行，这可以根据实际需求而定。该图像显示方法还可以包括更多或更少的步骤，例如，为了达到更好的显示效果而增加一些预处理步骤，或者将一些中间过程的数据存储并用于后续处理和计算，以省略一些相似的步骤。

图9为一种可用于实施本公开实施例提供的图像显示方法的系统示意图。如图9所示，该系统100可以包括用户终端110、网络120、服务器130以及数据库140。例如，该系统100可以用于实施本公开任一实施例提供的图像显示方法。

用户终端110例如为电子白板110-1。可以理解的是，用户终端110可以是能够进行显示并且具有触摸检测功能的任何其他类型的电子设备，其可以包括但不限于台式电脑、笔记本电脑、平板电脑、智能手机、智能家居设备、可穿戴设备、车载电子设备、监控设备、户外广告牌等。用户终端110也可以是设置有电子设备的任何装备，例如车辆、机器人等。

用户可以用手指或触控笔在用户终端110的触摸装置的工作表面上进行书写或执行图像切换操作，用户终端110执行本公开实施例提供的图像显示方法，从而显示用户书写的内容并显示对应于图像切换操作的动态变化过程。用户终端110可以将生成的位图和矢量数据通过网络120传输给服务器130，用户终端110还可以通过网络120接收服务器130传输的数据，例如位图和矢量数据。

用户终端110可以基于B/S架构实施本公开实施例提供的图像显示方法。用户终端110也可以基于C/S架构实施本公开实施例提供的图像显示方法，例如用户终端110可以利用其内置的应用程序执行图像显示方法，也可以通过调用用户终端110外部存储的应用程序执行图像显示方法。

网络120可以是单个网络，或至少两个不同网络的组合。例如，网络120可以包括但不限于局域网、广域网、公用网络、专用网络等中的一种或几种的组合，例如，可以为有线网络、无线网络或它们的任意组合。

服务器130可以是一个单独的服务器，或一个服务器群组，群组内的各个服务器通过有线的或无线的网络进行连接；服务器130也可以是云服务器。一个服务器群组可以是集中式的，例如数据中心，也可以是分布式的。服务器130可以是本地的或远程的。

数据库140可以泛指具有存储功能的设备。数据库140主要用于存储用户终端110和服务器130在工作中所利用、产生和输出的各种数据。数据库140可以是本地的或远程的。数据库140可以包括各种存储器、例如随机存取存储器(Random Access Memory，RAM)、只读存储器(Read Only Memory，ROM)等。以上提及的存储设备只是列举了一些例子，该系统100可以使用的存储设备并不局限于此。

数据库140可以经由网络120与服务器130或其一部分相互连接或通信，或直接与服务器130相互连接或通信，或是上述两种方式的结合。

在一些示例中，数据库140可以是独立的设备。在另一些示例中，数据库140也可以集成在用户终端110和服务器130中的至少一个中。例如，数据库140可以设置在用户终端110上，也可以设置在服务器130上。又例如，数据库140也可以是分布式的，其一部分设置在用户终端110上，另一部分设置在服务器130上。

本公开至少一个实施例还提供一种图像显示装置。该图像显示装置可以缓解或避免电子白板的卡顿问题，提升操作的流畅度，提高电子白板重绘的性能，且不会影响笔迹的显示速度和显示效果。

图10为本公开一些实施例提供的一种图像显示装置的示意框图。如图10所示，该图像显示装置20包括建立单元21、处理单元22、第一显示单元23和第二显示单元24。例如，该图像显示装置20可以应用于书写软件、绘画软件、云教室电子板书软件等应用程序中，也可以应用于任意的需要进行书写和显示的设备或系统中，本公开的实施例对此不作限制。

建立单元21配置为建立图像区块组，图像区块组包括多个图像区块。例如，建立单元21可以执行如图2所示的图像显示方法的步骤S10。处理单元22配置为存储多个图像区块对应的位图和矢量数据。例如，处理单元22可以执行如图2所示的图像显示方法的步骤S20。第一显示单元23配置为基于图像切换操作，获取需要显示的图像区块对应的位图并基于获取的位图进行第一阶段显示。例如，第一显示单元23可以执行如图2所示的图像显示方法的步骤S30。第二显示单元24配置为基于需要显示的图像区块对应的矢量数据进行渲染，并基于渲染结果进行第二阶段显示，以完成显示图像的切换。例如，第二显示单元24可以执行如图2所示的图像显示方法的步骤S40。

例如，建立单元21、处理单元22、第一显示单元23和第二显示单元24可以为硬件、软件、固件以及它们的任意可行的组合。例如，建立单元21、处理单元22、第一显示单元23和第二显示单元24可以为专用或通用的电路、芯片或装置等，也可以为处理器和存储器的结合。关于建立单元21、处理单元22、第一显示单元23和第二显示单元24的具体实现形式，本公开的实施例对此不作限制。

需要说明的是，本公开的实施例中，图像显示装置20的各个单元与前述的图像显示方法的各个步骤对应，关于该图像显示装置20的具体功能可以参考上文中图像显示方法的相关描述，此处不再赘述。图10所示的图像显示装置20的组件和结构只是示例性的，而非限制性的，根据需要，该图像显示装置20还可以包括其他组件和结构。例如，在一些示例中，图像显示装置20还可以包括第三显示单元，该第三显示单元配置为基于选择的目标区域生成目标区域对应的位图，在屏幕中移除目标区域对应的矢量图，基于针对目标区域的操作，利用目标区域对应的位图进行第三阶段显示，完成针对目标区域的操作后，基于目标区域对应的矢量数据进行渲染并进行第四阶段显示。也即是，该第三显示单元可以执行如图7所示的步骤S50-S80。

本公开至少一个实施例还提供一种电子设备，该电子设备包括处理器和存储器，一个或多个计算机程序模块被存储在该存储器中并被配置为由该处理器执行，一个或多个计算机程序模块包括用于实现本公开任一实施例提供的图像显示方法的指令。该电子设备可以缓解或避免电子白板的卡顿问题，提升操作的流畅度，提高电子白板重绘的性能，且不会影响笔迹的显示速度和显示效果。

图11为本公开一些实施例提供的一种电子设备的示意框图。如图11所示，该电子设备30包括处理器31和存储器32。存储器32用于存储非暂时性计算机可读指令(例如一个或多个计算机程序模块)。处理器31用于运行非暂时性计算机可读指令，非暂时性计算机可读指令被处理器31运行时可以执行上文所述的图像显示方法中的一个或多个步骤。存储器32和处理器31可以通过总线系统和/或其它形式的连接机构(未示出)互连。例如，该电子设备30可以采用Windows、Android等操作系统，根据本公开实施例的图像显示方法通过运行于该操作系统中的应用程序实现，或者通过安装在该操作系统中的浏览器访问云端服务器提供的网站而实现。

例如，处理器31可以是中央处理单元(CPU)、图形处理单元(GPU)、数字信号处理器(DSP)或者具有数据处理能力和/或程序执行能力的其它形式的处理单元，例如现场可编程门阵列(FPGA)等；例如，中央处理单元(CPU)可以为X86或ARM架构等。处理器31可以为通用处理器或专用处理器，可以控制电子设备30中的其它组件以执行期望的功能。

例如，存储器32可以包括一个或多个计算机程序产品的任意组合，计算机程序产品可以包括各种形式的计算机可读存储介质，例如易失性存储器和/或非易失性存储器。易失性存储器例如可以包括随机存取存储器(RAM)和/或高速缓冲存储器(cache)等。非易失性存储器例如可以包括只读存储器(ROM)、硬盘、可擦除可编程只读存储器(EPROM)、便携式紧致盘只读存储器(CD-ROM)、USB存储器、闪存等。在计算机可读存储介质上可以存储一个或多个计算机程序模块，处理器31可以运行一个或多个计算机程序模块，以实现电子设备30的各种功能。在计算机可读存储介质中还可以存储各种应用程序和各种数据以及应用程序使用和/或产生的各种数据等。

需要说明的是，本公开的实施例中，电子设备30的具体功能和技术效果可以参考上文中关于图像显示方法的描述，此处不再赘述。

图12为本公开一些实施例提供的另一种电子设备的示意框图。该电子设备40例如适于用来实施本公开实施例提供的图像显示方法。电子设备40可以是电子白板等。需要注意的是，图12示出的电子设备40仅仅是一个示例，其不会对本公开实施例的功能和使用范围带来任何限制。

如图12所示，电子设备40可以包括处理装置(例如中央处理器、图形处理器等)41，其可以根据存储在只读存储器(ROM)42中的程序或者从存储装置48加载到随机访问存储器(RAM)43中的程序而执行各种适当的动作和处理。在RAM 43中，还存储有电子设备40操作所需的各种程序和数据。处理装置41、ROM 42以及RAM 43通过总线44彼此相连。输入/输出(I/O)接口45也连接至总线44。

通常，以下装置可以连接至I/O接口45：包括例如触摸屏、触摸板、键盘、鼠标、摄像头、麦克风、加速度计、陀螺仪等的输入装置46；包括例如液晶显示器(LCD)、扬声器、振动器等的输出装置47；包括例如磁带、硬盘等的存储装置48；以及通信装置49。通信装置49可以允许电子设备40与其他电子设备进行无线或有线通信以交换数据。虽然图12示出了具有各种装置的电子设备40，但应理解的是，并不要求实施或具备所有示出的装置，电子设备40可以替代地实施或具备更多或更少的装置。

例如，根据本公开的实施例，图2所示的图像显示方法可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在非暂态计算机可读介质上的计算机程序，该计算机程序包括用于执行上述图像显示方法的程序代码。在这样的实施例中，该计算机程序可以通过通信装置49从网络上被下载和安装，或者从存储装置48安装，或者从ROM 42安装。在该计算机程序被处理装置41执行时，可以实现本公开实施例提供的图像显示方法中限定的功能。

本公开至少一个实施例还提供一种存储介质，用于存储非暂时性计算机可读指令，当该非暂时性计算机可读指令由计算机执行时可以实现本公开任一实施例所述的图像显示方法。利用该存储介质，可以缓解或避免电子白板的卡顿问题，提升操作的流畅度，提高电子白板重绘的性能，且不会影响笔迹的显示速度和显示效果。

图13为本公开一些实施例提供的一种存储介质的示意图。如图13所示，存储介质50用于存储非暂时性计算机可读指令51。例如，当非暂时性计算机可读指令51由计算机执行时可以执行根据上文所述的图像显示方法中的一个或多个步骤。

例如，该存储介质50可以应用于上述电子设备中。例如，存储介质50可以为图11所示的电子设备30中的存储器32。例如，关于存储介质50的相关说明可以参考图11所示的电子设备30中的存储器32的相应描述，此处不再赘述。

有以下几点需要说明：

(1)本公开实施例附图只涉及到本公开实施例涉及到的结构，其他结构可参考通常设计。

(2)在不冲突的情况下，本公开的实施例及实施例中的特征可以相互组合以得到新的实施例。

以上所述，仅为本公开的具体实施方式，但本公开的保护范围并不局限于此，本公开的保护范围应以所述权利要求的保护范围为准。

Claims (24)

1.一种图像显示方法，包括：

建立图像区块组，其中，所述图像区块组包括多个图像区块；

存储所述多个图像区块对应的位图和矢量数据；

基于对屏幕所显示内容的图像切换操作，获取需要显示的图像区块对应的位图并基于获取的位图进行第一阶段显示，其中，所述第一阶段显示用于呈现所述图像切换操作对应的图像切换过程；

基于所述需要显示的图像区块对应的矢量数据进行渲染，并基于渲染结果进行第二阶段显示，以完成显示图像的切换，其中，所述第二阶段显示用于呈现所述图像切换操作完成后所显示的图像。

2.根据权利要求1所述的图像显示方法，其中，建立所述图像区块组包括：

根据所述屏幕的尺寸以及所述屏幕的坐标系，建立所述图像区块组，

其中，所述多个图像区块彼此之间具有固定的位置关系。

3.根据权利要求2所述的图像显示方法，其中，建立所述图像区块组还包括：

根据显示比例和显示位置，在所述图像区块组中增加图像区块，以使所述屏幕显示的内容均落入所述图像区块组中。

4.根据权利要求3所述的图像显示方法，其中，根据所述显示比例和所述显示位置，在所述图像区块组中增加图像区块，包括：

响应于所述显示比例缩小使得所述屏幕中存在显示区域无对应的图像区块，根据所述显示位置确定增补方向，并沿所述增补方向顺次增加图像区块，使得所述显示区域与增加的图像区块对应；

其中，在所述显示比例下，增加的图像区块的尺寸与所述图像区块组中除了增加的图像区块以外的其他图像区块的尺寸相同。

5.根据权利要求2-4任一所述的图像显示方法，其中，在所述图像区块组中，所述多个图像区块的尺寸相同，所述多个图像区块均为正方形或均为矩形。

6.根据权利要求1所述的图像显示方法，其中，存储所述多个图像区块对应的位图和矢量数据包括：

在每次笔迹操作完成时，将所述笔迹操作涉及的图像区块对应的位图和矢量数据存储到存储单元中。

7.根据权利要求6所述的图像显示方法，其中，在每次笔迹操作完成时，将所述笔迹操作涉及的图像区块对应的位图和矢量数据存储到所述存储单元中，包括：

在每次笔迹操作完成时，更新所述存储单元中所述笔迹操作涉及的图像区块对应的位图和矢量数据；

其中，在所述存储单元中，每个图像区块对应唯一的位图和唯一的矢量数据。

8.根据权利要求6所述的图像显示方法，其中，在每次笔迹操作完成时，将所述笔迹操作涉及的图像区块对应的位图和矢量数据存储到所述存储单元中，包括：

在每次笔迹操作完成时，将所述笔迹操作涉及的图像区块对应的位图和矢量数据存储到所述存储单元中，并且，响应于所述存储单元中已经存在该图像区块对应的位图和矢量数据，保留已经存在的该图像区块对应的位图和矢量数据；

其中，在所述存储单元中，每个图像区块对应于至少一张位图和至少一个矢量数据，所述存储单元中还存储有所述至少一张位图和所述至少一个矢量数据与所述笔迹操作中各个笔画的对应关系。

9.根据权利要求6-8任一所述的图像显示方法，其中，所述笔迹操作包括书写笔画和/或擦除笔画。

10.根据权利要求6-8任一所述的图像显示方法，其中，所述位图和所述矢量数据基于indexdb进行存储。

11.根据权利要求6-8任一所述的图像显示方法，其中，所述矢量数据包括笔迹轮廓点阵数据，所述笔迹轮廓点阵数据包括多个点坐标，所述多个点坐标包括基准点坐标，所述多个点坐标中除所述基准点坐标之外的点坐标基于该点坐标与所述基准点坐标之间的差值进行数据描述。

12.根据权利要求11所述的图像显示方法，其中，所述矢量数据还包括数据组织结构，所述数据组织结构体现所述笔迹操作中各个笔画的粗细信息、颜色信息、作者信息中的至少之一。

13.根据权利要求6所述的图像显示方法，其中，基于所述图像切换操作，获取需要显示的图像区块对应的位图并基于获取的位图进行所述第一阶段显示，包括：

基于所述图像切换操作，从所述存储单元获取所述需要显示的图像区块对应的所述位图，并且显示所述位图以实现所述第一阶段显示。

14.根据权利要求13所述的图像显示方法，其中，所述图像切换操作包括缩放操作、平移操作、拖动操作和旋转操作中至少之一，

基于所述图像切换操作，从所述存储单元获取所述需要显示的图像区块对应的所述位图，并且显示所述位图以实现所述第一阶段显示，包括：

基于所述图像切换操作，从所述存储单元获取所述需要显示的图像区块对应的唯一的位图，并且显示获取的所述位图以实现所述第一阶段显示，或者

基于所述图像切换操作，从所述存储单元获取所述需要显示的图像区块对应的至少一张位图中最后存储的位图，并且显示获取的所述位图以实现所述第一阶段显示。

15.根据权利要求14所述的图像显示方法，其中，基于所述需要显示的图像区块对应的矢量数据进行渲染，并基于所述渲染结果进行所述第二阶段显示，包括：

从所述存储单元获取所述需要显示的图像区块对应的唯一的矢量数据，基于获取的所述矢量数据进行渲染，并基于所述渲染结果进行所述第二阶段显示，或者

从所述存储单元获取所述需要显示的图像区块对应的至少一个矢量数据中最后存储的矢量数据，基于获取的所述矢量数据进行渲染，并基于所述渲染结果进行所述第二阶段显示。

16.根据权利要求13所述的图像显示方法，其中，所述图像切换操作包括擦除操作和撤销操作中至少之一，

基于所述图像切换操作，从所述存储单元获取所述需要显示的图像区块对应的所述位图，并且显示所述位图以实现所述第一阶段显示，包括：

基于所述图像切换操作，从所述存储单元获取所述需要显示的图像区块对应的至少一张位图中与所述图像切换操作涉及的笔画相对应的位图，并且显示获取的所述位图以实现所述第一阶段显示。

17.根据权利要求16所述的图像显示方法，其中，基于所述需要显示的图像区块对应的矢量数据进行渲染，并基于所述渲染结果进行所述第二阶段显示，包括：

从所述存储单元获取所述需要显示的图像区块对应的至少一个矢量数据中与所述图像切换操作涉及的笔画相对应的矢量数据，基于获取的所述矢量数据进行渲染，并基于所述渲染结果进行所述第二阶段显示。

18.根据权利要求1所述的图像显示方法，还包括：

基于选择的目标区域生成所述目标区域对应的位图；

在屏幕中移除所述目标区域对应的矢量图；

基于针对所述目标区域的操作，利用所述目标区域对应的位图进行第三阶段显示；

完成针对所述目标区域的操作后，基于所述目标区域对应的矢量数据进行渲染并进行第四阶段显示。

19.根据权利要求18所述的图像显示方法，其中，所述目标区域对应的位图和所述目标区域对应的矢量图显示在不同的画布层上。

20.根据权利要求18所述的图像显示方法，其中，所述第三阶段显示用于呈现针对所述目标区域的操作所对应的图像切换过程，所述第四阶段显示用于呈现针对所述目标区域的操作完成后所显示的图像。

21.根据权利要求18所述的图像显示方法，其中，针对所述目标区域的操作包括缩放操作、平移操作、拖动操作和旋转操作中至少之一。

22.一种图像显示装置，包括：

建立单元，配置为建立图像区块组，其中，所述图像区块组包括多个图像区块；

处理单元，配置为存储所述多个图像区块对应的位图和矢量数据；

第一显示单元，配置为基于图像切换操作，获取需要显示的图像区块对应的位图并基于获取的位图进行第一阶段显示，其中，所述第一阶段显示用于呈现所述图像切换操作对应的图像切换过程；

第二显示单元，配置为基于所述需要显示的图像区块对应的矢量数据进行渲染，并基于渲染结果进行第二阶段显示，以完成显示图像的切换，其中，所述第二阶段显示用于呈现所述图像切换操作完成后所显示的图像。

23.一种电子设备，包括：

处理器；

存储器，包括一个或多个计算机程序模块；

其中，所述一个或多个计算机程序模块被存储在所述存储器中并被配置为由所述处理器执行，所述一个或多个计算机程序模块包括用于实现权利要求1-21任一所述的图像显示方法。

24.一种存储介质，用于存储非暂时性计算机可读指令，当所述非暂时性计算机可读指令由计算机执行时可以实现权利要求1-21任一所述的图像显示方法。

Images