用于画图的方法及装置、终端设备、计算机可读存储介质与流程

本申请涉及前端，具体而言，涉及一种用于画图的方法及装置、终端设备、计算机可读存储介质。

背景技术：

1、目前，随着互联网技术的不断发展，html5(hypertext markup language 5，超文本标记语言)canvas(画布)画图越来越受欢迎。

2、相关技术公开了一种html5 canvas画图，利用javascript绘制各种图表、动画等。

3、在实现本公开实施例的过程中，发现相关技术中至少存在如下问题：

4、相关技术中的html5 canvas画图，对于普通程序开发工作者来讲，仅仅绘制一些简单的形状、图片或者文本，就需要记住许多参数；若需要绘制形状、图片、文本混合在一起的业务组件，这时，往往需要花费更多的时间，从而，降低了html5画布canvas画图的效率。

5、需要说明的是，在上述背景技术部分公开的信息仅用于加强对本申请的背景的理解，因此可以包括不构成对本领域普通技术人员已知的现有技术的信息。

技术实现思路

1、为了对披露的实施例的一些方面有基本的理解，下面给出了简单的概括。所述概括不是泛泛评述，也不是要确定关键/重要组成元素或描绘这些实施例的保护范围，而是作为后面的详细说明的序言。

2、本公开实施例提供了一种用于画图的方法及装置、终端设备、计算机可读存储介质，减少了画图的时间，提高了html5 canvas画图的效率。

3、在一些实施例中，所述方法包括：接收用户上传的图片，作为初始图片，其中，用户上传的图片带有业务组件轮廓。将初始图片中的形状、图片和文本转化为目标代码指令，其中，目标代码可被超文本标记语言html5识别。执行目标代码指令，利用html5画布canvas进行画图。

4、可选地，将初始图片中的形状、图片和文本转化为目标代码指令，包括：将初始图片中的形状、图片、文本转化成点、线、面的坐标数据。将坐标数据转化为目标代码指令。

5、可选地，所述用于画图的方法还包括：接收用户的样式微调指令。将样式微调指令转化为目标代码指令。

6、可选地，样式微调包括颜色的微调，和/或，线条粗细的微调，和/或，边距的微调。

7、可选地，接收用户上传的图片，作为初始图片，其中，用户上传的图片带有业务组件轮廓包括：接收用户上传的图片。对图片的格式和大小进行检测。在检测结果合格的情况下，将所述图片作为初始图片。

8、可选地，所述用于画图的方法还包括：在检测结果不合格的情况下，发出重新上传图片的提示信息。

9、可选地，接收用户上传的图片，作为初始图片前，还包括：进行初始化操作。在初始化成功的情况下，显示初始化成功，或，在初始化不成功的情况下，重新进行初始化操作。

10、在一些实施例中，所述一种用于画图的装置包括：数据收集模块，用于接收用户上传的图片，作为初始图片，其中，用户上传的图片带有业务组件轮廓。数据转化模块，用于将初始图片中的形状、图片和文本转化为目标代码指令，其中，目标代码可被超文本标记语言html5识别。画图模块，用于执行目标代码指令，利用html5画布canvas进行画图。

11、在一些实施例中，所述一种终端设备，包括处理器和存储有程序指令的存储器，其特征在于，所述处理器被配置为在运行所述程序指令时，执行上述的用于画图的方法。

12、在一些实施例中，所述一种计算机可读存储介质，存储有程序指令，其特征在于，所述程序指令在运行时，用以使得计算机执行上述的用于画图的方法。

13、本公开实施例提供的用于画图的方法及装置、终端设备、计算机可读存储介质，可以实现以下技术效果：

14、本公开实施例通过增加一个中间件，成为普通程序开发工作者和html5 canvas画图的沟通桥梁。普通程序开发工作者只需要手绘出业务组件的大致轮廓样子，然后以图片的形式上传给中间件。首先，中间件对图片进行识别，转化成点、线、面的坐标数据，然后，中间件将坐标数据转化为html5能够识别的代码指令，最后，根据代码指令，html5利用画布canvas进行画图，生成一个普通程序开发工作者需要的业务组件。此外，中间件也支持到对业务组件的颜色、粗细、上下左右边距等各种参数的微调。这样，通过提供一个中间件，可以让一个普通程序开发工作者，即使在不熟悉html5 canvas画图的情况下，也能够迅速地进行画图，从而减少了画图的时间，提高了html5 canvas画图的效率。

15、以上的总体描述和下文中的描述仅是示例性和解释性的，不用于限制本申请。

技术特征：

1.一种用于画图的方法，其特征在于，所述方法包括：

2.根据权利要求1所述的方法，其特征在于，将初始图片中的形状、图片和文本转化为目标代码指令，包括：

3.根据权利要求2所述的方法，其特征在于，还包括：

4.根据权利要求3所述的方法，其特征在于，样式微调包括颜色的微调，和/或，线条粗细的微调，和/或，边距的微调。

5.根据权利要求1所述的方法，其特征在于，接收用户上传的图片，作为初始图片；其中，用户上传的图片带有业务组件轮廓，包括：

6.根据权利要求5所述的方法，其特征在于，还包括：

7.根据权利要求1至4任一项所述的方法，其特征在于，接收用户上传的图片，作为初始图片前，还包括：

8.一种用于画图的装置，其特征在于，包括：

9.一种终端设备，包括处理器和存储有程序指令的存储器，其特征在于，所述处理器被配置为在运行所述程序指令时，执行如权利要求1至7任一项所述的用于画图的方法。

10.一种计算机可读存储介质，存储有程序指令，其特征在于，所述程序指令在运行时，用以使得计算机执行如权利要求1至7任一项所述的用于画图的方法。

技术总结本申请涉及前端技术领域，公开一种用于画图的方法，包括：接收用户上传的图片，作为初始图片，其中，用户上传的图片带有业务组件轮廓。将初始图片中的形状、图片和文本转化为目标代码指令，其中，目标代码可被超文本标记语言HTML5识别。执行目标代码指令，利用HTML5画布Canvas进行画图。本公开通过提供一个中间件，可以让一个普通程序开发工作者，即使在不熟悉HTML5Canvas画图的情况下，也能够迅速地进行画图，从而减少了画图的时间，提高了HTML5Canvas画图的效率。本申请还公开一种用于画图的装置、终端设备、计算机可读存储介质。技术研发人员：曹亚南,李莉,尹飞,朱承受保护的技术使用者：青岛海尔智能家电科技有限公司技术研发日：技术公布日：2024/7/29