小程序画布图形绘制方法、装置、设备及介质与流程

1.本技术数据处理技术领域，特别涉及一种小程序画布图形绘制方法、装置、设备及介质。


背景技术：

2.目前在基于微信底层环境的小程序中，浏览器各内核提供的有关canvas的api受到了诸多限制，这造成了在日常开发中诸多的不便，每次开发都需要重新调用每一个api，重复劳动且做了无效工作，影响了开发效率。
3.比如，在浏览器中可以直接调用canvas保存图片的功能saveaspng、saveasjpeg、saveasbmp等将图片保存在本地，但是这些api在微信的网页视图webview中是不能直接调用的，需要调用wx.canvastotempfilepath将图片在小程序中生成临时资源地址，然后调用wx.saveimagetophotosalbm将临时资源地址的图片保存在手机相册中。


技术实现要素：

4.鉴于以上所述现有技术的缺点，本技术的目的在于提供一种小程序画布图形绘制方法、装置、设备及介质，进而至少在一定程度上克服由于相关技术的限制和缺陷而导致的一个或者多个问题。
5.第一方面，提供了一种小程序画布图形绘制方法，包括：
6.获取图形绘制的绘制指令，所述绘制指令中包括需调用的封装方法的调用接口及对应的第一绘制参数；
7.根据所述绘制指令，从工具方法库中调用与所述封装方法的调用接口对应的工具类方法，所述工具类方法包括实现对应所需绘制功能所需的相关画布原生应用程序编程接口方法；
8.按照绘制逻辑将所述第一绘制参数传递给调用的所述工具类方法中的各所述相关画布原生应用程序编程接口方法，以在所述小程序画布中进行图形绘制。
9.第二方面，提供了一种小程序画布图形绘制装置，包括：
10.绘制指令获取模块，用于获取图形绘制的绘制指令，所述绘制指令中包括需调用的封装方法的调用接口及对应的第一绘制参数；
11.方法调用模块，用于根据所述绘制指令，从工具方法库中调用与所述封装方法的调用接口对应的工具类方法，所述工具类方法包括实现对应所需绘制功能所需的相关画布原生应用程序编程接口方法；
12.图形绘制模块，用于按照绘制逻辑将所述第一绘制参数传递给调用的所述工具类方法中的各所述相关画布原生应用程序编程接口方法，以在所述小程序画布中进行图形绘制。
13.第三方面，提供了一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述小程序画布图形绘
制方法的步骤。
14.第四方面，提供了一种计算机可读存储介质，计算机可读存储介质存储有计算机程序，计算机程序被处理器执行时实现上述小程序画布图形绘制方法的步骤。
15.上述的小程序画布图形绘制方法、装置、设备及介质，通过获取图形绘制的绘制指令，所述绘制指令中包括需调用的封装方法的调用接口及对应的第一绘制参数；根据所述绘制指令，从工具方法库中调用与所述封装方法的调用接口对应的工具类方法，所述工具类方法包括实现对应所需绘制功能所需的相关画布原生应用程序编程接口方法；按照绘制逻辑将所述第一绘制参数传递给调用的所述工具类方法中的各所述相关画布原生应用程序编程接口方法，以在所述小程序画布中进行图形绘制。通过将小程序画布相关的应用程序接口封装成工具方法库使用，在开发小程序相关的海报制作过程中，可以直接调用相关工具方法进行图形绘制，节省了大量重复的工作，提升了开发效率。
附图说明
[0016][0017]
图1示出了本技术的一应用环境示意图。
[0018]
图2本技术的小程序画布应用程序接口封装方法的一流程示意图。
[0019]
图3示出了本技术的小程序画布图形绘制方法的一流程示意图。
[0020]
图4示出了本技术的小程序画布图形绘制装置的一功能模块图。
[0021]
图5示出了本技术的小程序画布图形绘制方法的电子设备的一结构示意图。
具体实施方式
[0022]
以下通过特定的具体实例说明本技术的实施方式，本领域技术人员可由本说明书所揭露的内容轻易地了解本技术的其他优点与功效。本技术还可以通过另外不同的具体实施方式加以实施或应用，本说明书中的各项细节也可以基于不同观点与应用，在没有背离本技术的精神下进行各种修饰或改变。
[0023]
请参阅图1-图5。需要说明的是，本实施例中所提供的图示仅以示意方式说明本技术的基本构想，遂图式中仅显示与本技术中有关的组件而非按照实际实施时的组件数目、形状及尺寸绘制，其实际实施时各组件的型态、数量及比例可为一种随意的改变，且其组件布局型态也可能更为复杂。目前在基于微信底层环境的小程序中，画布canvas的api(application programming interface，应用程序编程接口)受到了诸多限制，这造成了在日常开发中诸多的不便，每次开发都需要重新调用每一个api，重复劳动且做了无效工作。
[0024]
以在画布中绘制圆角矩形为例，需要利用canvas.setstrokestyle方法设置矩形框线条颜色，利用canvas.lineto方法确定矩形线条的起点和终点(确定矩形顶点)，利用canvas.moveto方法将两个点连接起来(连接矩形的4个顶点)，利用canvas.setstrokestyle方法设置圆角线条颜色，利用canvas.stroke或者canvas.fill方法设置矩形背景色，利用canvas，arc方法设置画布中圆角矩形的圆角尺寸，利用canvas.beginpath和canvas.closepath方法将圆角矩形绘制出来，绘制完成。这就导致每次绘制圆角矩形时，就需要调用上述的每个api，重复劳动且做了无效工作。
[0025]
基于此，本技术实施例提供一种小程序画布应用程序接口封装方法，可应用在如
图2所示的应用场景中，通过对微信小程序中画布canvas中相关原生应用程序编程接口(简称原生api)进行封装形成工具方法库，从而在微信小程序的开发过程中，只需要直接调用工具方法库中的工具类方法就可完成对应的绘制任务。具体地，工具方法库的获取方式包括，确定每个所述绘制功能的处理逻辑；获取完成每个所述绘制功能所需的相关画布原生应用程序编程接口方法；分别对完成每个绘制功能所需的相关画布原生应用程序编程接口方法进行封装，以获取完成各所述绘制功能的工具类方法，其中，每个所述工具类方法对外提供统一的调用接口和通用参数；对完成各所述绘制功能的工具类方法进行整合，以构成工具方法库。通过将小程序画布相关的应用程序接口封装成工具方法库使用，在开发微信小程序相关的海报制作过程中，节省了大量重复的工作，提升了开发效率。并且通过统一的接口形式，方便了开发者在开发过程中的编码工作，如果出现了问题，也方便立刻查找问题。同时该工具方法库也可迁移至其它有需要页面显示海报的小程序中，具备较强的可移植性。
[0026]
请参阅图2所示，图2为本技术实施例提供的小程序画布应用程序接口封装的方法的一个流程示意图。本技术实施例的小程序画布应用程序接口封装的方法，包括如下步骤：
[0027]
步骤s210：获取小程序开发时所需的若干绘制功能；
[0028]
步骤s220：获取完成每个所述绘制功能所需的相关画布原生应用程序编程接口方法；
[0029]
步骤s230：分别对完成每个绘制功能所需的相关画布原生应用程序编程接口方法进行封装，以获取完成各所述绘制功能的工具类方法，其中，每个所述工具类方法对外提供统一的调用接口和通用参数；
[0030]
步骤s240：对完成各所述绘制功能的工具类方法进行整合，以构成工具方法库。
[0031]
在对小程序画布应用程序接口封装时，需要先根据目标任务来确定所需要的绘制功能，并根据不同的绘制功能的处理逻辑，来有针对性的对所需的若干原生应用程序编程接口方法进行封装来形成一个能够实现绘制功能的工具类方法，并最终构成工具方法库，供小程序开发过程中调用。
[0032]
下面将以开发微信的海报制作过程的工具方法库为例详细阐述本技术的小程序画布应用程序接口封装的方法的技术方案。
[0033]
首先，执行步骤s2 l 0：获取小程序开发时所需的若干绘制功能。
[0034]
以开发微信的海报制作过程为例，可以对海报制作过程进行分析，将常用的需要多个原生api协同完成的绘制任务定义为一个绘制功能。作为示例，海报制作过程所需的绘制功能例如可以包括绘制圆角矩形、画布绘制多行文本、画布绘制图片、生成画布保存等等，可以利用这些绘制功能对应的工具类方法绘制完成所需的海报。其中，在本实施例中的绘制功能是指需要调用canvas画布中若干原生应用程序编程接口方法才可完成的绘制功能。可以理解的是，在其他实施例中，基于小程序开发的不同，绘制功能可根据实际需求进行确定。
[0035]
接着，执行步骤s220和s230：获取完成每个所述绘制功能所需的相关画布原生应用程序编程接口方法，分别对完成每个绘制功能所需的相关画布原生应用程序编程接口方法进行封装，以获取完成各所述绘制功能的工具类方法，其中，每个所述工具类方法对外提供统一的调用接口和通用参数。具体地，可按照完成所述绘制功能的绘制逻辑来对所述所
需绘制功能的相关画布原生应用程序编程接口方法进行封装，以获取完成各所述绘制功能的工具类方法
[0036]
下面将分别对绘制功能是绘制圆角矩形、画布绘制多行文本、画布绘制图片、生成画布保存时的画布原生应用程序编程接口方法的获取以及封装来进行说明。
[0037]
以绘制圆角矩形为例，获取完成画布中绘制圆角矩形所需的相关画布原生应用程序编程接口方法，包括：
[0038]
获取用于设置线条颜色的原生应用程序编程接口方法，其中，线条颜色包括矩形框线条颜色以及圆角的线条显色；
[0039]
获取用于设置矩形线条的起点和终点的原生应用程序编程接口方法；
[0040]
获取用于连接矩形的顶点的原生应用程序编程接口方法；
[0041]
获取用于设置圆角矩形的圆角尺寸的原生应用程序编程接口方法；以及
[0042]
获取用于设置路径开始和关闭路径的原生应用程序编程接口方法。
[0043]
需要说明的是，如需设置矩形背景颜色，获取完成画布中绘制圆角矩形所需的相关画布原生应用程序编程接口方法，还包括获取用于设置矩形背景颜色的原生应用程序编程接口方法的步骤。
[0044]
在一具体示例中，在canvas画布中绘制圆角矩形时，设置矩形线条的起点和终点的原生应用程序编程接口方法为canvas.setstrokestyle，设置矩形线条的起点和终点的原生应用程序编程接口方法为canvas.lineto，连接矩形的顶点的原生应用程序编程接口方法为canvas.moveto、设置画设置圆角矩形的圆角尺寸的原生应用程序编程接口方法为canvas.arc；设置矩形背景颜色的原生应用程序编程接口方法为canvas.stroke或者canvas.fill，设置路径开始和关闭路径的原生应用程序编程接口方法为canvas.beginpath和canvas.closepath方法。
[0045]
获取这些必要的原生应用程序编程接口方法(简称原生api)之后，可以根据处理逻辑将这些通用的原生api功能利用javascript(简称“js”)封装成一个工具类方法，对外提供统一的调用接口和通用参数，通用参数例如可以是线条颜色、矩形的位置、矩形圆角的尺寸以及可选参数矩形的背景色等。封装获取该工具类方法之后，后续要绘制圆角矩形时，只需利用该工具类方法的调用接口调用就可实现圆角矩形的绘制，避免了在画布中每次绘制圆角矩形时的重复调用多个原生api的问题，提升开发效率。并且通过统一的接口形式，方便了开发者在开发过程中的编码工作，如果出现了问题，也方便立刻查找问题。
[0046]
以画布绘制多行文本为例，获取完成画布绘制多行文本所需的相关画布原生应用程序编程接口方法，包括：
[0047]
获取用于设置文本字体大小的原生应用程序编程接口方法；
[0048]
获取用于测定文本总长度的原生应用程序编程接口方法；
[0049]
获取用于设置文本填充样式的原生应用程序编程接口方法；
[0050]
获取用于设置填充文本的原生应用程序编程接口方法。
[0051]
在一具体示例中，在有关海报的需求中，通常会出现单行文本超出显示省略号或者是多行文本显示省略号的需求。考虑到以上情况，我们需要知道显示的文本有多少行，显示文本的行数以及文本的字体大小。根据文本字体大小和显示文本的字数，我们可以调用canvas.measurttext来测定文本的总长度，取得总长度之后再除以文本宽度便可的文本的
行数。当文本宽度小于设计图中能显示的指定行数与指定宽度的乘积时，则不需要显示省略号，否则文本超出部分以省略号的形式展示出来。根据以上逻辑，我们可以知道需要调用的原生api方法有设置文本字体大小的原生应用程序编程接口方法canvas.setfontsize、设置文本填充样式的原生应用程序编程接口方法canvas.setfillstyle、测定文本总长度的原生应用程序编程接口方法canvas.measuretext、设置填充文本的原生应用程序编程接口方法canvas.filltext等。
[0052]
获取这些必要的原生api之后，再将这些原生api功能利用javascript(简称“js”)封装成一个工具类方法，对外提供统一的调用接口和通用参数。封装获取该工具类方法之后，后续要绘制多行文本时，只需利用该工具类方法的调用接口调用就可实现画布绘制多行文本，避免了在画布中每次绘制多行文本时的重复调用多个原生api的问题，提升开发效率。并且通过统一的接口形式，方便了开发者在开发过程中的编码工作，如果出现了问题，也方便立刻查找问题。
[0053]
以画布绘制图片为例，获取完成画布绘制图片的相关画布原生应用程序编程接口方法，具体包括：
[0054]
获取用于图片信息获取的原生应用程序编程接口方法；
[0055]
获取用于绘制图片的原生应用程序编程接口方法。
[0056]
在一具体示例中，画布中通常需要添加海报，甚至多张海报图片的叠加。但有些图片我们只需要图片中的部分或者是将图片进行缩放等，这就需要我们封装一个统一的接口，根据提供参数的个数来对图片资源进行截取或者是缩放，然后将拿到的图片设置在画布中。这样我们就需要图片资源、图片资源需要显示在画布中的尺寸、图片资源需要截取部分的大小等等参数，涉及到的api有用于图片信息获取的原生应用程序编程接口方法wx.getimageinfo、用于绘制图片的原生应用程序编程接口方法canvas.drawimage等。将这些方法利用javascript(简称“js”)封装成一个工具类方法，并对外提供统一的接口，方便以后开发在画布中设置图片，提升开发效率。并且通过统一的接口形式，方便了开发者在开发过程中的编码工作，如果出现了问题，也方便立刻查找问题。
[0057]
以生成画布保存为例，获取完成生成画布保存所需的相关画布原生应用程序编程接口方法，包括：
[0058]
获取用于生成临时图片资源地址的原生应用程序编程接口方法；
[0059]
获取用于将临时图片资源地址下载至用户终端相册的原生应用程序编程接口方法。
[0060]
在一具体示例中，由于微信的限制，canvas生成的图片必须要在微信提供的环境中调用生成临时图片资源地址的原生应用程序编程接口方法wx.canvastotempfilepath生成图片的临时资源地址，然后通过微信提供的用于将临时图片资源地址下载至用户终端相册的原生应用程序编程接口方法wx.saveimagetophotosalbm，将该临时图片资源地址下载至手机相册。故而可以利用javascript(简称“js”)将以上两步提供的原生apl封装在同一个方法中，作为一个工具类方法，，并对外提供统一的接口，方便以后开发中的生成画布保存，节省开发过程的重复编写代码的问题。并且通过统一的接口形式，方便了开发者在开发过程中的编码工作，如果出现了问题，也方便立刻查找问题。
[0061]
最后，执行步骤s240：对完成各所述绘制功能的工具类方法进行整合，以构成工具
方法库同时该工具方法库。
[0062]
通过步骤s210-s230后，可以获取完成各所述绘制功能的工具类方法，然后对完成各所述绘制功能的工具类方法进行整合，以构成工具方法库同时该工具方法库。在开发微信小程序相关的海报制作过程中，节省了大量重复的工作，提升了开发效率。
[0063]
需要说明的是，本实施例获取的工具方法库也可迁移至其它有需要页面显示海报的小程序中，具备较强的可移植性。
[0064]
需要说明的是，上面各种方法的步骤划分，只是为了描述清楚，实现时可以合并为一个步骤或者对某些步骤进行拆分，分解为多个步骤，只要包含相同的逻辑关系，都在本专利的保护范围内；对算法中或者流程中添加无关紧要的修改或者引入无关紧要的设计，但不改变其算法和流程的核心设计都在该专利的保护范围内。
[0065]
图3为本技术实施例提供的小程序画布图形绘制方法的流程示意图。本技术实施例的小程序画布图形绘制方法基于上述的小程序画布应用程序接口封装方法获取的工具方法库实现。包括如下步骤：
[0066]
步骤s310：获取图形绘制的绘制指令，所述绘制指令中包括需调用的封装方法的调用接口及对应的第一绘制参数；
[0067]
步骤s320：根据所述绘制指令，从工具方法库中调用与所述封装方法的调用接口对应的工具类方法，所述工具类方法包括实现对应所需绘制功能所需的相关画布原生应用程序编程接口方法；
[0068]
步骤s330：按照绘制逻辑将所述第一绘制参数传递给调用的所述工具类方法中的各所述相关画布原生应用程序编程接口方法，以在所述小程序画布中进行图形绘制。
[0069]
下面将以开发微信的海报制作过程的工具方法库来详细阐述本技术的小程序画布图形绘制的方法的技术方案。
[0070]
首先，执行步骤s210：获取图形绘制的绘制指令，所述绘制指令中包括需调用的封装方法的调用接口及对应的第一绘制参数。
[0071]
在进行图形绘制时，需要先在微信小程序的海报制作视图界面上创建所述小程序画布，该小程序画布上会显示海报制作中自定义绘制功能的触发虚拟按钮或菜单选项，每个虚拟按钮或菜单选项对应工具方法库中的一个工具类方法，通过检测小程序视图界面上的所述所需绘制功能的触发虚拟按钮或菜单选项的触发操作，弹出与所述所需绘制功能相对应的参数设置界面；接收用户在所述参数设置界面的输入参数，以作为所述第一绘制参数；基于所述所需绘制功能对应的所述需调用的封装方法的调用接口和所述第一绘制参数，生成所述绘制指令。
[0072]
作为示例，所述所需绘制功能包括画布绘制圆角矩形、画布绘制多行文本、画布绘制图片或生成画布保存。
[0073]
以在小程序画布中绘制圆角矩形为例，需要设置圆角矩形的顶点、矩形的宽和高、圆角矩形的半径这3个必要参数，此外通常情况下为了使得圆角矩形更加美观，会设置边框、矩形的背景色、阴影等。上述这些参数可作为第一绘制参数。
[0074]
接着，执行步骤s220：根据所述绘制指令，从工具方法库中调用与所述封装方法的调用接口对应的工具类方法，所述工具类方法包括实现对应所需绘制功能所需的相关画布原生应用程序编程接口方法。
[0075]
接收到所述绘制指令后，可先对绘制指令进行解析，以获取封装方法的调用接口和相应的第一绘制参数；基于封装方法的调用接口从工具方法库中调用与所述封装方法的调用接口对应的工具类方法。
[0076]
最后，执行步骤s230：按照绘制逻辑将所述第一绘制参数传递给调用的所述工具类方法中的各所述相关画布原生应用程序编程接口方法，以在所述小程序画布中进行图形绘制。具体地，根据绘制逻辑对所述第一绘制参数进行处理，以获取若干第二绘制参数，每个所述第二绘制参数作为调用的所述工具类方法中的一所述相关画布原生应用程序编程接口方法的参数。
[0077]
由于第一绘制参数是通用参数，并不能直接传给工具类方法中封装的相关画布原生应用程序编程接口方法进行图形绘制，故而需要根据绘制逻辑对第一绘制参数相应的计算，从而利用第一绘制参数来生成对应调用的所述工具类方法中的一所述相关画布原生应用程序编程接口方法的若干第二绘制参数；分别根据第二绘制参数，利用工具类方法中封装的相关画布原生应用程序编程接口方法在小程序画布中进行图形绘制。
[0078]
以画布绘制圆角矩形的工具类方法为例，由于其可包括设置线条颜色的原生应用程序编程接口方法canvas.setstrokestyle、设置圆角矩形的圆角尺寸的原生应用程序编程接口方法canvas.arc、设置矩形线条的起点和终点的原生应用程序编程接口方法canvas.lineto、连接矩形的顶点的原生应用程序编程接口方法canvas.moveto、设置矩形背景颜色的原生应用程序编程接口方法为canvas.stroke或者canvas.fill、以及设置路径开始和关闭路径的原生应用程序编程接口方法canvas.beginpath和canvas.closepath等原生应用程序编程接口方法。从而可利用第一绘制参数来生成对应调用的绘制圆角矩形的工具类方法中的设置线条颜色的原生应用程序编程接口方法canvas.setstrokestyle、设置圆角矩形的圆角尺寸的原生应用程序编程接口方法canvas.arc、设置矩形线条的起点和终点的原生应用程序编程接口方法canvas.lineto、连接矩形的顶点的原生应用程序编程接口方法canvas.moveto、设置矩形背景颜色的原生应用程序编程接口方法为canvas.stroke或者canvas.fill、以及设置路径开始和关闭路径的原生应用程序编程接口方法canvas.beginpath和canvas.closepath等原生应用程序编程接口方法的若干第二绘制参数。由此可知，在进行圆角矩形绘制时，只需要调用画布绘制圆角矩形的工具类方法的1个函数，可以完成7原生应用程序编程接口方法函数才能完成的功能，从而方便了开发者使用，提成了工作效率。
[0079]
为canvas.setstrokestyle，设置矩形线条的起点和终点的原生应用程序编程接口方法为canvas.1ineto，连接矩形的顶点的原生应用程序编程接口方法为canvas.moveto、设置画设置圆角矩形的圆角尺寸的原生应用程序编程接口方法为canvas，arc；设置矩形背景颜色的原生应用程序编程接口方法为canvas.stroke或者canvas.fill，设置路径开始和关闭路径的原生应用程序编程接口方法为canvas.beginpath和canvas.closepath方法。
[0080]
图为本技术实施例提供的小程序画布图形绘制装置11的一个功能模块图。请参阅图4所示，所述小程序画布图形绘制装置11，包括绘制指令获取模块11l、方法调用模块112、以及图形绘制模块113。
[0081]
其中，所述绘制功能获取模块111用于获取图形绘制的绘制指令，所述绘制指令中
包括需调用的封装方法的调用接口及对应的第一绘制参数；所述方法调用模块112用于根据所述绘制指令，从工具方法库中调用与所述封装方法的调用接口对应的工具类方法，所述工具类方法包括实现对应所需绘制功能所需的相关画布原生应用程序编程接口方法；所述图形绘制模块113用于按照绘制逻辑将所述第一绘制参数传递给调用的所述工具类方法中的各所述相关画布原生应用程序编程接口方法，以在所述小程序画布中进行图形绘制。
[0082]
需要说明的是，本实施例的小程序画布图形绘制装置是与上述小程序画布图形绘制方法相对应的装置，小程序画布图形绘制装置中的功能模块或者分别对应小程序画布图形绘制方法中的相应步骤。本实施例的小程序画布图形绘制装置可与小程序画布图形绘制方法相互相配合实施。相应地，本实施例的小程序画布图形绘制装置中提到的相关技术细节也可应用在上述小程序画布图形绘制方法中。
[0083]
需要说明的是，上述的各功能模块实际实现时可以全部或部分集成到一个物理实体上，也可以物理上分开。且这些模块可以全部以软件通过处理元件调用的形式实现；也可以全部以硬件的形式实现；还可以部分模块通过处理元件调用软件的形式实现，部分模块通过硬件的形式实现。此外这些模块全部或部分可以集成在一起，也可以独立实现。这里所述的处理元件可以是一种集成电路，具有信号的处理能力。在实现过程中，上述方法的部分或全部步骤，或以上的各功能模块可以通过处理器元件中的硬件的集成逻辑电路或者软件形式的指令完成。
[0084]
如图5所示，是本技术实现小程序画布图形绘制方法的电子设备的一种结构示意图。
[0085]
所述电子设备1可以包括存储器12、处理器13和总线，还可以包括存储在所述存储器12中并可在所述处理器13上运行的计算机程序，例如小程序画布图形绘制程序。
[0086]
其中，存储器l2至少包括一种类型的可读存储介质，所述可读存储介质包括闪存、移动硬盘、多媒体卡、卡型存储器(例如：sd或dx存储器等)、磁性存储器、磁盘、光盘等。存储器12在一些实施例中可以是电子设备1的内部存储单元，例如该电子设备1的移动硬盘。存储器12在另一些实施例中也可以是电子设备1的外部存储设备，例如电子设备1上配备的插接式移动硬盘、智能存储卡(smart media card，smc)、安全数字(secure digital，sd)卡、闪存卡(flash card)等。进一步地，存储器12还可以既包括电子设备1的内部存储单元也包括外部存储设备。存储器12不仅可以用于存储安装于电子设备1的应用软件及各类数据，例如小程序画布图形绘制的代码等，还可以用于暂时地存储已经输出或者将要输出的数据。
[0087]
处理器13在一些实施例中可以由集成电路组成，例如可以由单个封装的集成电路所组成，也可以是由多个相同功能或不同功能封装的集成电路所组成，包括一个或者多个中央处理器(central processing unit，cpu)、微处理器、数字处理芯片、图形处理器及各种控制芯片的组合等。处理器13是所述电子设备1的控制核心(control unit)，利用各种接口和线路连接整个电子设备1的各个部件，通过运行或执行存储在所述存储器12内的程序或者模块(例如小程序画布图形绘制程序等)，以及调用存储在所述存储器12内的数据，以执行电子设备1的各种功能和处理数据。
[0088]
所述处理器13执行所述电子设备1的操作系统以及安装的各类应用程序。所述处理器13执行所述应用程序以实现上述小程序画布图形绘制方法中的步骤，例如图3所示的步骤。
[0089]
示例性的，所述计算机程序可以被分割成一个或多个模块，所述一个或者多个模块被存储在所述存储器12中，并由所述处理器13执行，以完成本技术。所述一个或多个模块可以是能够完成特定功能的一系列计算机程序指令段，该指令段用于描述所述计算机程序在所述电子设备1中的执行过程。例如，所述计算机程序可以被分割成处理逻辑确定模块111、接口方法获取模块112、接口方法封装模块113以及工具方法整合模块114。
[0090]
上述以软件功能模块的形式实现的集成的单元，可以存储在一个计算机可读取存储介质中，所述计算机可读存储介质可以是非易失性，也可以是易失性。上述软件功能模块存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机、计算机设备，或者网络设备等)或处理器(processor)执行本技术各个实施例所述小程序画布图形绘制方法的部分功能。
[0091]
本技术的程序画布应用程序接口封装方法、装置、设备及介质，通过确定每个所述绘制功能的处理逻辑；获取完成每个所述绘制功能所需的相关画布原生应用程序编程接口方法；分别对完成每个绘制功能所需的相关画布原生应用程序编程接口方法进行封装，以获取完成各所述绘制功能的工具类方法，其中，每个所述工具类方法对外提供统一的调用接口和通用参数；对完成各所述绘制功能的工具类方法进行整合，以构成工具方法库。通过将小程序画布相关的应用程序接口封装成工具方法库使用，在开发小程序相关的海报制作过程中，节省了大量重复的工作，提升了开发效率。并且通过统一的接口形式，方便了开发者在开发过程中的编码工作，如果出现了问题，也方便立刻查找问题。同时该工具方法库也可迁移至其它有需要页面显示海报的小程序中，具备较强的可移植性。
[0092]
对于本领域技术人员而言，显然本技术不限于上述示范性实施例的细节，而且在不背离本技术的精神或基本特征的情况下，能够以其他的具体形式实现本技术。
[0093]
以上实施例仅用以说明本技术的技术方案而非限制，尽管参照较佳实施例对本技术进行了详细说明，本领域的普通技术人员应当理解，可以对本技术的技术方案进行修改或等同替换，而不脱离本技术技术方案的精神和范围。

