CN117197289A - 一种基于模板的图形渲染方法及系统 - Google Patents

Abstract

本发明公开了一种基于模板的图形渲染方法及系统，涉及图形渲染技术领域。该方法包括：创建模板并存入模板库；从模板库中调用模板；将调用的每个模板与对应的数据源绑定；根据绑定有数据源的模板创建对应的图形元素；将得到的图形元素渲染到画布上；获取用户针对目标图形元素的交互操作，根据交互操作对目标图形元素进行处理；获取绑定调整指令，根据绑定调整指令调整模板与数据源的绑定关系。本发明可以实现通过模板轻松创建、定制和呈现图形元素，可以使图形元素能够根据数据的变化而动态更新，使图形元素能够实时反映数据的变化，确保了图形元素与数据源的一致性，并提供了优雅、直观的图形渲染体验，提高了渲染的效率和灵活性。

Description

一种基于模板的图形渲染方法及系统

技术领域

本发明涉及图形渲染技术领域，尤其涉及一种基于模板的图形渲染方法及系统。

背景技术

在现有的图形渲染技术中，开发人员需要编写复杂的代码来定义和呈现图形元素。这种方式对于非专业开发人员设计或需要快速原型设计的情况存在困难。为了简化图形的创建和渲染过程，基于模板的图形渲染技术应运而生，通过使用模板，用户可以轻松创建自定义的图形元素。

然而，现有的通过模板定义图形元素的方式便捷性差，在数据经常变化的场景下，想要重新渲染图形需要手动去更新视图，无法专注于数据，导致渲染效率低，灵活性差。

发明内容

本发明所要解决的是在数据经常变化的场景下，渲染效率低，灵活性差的问题，为了解决上述技术问题，本发明提供了一种基于模板的图形渲染方法及系统。

第一个方面，提供了一种基于模板的图形渲染方法，包括：

创建用于定义图形元素的外观和行为的模板，并将创建的模板存入模板库；

从所述模板库中调用至少一个模板；

获取至少一个数据源，将调用的每个所述模板与对应的所述数据源绑定；

根据绑定有数据源的模板创建对应的图形元素；

将得到的所述图形元素渲染到画布上；

获取用户针对目标图形元素的交互操作，根据所述交互操作对所述目标图形元素进行处理；

获取绑定调整指令，根据所述绑定调整指令调整模板与数据源的绑定关系。

在第一个方面的一种可能实现中，还包括：

获取用户对任一所述图形元素的修改数据，根据所述修改数据更新对应的数据源。

在第一个方面的一种可能实现中，将得到的所述图形元素渲染到画布上，具体包括：

通过图形库或图形绘制API将得到的所述图形元素渲染到画布上，并在渲染过程中，将用于渲染的多个绘制操作进行组合，且仅绘制所述画布上发生变化的部分。

在第一个方面的一种可能实现中，将调用的每个所述模板与对应的所述数据源绑定之后，还包括：

获取用户对任一所述数据源的参数调整指令，根据所述参数调整指令对对应模板的外观进行调整。

在第一个方面的一种可能实现中，根据绑定有数据源的模板创建对应的图形元素之后，还包括：

获取用户的组合嵌套指令，根据所述组合嵌套指令，对生成的至少两个任意的所述图形元素进行嵌套和/或组合。

第二个方面，提供了一种基于模板的图形渲染系统，包括：模板库、模板定义器、图形元素生成器、渲染引擎和用户交互处理器，其中：

所述模板定义器用于创建用于定义图形元素的外观和行为的模板，并将创建的模板存入所述模板库；

所述用户交互处理器用于供用户从所述模板库中调用至少一个模板；

所述用户交互处理器还用于获取至少一个数据源，将调用的每个所述模板与对应的所述数据源绑定；

所述图形元素生成器用于根据绑定有数据源的模板创建对应的图形元素；

所述渲染引擎用于将得到的所述图形元素渲染到画布上；

所述用户交互处理器还用于获取用户针对目标图形元素的交互操作，根据所述交互操作对所述目标图形元素进行处理；

所述用户交互处理器还用于获取绑定调整指令，根据所述绑定调整指令调整模板与数据源的绑定关系。

在第二方面的一种可能实现中，所述用户交互处理器还用于获取用户对任一所述图形元素的修改数据，根据所述修改数据更新对应的数据源。

在第二方面的一种可能实现中，所述渲染引擎具体用于通过图形库或图形绘制API将得到的所述图形元素渲染到画布上，并在渲染过程中，将用于渲染的多个绘制操作进行组合，且仅绘制所述画布上发生变化的部分。

在第二方面的一种可能实现中，所述用户交互处理器还用于获取用户对任一所述数据源的参数调整指令，根据所述参数调整指令对对应模板的外观进行调整。

在第二方面的一种可能实现中，所述用户交互处理器还用于获取用户的组合嵌套指令，根据所述组合嵌套指令，对生成的至少两个任意的所述图形元素进行嵌套和/或组合。

本发明提供的图形渲染方法及系统，通过自定义模板，可以实现通过模板轻松创建、定制和呈现图形元素，并根据需求选择模板绑定数据源，可以使图形元素能够根据数据的变化而动态更新，可以实现数据驱动的图形渲染，使图形元素能够实时反映数据的变化，并通过交互操作进行修改和调整，对数据的绑定关系进行调整，实现了灵活、可定制的图形呈现能力，本方案确保了图形元素与数据源的一致性，并提供了优雅、直观的图形渲染体验，提高了渲染的效率和灵活性。

本发明附加的方面的优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本发明实践了解到。

附图说明

图1为本发明图形渲染方法的实施例提供的流程示意图；

图2为本发明图形渲染系统的实施例提供的结构框架示意图。

具体实施方式

以下结合附图对本发明的原理和特征进行描述，所举实施例只用于解释本发明，并非用于限定本发明的范围。

如图1所示，为本发明图形渲染方法的实施例提供的流程示意图，该基于模板的图形渲染方法包括：

S1，创建用于定义图形元素的外观和行为的模板，并将创建的模板存入模板库；

应理解，模板是一个可配置的结构，包括图形元素的形状、样式、交互行为和数据绑定等方面的定义。用户可以选择适当的模板，然后通过指定属性和数据来创建各种图形元素，用户也可以根据需求创建自定义模板，并将其配置为适用于特定类型的图形元素。

应理解，交互行为指的是对用户操作的响应动作，用户交互处理器可以捕获用户的鼠标点击、拖拽和缩放等操作，并根据用户的输入进行相应的处理。例如，某图形元素的交互行为是点击后放大，那么当用户点击该图形元素后，该图形元素就会放大。数据绑定指的是绑定哪个数据源，数据源可以是本地数据库、远程服务器或其他数据存储系统。

模板库用于管理和维护各种图形模板，用户可以通过模板库管理器浏览、选择和编辑模板。

应理解，模板库还支持模板的导入和导出功能，使用户能够方便地共享和重用模板。

S2，从模板库中调用至少一个模板；

S3，获取至少一个数据源，将调用的每个模板与对应的数据源绑定；

用户可以将模板与外部数据源关联，使图形元素能够根据数据的变化而动态更新。通过数据绑定，用户可以实现数据驱动的图形渲染，使图形元素能够实时反映数据的变化。

例如，可以通过API将模板和数据源注册到系统，可以将模板与数据模型关联起来。模板是数据驱动的，数据变化会自动地更新节点和关系。这样就可以只关心数据，而不需要关心图形的创建和更新。

S4，根据绑定有数据源的模板创建对应的图形元素；

应理解，生成的图形元素可以是节点、连线、文本等各种类型的图形元素。

例如，生成的图形元素可以根据模板定义的属性和样式来配置。

S5，将得到的图形元素渲染到画布上；

例如，可以通过渲染引擎将生成的图形元素渲染到画布上，根据模板定义的样式和属性，渲染引擎可以准确地显示图形元素。

S6，获取用户针对目标图形元素的交互操作，根据交互操作对目标图形元素进行处理；

应理解，为了提高用户体验和操作便捷性，实施方式可以包括交互式编辑功能。用户可以通过直观的界面和交互操作，对图形元素进行编辑和调整。例如，支持拖拽操作，用户交互处理器捕获用户的输入，并根据用户的操作对图形元素进行相应的处理，使用户能够自由移动图形元素的位置。还可以支持缩放和旋转操作，以调整图形元素的大小和方向。这些交互式编辑功能使用户能够快速地创建和调整图形元素，提高工作效率。