技术特征：
1.一种小程序画布图形绘制方法，其特征在于，包括：获取图形绘制的绘制指令，所述绘制指令中包括需调用的封装方法的调用接口及对应的第一绘制参数；根据所述绘制指令，从工具方法库中调用与所述封装方法的调用接口对应的工具类方法，所述工具类方法包括实现对应所需绘制功能所需的相关画布原生应用程序编程接口方法；按照绘制逻辑将所述第一绘制参数传递给调用的所述工具类方法中的各所述相关画布原生应用程序编程接口方法，以在所述小程序画布中进行图形绘制。2.根据权利要求1所述的小程序画布图形绘制方法，其特征在于，获取所述图形绘制的绘制指令之前，还包括：监测小程序视图界面上的所述所需绘制功能的触发操作，弹出与所述所需绘制功能相对应的参数设置界面；接收所述参数设置界面的输入参数，以作为所述第一绘制参数；基于所述所需绘制功能对应的所述需调用的封装方法的调用接口和所述第一绘制参数，生成所述绘制指令。3.根据权利要求1所述的小程序画布图形绘制方法，其特征在于，所述工具类方法的获取方式包括：获取完成每个所述所需绘制功能的相关画布原生应用程序编程接口方法；分别对完成每个所述所需绘制功能的相关画布原生应用程序编程接口方法进行封装，以获取完成各所述所需绘制功能的工具类方法，其中，每个所述工具类方法对外提供统一的调用接口和绘制参数。4.根据权利要求1所述的小程序画布图形绘制方法，其特征在于，分别对完成每个所述所需绘制功能的相关画布原生应用程序编程接口方法进行封装，以获取完成各所述所需绘制功能的工具类方法，具体包括：按照完成所述所需绘制功能的绘制逻辑来对所述所需绘制功能的相关画布原生应用程序编程接口方法进行封装，以获取完成各所述所需绘制功能的工具类方法。5.根据权利要求1所述的小程序画布图形绘制方法，其特征在于，按照绘制逻辑将所述第一绘制参数传递给调用的所述工具类方法中的各所述相关画布原生应用程序编程接口方法，以在所述小程序画布中进行图形绘制，具体包括：根据绘制逻辑对所述第一绘制参数进行处理，以获取若干第二绘制参数，每个所述第二绘制参数作为调用的所述工具类方法中的一所述相关画布原生应用程序编程接口方法的参数。6.根据权利要求1所述的小程序画布图形绘制方法，其特征在于，所述所需绘制功能包括画布绘制圆角矩形、画布绘制多行文本、画布绘制图片或生成画布保存。7.根据权利要求6所述的小程序画布图形绘制方法，其特征在于，所述画布绘制圆角矩形的画布原生应用程序编程接口方法包括：设置线条颜色的原生应用程序编程接口方法、设置圆角矩形的圆角尺寸的原生应用程序编程接口方法、设置矩形线条的起点和终点的原生应用程序编程接口方法、连接矩形的顶点的原生应用程序编程接口方法、以及设置路径开始和关闭路径的原生应用程序编程接口方法。
8.一种小程序画布图形绘制方法装置，其特征在于，包括：绘制指令获取模块，用于获取图形绘制的绘制指令，所述绘制指令中包括需调用的封装方法的调用接口及对应的第一绘制参数；方法调用模块，用于根据所述绘制指令，从工具方法库中调用与所述封装方法的调用接口对应的工具类方法，所述工具类方法包括实现对应所需绘制功能所需的相关画布原生应用程序编程接口方法；图形绘制模块，用于按照绘制逻辑将所述第一绘制参数传递给调用的所述工具类方法中的各所述相关画布原生应用程序编程接口方法，以在所述小程序画布中进行图形绘制。9.一种电子设备，其特征在于，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至7中任一项所述方法的步骤。10.一种计算机可读存储介质，其上存储于计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至7中任一项所述方法的步骤。

技术总结
本申请涉及数据处理技术领域，提供一种小程序画布图形绘制方法、装置、设备及介质。该方法通过获取图形绘制的绘制指令，所述绘制指令中包括需调用的封装方法的调用接口及对应的第一绘制参数；根据所述绘制指令，从工具方法库中调用与所述封装方法的调用接口对应的工具类方法，所述工具类方法包括实现对应所需绘制功能所需的相关画布原生应用程序编程接口方法；按照绘制逻辑将所述第一绘制参数传递给调用的所述工具类方法中的各所述相关画布原生应用程序编程接口方法，以在所述小程序画布中进行图形绘制。利用本申请在开发小程序相关的海报制作过程中，节省了大量重复的工作，提升了开发效率。升了开发效率。升了开发效率。


技术研发人员：陈传凯
受保护的技术使用者：康键信息技术（深圳）有限公司
技术研发日：2023.03.21
技术公布日：2023/7/7