S7，获取绑定调整指令，根据绑定调整指令调整模板与数据源的绑定关系。

应理解，整个图形渲染流程可以根据用户的需求进行循环反馈。用户可以多次选择模板、调整数据绑定和交互操作，以实现所需的图形呈现效果。

例如，用户使用模板A渲染了一张上下文关系图，后来觉得模板A不满足业务语义选择了模板B，那么就可以通过发送绑定调整指令，将与模板A绑定的数据源修改为与模板B绑定。因为只替换了模板，数据源没有变化，最终渲染出来的结果只有绑定模板的节点样式发生改变，节点和关系线的布局和位置保持不变。

应理解，现有的渲染方案存在复用性差的问题，而本方法可以创建一些通用的模板，在多个地方使用它们，避免了代码重复，同时也提高了可维护性。

此外，人工调用更新可能导致多次调用从而带来性能问题，而且这种更新方法是将视图重新渲染，无法做到某个数据发生改变只更新对应属性。本方法的模板还支持与外部数据源的数据绑定，实现动态渲染和交互，提高渲染更新效率。

本实施例提供的图形渲染方法,通过自定义模板，可以实现通过模板轻松创建、定制和呈现图形元素，并根据需求选择模板绑定数据源，可以使图形元素能够根据数据的变化而动态更新，可以实现数据驱动的图形渲染，使图形元素能够实时反映数据的变化，并通过交互操作进行修改和调整，对数据的绑定关系进行调整，实现了灵活、可定制的图形呈现能力，本方案确保了图形元素与数据源的一致性，并提供了优雅、直观的图形渲染体验，提高了渲染的效率和灵活性。

本方法提供了一种简单而强大的方式来创建和呈现图形元素，它使开发人员能够快速构建具有丰富功能和样式的交互式图形应用。同时，该技术具有高度的可定制性，用户可以根据自己的需求创建自定义的模板，并将其应用于图形元素。

此外，本方法还具有扩展性，用户可以根据特定应用的需求，创建自定义的模板库，并将其集成到相应的图形渲染系统中，这为用户提供了更大的灵活性和自由度，以满足各种不同领域和行业的图形渲染需求。

综上，本方法为用户提供了强大的图形构建和呈现功能，促进了交互式图形应用的开发，简化了图形元素的创建和渲染过程，提高了开发人员的效率，并提供了高度的可定制性和灵活性。

本方法具有广泛的应用前景，它可以应用于各种领域，如数据可视化、图形编辑器、流程图、组织结构图等。通过使用模板和定制化的图形元素，用户可以轻松地创建具有个性化外观和交互行为的图形应用。

此外，本方法还具有易用性和用户友好性，通过提供直观的界面和简化的操作，用户可以快速上手并利用该技术构建图形应用。无论是专业开发人员还是非技术人员，都可以通过本方法的技术实现高质量的图形渲染。

综上所述，本发明提供了一种基于模板的图形渲染技术，应用于图形应用开发中。该技术通过简化图形元素的创建和渲染过程，提高了效率和灵活性。它具有广泛的应用前景，并能够满足各种不同领域的图形渲染需求。

可选地，在一些可能的实施方式中，还包括：

获取用户对任一图形元素的修改数据，根据修改数据更新对应的数据源。

如果用户对图形元素进行了修改，更新后的数据将被写回到数据源中，以保持数据的同步性。

可选地，在一些可能的实施方式中，将得到的图形元素渲染到画布上，具体包括：

通过图形库或图形绘制API将得到的图形元素渲染到画布上，并在渲染过程中，将用于渲染的多个绘制操作进行组合，且仅绘制画布上发生变化的部分。

渲染器可以通过合理的渲染策略和优化算法提高渲染效率，例如，可以使用批处理进行合并操作，通过将多个绘制操作组合成一个批次来减少绘制调用的数量。又例如，可以使用脏矩形提高渲染效率，例如，只重新绘制屏幕上发生变化的部分(即脏矩形)。这可以避免重新绘制全部内容，从而提高渲染性能。可以提高渲染性能和效率。

具体地，每当屏幕上的某个区域发生变化时，例如，一个物体移动了位置，或者一个新的物体出现在屏幕上，这个区域就被标记为"脏"的，需要重新绘制。这个区域通常被表示为一个脏矩形，在渲染过程中，系统会收集所有的脏矩形，然后只重新绘制这些矩形覆盖的区域，减少不必要的计算和绘制操作，提高渲染速度。还可以利用硬件加速技术，如GPU加速，以加快图形渲染的处理速度。通过这些优化措施，可以提供更流畅和响应迅速的图形渲染体验。

可选地，在一些可能的实施方式中，将调用的每个模板与对应的数据源绑定之后，还包括：

获取用户对任一数据源的参数调整指令，根据参数调整指令对对应模板的外观进行调整。

为了提供更大的灵活性和可定制性，实施方式还可以支持模板样式和属性的定制，模板定义时可以取到当前节点的数据，用户可以将这部分数据和模板样式和属性进行绑定来对模板进行定制。用户就可以根据需求调整数据源的参数对模板的样式进行调整，如颜色、线型、填充等，以实现个性化的外观效果。此外，用户还可以自定义属性和数据绑定规则，以满足特定的应用需求。

可选地，在一些可能的实施方式中，根据绑定有数据源的模板创建对应的图形元素之后，还包括：

获取用户的组合嵌套指令，根据组合嵌套指令，对生成的至少两个任意的图形元素进行嵌套和/或组合。

应理解，模板可以包括各种图形元素类型，并且可以根据需要进行组合和嵌套，通过对图形元素进行嵌套和组合，解决了现有渲染方案灵活性差的问题，传统的渲染方案在设计一个深层嵌套的复杂节点时，通常要编写复杂的数据结构，很难灵活的创建各种类型的节点，而本实施例可以根据使用需求对图形元素进行嵌套和组合，从而提高渲染的灵活性。

如图2所示，为本发明图形渲染系统的实施例提供的结构框架示意图，该基于模板的图形渲染系统包括：模板库、模板定义器、图形元素生成器、渲染引擎和用户交互处理器，其中：

模板定义器用于创建用于定义图形元素的外观和行为的模板，并将创建的模板存入模板库；

用户交互处理器用于供用户从模板库中调用至少一个模板；

用户交互处理器还用于获取至少一个数据源，将调用的每个模板与对应的数据源绑定；

图形元素生成器用于根据绑定有数据源的模板创建对应的图形元素；

渲染引擎用于将得到的图形元素渲染到画布上；

用户交互处理器还用于获取用户针对目标图形元素的交互操作，根据交互操作对目标图形元素进行处理；

用户交互处理器还用于获取绑定调整指令，根据绑定调整指令调整模板与数据源的绑定关系。

本实施例提供的图形渲染系统,通过自定义模板，可以实现通过模板轻松创建、定制和呈现图形元素，并根据需求选择模板绑定数据源，可以使图形元素能够根据数据的变化而动态更新，可以实现数据驱动的图形渲染，使图形元素能够实时反映数据的变化，并通过交互操作进行修改和调整，对数据的绑定关系进行调整，实现了灵活、可定制的图形呈现能力，本方案确保了图形元素与数据源的一致性，并提供了优雅、直观的图形渲染体验，提高了渲染的效率和灵活性。

可选地，在一些可能的实施方式中，用户交互处理器还用于获取用户对任一图形元素的修改数据，根据修改数据更新对应的数据源。

可选地，在一些可能的实施方式中，渲染引擎具体用于通过图形库或图形绘制API将得到的图形元素渲染到画布上，并在渲染过程中，将用于渲染的多个绘制操作进行组合，且仅绘制画布上发生变化的部分。

可选地，在一些可能的实施方式中，用户交互处理器还用于获取用户对任一数据源的参数调整指令，根据参数调整指令对对应模板的外观进行调整。

可选地，在一些可能的实施方式中，用户交互处理器还用于获取用户的组合嵌套指令，根据组合嵌套指令，对生成的至少两个任意的图形元素进行嵌套和/或组合。

应理解，上述实施方式为与在先方法实施方式对应的产品实施方式，关于产品实施方式的说明可以参考在先方法实施方式的说明，在此不再赘述。

应理解，在不违背本发明构思的前提下，本领域技术人员可以将上述实施方式进行任意组合，均在本发明的保护范围内。

读者应理解，在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不必针对的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任一个或多个实施例或示例中以合适的方式结合。此外，在不相互矛盾的情况下，本领域的技术人员可以将本说明书中描述的不同实施例或示例以及不同实施例或示例的特征进行结合和组合。

在本申请所提供的几个实施例中，应该理解到，所揭露的装置和方法，可以通过其它的方式实现。例如，以上所描述的方法实施例仅仅是示意性的，例如，步骤的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个步骤可以结合或者可以集成到另一个步骤，或一些特征可以忽略，或不执行。

上述方法如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分，或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-OnlyMemory)、随机存取存储器(RAM，RandomAccessMemory)、磁碟或者光盘等各种可以存储程序代码的介质。

以上，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到各种等效的修改或替换，这些修改或替换都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以权利要求的保护范围为准。

Claims (10)

1.一种基于模板的图形渲染方法，其特征在于，包括：

创建用于定义图形元素的外观和行为的模板，并将创建的模板存入模板库；

从所述模板库中调用至少一个模板；

获取至少一个数据源，将调用的每个所述模板与对应的所述数据源绑定；

根据绑定有数据源的模板创建对应的图形元素；

将得到的所述图形元素渲染到画布上；

获取用户针对目标图形元素的交互操作，根据所述交互操作对所述目标图形元素进行处理；

获取绑定调整指令，根据所述绑定调整指令调整模板与数据源的绑定关系。

2.根据权利要求1所述的基于模板的图形渲染方法，其特征在于，还包括：

获取用户对任一所述图形元素的修改数据，根据所述修改数据更新对应的数据源。

3.根据权利要求1所述的基于模板的图形渲染方法，其特征在于，将得到的所述图形元素渲染到画布上，具体包括：

通过图形库或图形绘制API将得到的所述图形元素渲染到画布上，并在渲染过程中，将用于渲染的多个绘制操作进行组合，且仅绘制所述画布上发生变化的部分。

4.根据权利要求1所述的基于模板的图形渲染方法，其特征在于，将调用的每个所述模板与对应的所述数据源绑定之后，还包括：

获取用户对任一所述数据源的参数调整指令，根据所述参数调整指令对对应模板的外观进行调整。

5.根据权利要求1所述的基于模板的图形渲染方法，其特征在于，根据绑定有数据源的模板创建对应的图形元素之后，还包括：

获取用户的组合嵌套指令，根据所述组合嵌套指令，对生成的至少两个任意的所述图形元素进行嵌套和/或组合。

6.一种基于模板的图形渲染系统，其特征在于，包括：模板库、模板定义器、图形元素生成器、渲染引擎和用户交互处理器，其中：

所述模板定义器用于创建用于定义图形元素的外观和行为的模板，并将创建的模板存入所述模板库；

所述用户交互处理器用于供用户从所述模板库中调用至少一个模板；

所述用户交互处理器还用于获取至少一个数据源，将调用的每个所述模板与对应的所述数据源绑定；

所述图形元素生成器用于根据绑定有数据源的模板创建对应的图形元素；

所述渲染引擎用于将得到的所述图形元素渲染到画布上；

所述用户交互处理器还用于获取用户针对目标图形元素的交互操作，根据所述交互操作对所述目标图形元素进行处理；

所述用户交互处理器还用于获取绑定调整指令，根据所述绑定调整指令调整模板与数据源的绑定关系。

7.根据权利要求6所述的基于模板的图形渲染系统，其特征在于，所述用户交互处理器还用于获取用户对任一所述图形元素的修改数据，根据所述修改数据更新对应的数据源。

8.根据权利要求6所述的基于模板的图形渲染系统，其特征在于，所述渲染引擎具体用于通过图形库或图形绘制API将得到的所述图形元素渲染到画布上，并在渲染过程中，将用于渲染的多个绘制操作进行组合，且仅绘制所述画布上发生变化的部分。

9.根据权利要求6所述的基于模板的图形渲染系统，其特征在于，所述用户交互处理器还用于获取用户对任一所述数据源的参数调整指令，根据所述参数调整指令对对应模板的外观进行调整。

10.根据权利要求6所述的基于模板的图形渲染系统，其特征在于，所述用户交互处理器还用于获取用户的组合嵌套指令，根据所述组合嵌套指令，对生成的至少两个任意的所述图形元素进行嵌套和/或组合。