CN117456052A - 基于canvas的图形编辑方法及装置 - Google Patents

Abstract

本申请提供一种基于canvas的图形编辑方法及装置。方法包括：获取设计要素，设计要素包括图案要素及与图案要素对应的注解文本；在预设的canvas画布上，创建与设计要素的数量对应的图层；将所有设计要素分别设置在canvas画布上的相应图层；基于预设调整策略，对设计要素的尺寸及在相应图层的位置进行调整，得到第一目标图像，其中，在第一目标图像中，任意两个图案要素不交叉，任意两个注解文本不交叉。

Description

基于canvas的图形编辑方法及装置

技术领域

本发明涉及图像处理技术领域，具体而言，涉及一种基于canvas的图形编辑方法及装置。

背景技术

图案设计是设计行业中常见的设计类别之一。图案设计可以应用在产品外包装、平面广告等场景。目前，设计师在基于canvas进行图案设计时，在生成的图像中，通常缺少产品的设计理念的注解，另外，容易因设计要素(如图标)集中在一个图层，而不便于进行图片的灵活编辑。

发明内容

有鉴于此，本申请实施例的目的在于提供一种基于canvas的图形编辑方法及装置，能够改善图像编辑不灵活、不便于添加设计注解的问题。

为实现上述技术目的，本申请采用的技术方案如下：

第一方面，本申请实施例提供了一种基于canvas的图形编辑方法，所述方法包括：

获取设计要素，所述设计要素包括图案要素及与所述图案要素对应的注解文本；

在预设的canvas画布上，创建与所述设计要素的数量对应的图层；

将所有所述设计要素分别设置在所述canvas画布上的相应图层；

基于预设调整策略，对所述设计要素的尺寸及在所述相应图层的位置进行调整，得到第一目标图像，其中，在所述第一目标图像中，任意两个所述图案要素不交叉，任意两个所述注解文本不交叉。

结合第一方面，在一些可选的实施方式中，所述方法还包括：

基于接收的第一操作指令，在所述canvas画布中调整所述第一目标图像中第一指定图案要素的渐变色，和/或生成所述第一目标图像中第二指定图案要素的边缘描边，得到更新后的第一目标图像。

结合第一方面，在一些可选的实施方式中，所述方法还包括：

基于接收的第二操作指令，控制所述第一目标图像中所有的注解文本的透明度变更为全透明，得到第二目标图像。

结合第一方面，在一些可选的实施方式中，所述方法还包括：

将所述第一目标图像、所述第二目标图像以指定图像格式导出至指定文件夹。

结合第一方面，在一些可选的实施方式中，基于预设调整策略，对所述设计要素的尺寸及在所述相应图层的位置进行调整，得到第一目标图像，包括：

基于所述设计要素中每个图案要素及所述每个图案要素的第一初始尺寸、所述canvas画布对应的可编辑尺寸，预估将所有图案要素以不交叉的方式绘制在所述canvas画布中所占用的第一目标尺寸以及所述所有图案要素在所述canvas画布中的第一目标位置，所述第一目标尺寸小于等于所述可编辑尺寸；

基于所述第一目标尺寸、所述每个图案要素在所述canvas画布中的位置和所述第一初始尺寸，确定所述每个图案要素对应的第一目标缩放比例；

将所述设计要素中的图案要素移动至所述canvas画布相应图层中的所述第一目标位置，并基于所述第一目标缩放比例，对所述设计要素中相应的图案要素进行缩放操作；

基于所述设计要素中每条注解文本及所述每条注解文本的第二初始尺寸、所述canvas画布对应的可编辑尺寸，预估将所有注解文本以不交叉的方式绘制在所述canvas画布中所占用的第二目标尺寸以及所述所有注解文本在所述canvas画布中的第二目标位置，其中，所述每个图案要素的第一目标位置与对应的所述每条注解文本的第二目标位置相关联，所述第二目标尺寸小于等于所述可编辑尺寸；

基于所述第二目标尺寸、所述每条注解文本在所述canvas画布中的位置和所述第二初始尺寸，确定所述每条注解文本对应的第二目标缩放比例；

将所述设计要素中的注解文本移动至所述canvas画布相应图层中的所述第二目标位置，并基于所述第二目标缩放比例，对所述设计要素中相应的注解文本进行缩放操作，以得到所述第一目标图像。

第二方面，本申请实施例还提供一种基于canvas的图形编辑装置，所述装置包括：

获取单元，用于获取设计要素，所述设计要素包括图案要素及与所述图案要素对应的注解文本；

创建单元，用于在预设的canvas画布上，创建与所述设计要素的数量对应的图层；

设置单元，用于将所有所述设计要素分别设置在所述canvas画布上的相应图层；

调整单元，用于基于预设调整策略，对所述设计要素的尺寸及在所述相应图层的位置进行调整，得到第一目标图像，其中，在所述第一目标图像中，任意两个所述图案要素不交叉，任意两个所述注解文本不交叉。

结合第二方面，在一些可选的实施方式中，所述调整单元还用于：

基于接收的第一操作指令，在所述canvas画布中调整所述第一目标图像中第一指定图案要素的渐变色，和/或生成所述第一目标图像中第二指定图案要素的边缘描边，得到更新后的第一目标图像。

结合第二方面，在一些可选的实施方式中，所述调整单元还用于：

基于接收的第二操作指令，控制所述第一目标图像中所有的注解文本的透明度变更为全透明，得到第二目标图像。

结合第二方面，在一些可选的实施方式中，所述装置还包括导出单元，用于：

将所述第一目标图像、所述第二目标图像以指定图像格式导出至指定文件夹。

结合第二方面，在一些可选的实施方式中，所述调整单元还用于：

基于所述设计要素中每个图案要素及所述每个图案要素的第一初始尺寸、所述canvas画布对应的可编辑尺寸，预估将所有图案要素以不交叉的方式绘制在所述canvas画布中所占用的第一目标尺寸以及所述所有图案要素在所述canvas画布中的第一目标位置，所述第一目标尺寸小于等于所述可编辑尺寸；

基于所述第一目标尺寸、所述每个图案要素在所述canvas画布中的位置和所述第一初始尺寸，确定所述每个图案要素对应的第一目标缩放比例；

将所述设计要素中的图案要素移动至所述canvas画布相应图层中的所述第一目标位置，并基于所述第一目标缩放比例，对所述设计要素中相应的图案要素进行缩放操作；

基于所述设计要素中每条注解文本及所述每条注解文本的第二初始尺寸、所述canvas画布对应的可编辑尺寸，预估将所有注解文本以不交叉的方式绘制在所述canvas画布中所占用的第二目标尺寸以及所述所有注解文本在所述canvas画布中的第二目标位置，其中，所述每个图案要素的第一目标位置与对应的所述每条注解文本的第二目标位置相关联，所述第二目标尺寸小于等于所述可编辑尺寸；

基于所述第二目标尺寸、所述每条注解文本在所述canvas画布中的位置和所述第二初始尺寸，确定所述每条注解文本对应的第二目标缩放比例；

将所述设计要素中的注解文本移动至所述canvas画布相应图层中的所述第二目标位置，并基于所述第二目标缩放比例，对所述设计要素中相应的注解文本进行缩放操作，以得到所述第一目标图像。

采用上述技术方案的发明，具有如下优点：

在本申请提供的技术方案中，通过在预设的canvas画布上，创建与设计要素的数量对应的图层，然后，将所有设计要素分别设置在canvas画布上的相应图层中，如此，方便基于图层对图像进行灵活编辑。再基于预设调整策略，对设计要素的尺寸及在相应图层的位置进行调整，得到第一目标图像，其中，在第一目标图像中，任意两个图案要素不交叉，任意两个注解文本不交叉。如此，可以灵活将注解文本添加在图像中，可以实现图像的自动生成与自适应排版。

附图说明

本申请可以通过附图给出的非限定性实施例进一步说明。应当理解，以下附图仅示出了本申请的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1为本申请实施例提供的基于canvas的图形编辑方法的流程示意图。

图2为本申请实施例提供的基于canvas的图形编辑装置的框图。

图标：200-图形编辑装置；210-获取单元；220-创建单元；230-设置单元；240-调整单元。

具体实施方式

以下将结合附图和具体实施例对本申请进行详细说明，需要说明的是，在附图或说明书描述中，相似或相同的部分都使用相同的图号，附图中未绘示或描述的实现方式，为所属技术领域中普通技术人员所知的形式。在本申请的描述中，术语“第一”、“第二”等仅用于区分描述，而不能理解为指示或暗示相对重要性。

请参照图1，本申请还提供一种基于canvas的图形编辑方法，该图形编辑方法可以应用于电子设备。电子设备可以包括处理模块及存储模块。存储模块内存储计算机程序，当计算机程序被所述处理模块执行时，使得电子设备能够执行该图形编辑方法中的相应步骤。

其中，电子设备可以是但不限于个人电脑、服务器等设备。图形编辑方法可以应用于平面广告设计、产品包装盒的外观图案设计(如卷烟包装盒的外观图案的设计)。图形编辑方法可以包括如下步骤：

步骤110，获取设计要素，所述设计要素包括图案要素及与所述图案要素对应的注解文本；

步骤120，在预设的canvas画布上，创建与所述设计要素的数量对应的图层；

步骤130，将所有所述设计要素分别设置在所述canvas画布上的相应图层；

步骤140，基于预设调整策略，对所述设计要素的尺寸及在所述相应图层的位置进行调整，得到第一目标图像，其中，在所述第一目标图像中，任意两个所述图案要素不交叉，任意两个所述注解文本不交叉。

下面将对图形编辑方法的各步骤进行详细阐述，如下：

在执行步骤110之前，设计师可以预先准备好大量的图标和图标的注解文本，以作为设计要素中的图案要素和注解文本。大量的图标和图标的注解文本可以形成数据库。

在需要进行图片设计时，即，在步骤110中，设计师可以利用电子设备，从数据库中灵活选取图案要素及与图案要素对应的注解文本，以作为所选的设计要素。所选择的设计要素的数量可以根据实际情况灵活确定，这里不作具体限定。

在步骤120中，在canvas画布上创建得到的图层数量与设计要素的数量相同。例如，设计要素中的图案要素和注解文本的总数量为M个，则会在canvas画布上创建多个图层，以得到M个图层，M为大于1的整数。

在步骤130中，电子设备可以将设计要素中的所有图案要素、注解文本，分别绘制在canvas画布上的不同图层，每个图案要素单独占用一个图层，每条注解文本也单独占用一个图层。即，一个图层中，通常仅设置一个图案要素或文本注解。如此，方便后续基于单个图层进行图像的灵活编辑。比如，基于单个图层调整图层中所有元素的透明度。

需要说明的是，电子设备可以随机地将设计要素中的图案要素及对应的注解文本，设置在canvas画布图层中的任一位置，后续通过步骤140再对图层中图案要素及对应的注解文本的位置进行调整，以及进行尺寸的缩放。

在步骤140中，预设调整策略可以根据实际情况灵活确定。通常而言，预设调整策略需要满足如下条件：

在canvas画布中，经过缩放和/或平移后的任意两个图案要素不交叉；

在canvas画布中，经过缩放和/或平移后的任意两个注解文本不交叉。

在本实施例中，步骤140可以包括：

步骤141，基于所述设计要素中每个图案要素及所述每个图案要素的第一初始尺寸、所述canvas画布对应的可编辑尺寸，预估将所有图案要素以不交叉的方式绘制在所述canvas画布中所占用的第一目标尺寸以及所述所有图案要素在所述canvas画布中的第一目标位置，所述第一目标尺寸小于等于所述可编辑尺寸；

步骤142，基于所述第一目标尺寸、所述每个图案要素在所述canvas画布中的位置和所述第一初始尺寸，确定所述每个图案要素对应的第一目标缩放比例；

步骤143，将所述设计要素中的图案要素移动至所述canvas画布相应图层中的所述第一目标位置，并基于所述第一目标缩放比例，对所述设计要素中相应的图案要素进行缩放操作；

步骤144，基于所述设计要素中每条注解文本及所述每条注解文本的第二初始尺寸、所述canvas画布对应的可编辑尺寸，预估将所有注解文本以不交叉的方式绘制在所述canvas画布中所占用的第二目标尺寸以及所述所有注解文本在所述canvas画布中的第二目标位置，其中，所述每个图案要素的第一目标位置与对应的所述每条注解文本的第二目标位置相关联，所述第二目标尺寸小于等于所述可编辑尺寸；

步骤145，基于所述第二目标尺寸、所述每条注解文本在所述canvas画布中的位置和所述第二初始尺寸，确定所述每条注解文本对应的第二目标缩放比例；

步骤146，将所述设计要素中的注解文本移动至所述canvas画布相应图层中的所述第二目标位置，并基于所述第二目标缩放比例，对所述设计要素中相应的注解文本进行缩放操作，以得到所述第一目标图像。

在步骤141中，canvas画布对应的可编辑尺寸可以由设计师根据实际情况灵活设置，这里不作具体限制。针对canvas画布中的可编辑区域，可以逐个选择图案要素，贴设在随机选择的图层中。若当前贴设的图案要素与上次在另一图层贴设的图案要素存在交叉重叠，则在该可编辑区域中，对当前贴设的图案要素进行平移，使得当前贴设的图案要素与上次贴设的图案要素不交叉重叠。若在可编辑区域中不存在剩余空白区域，能使得平移后的当前贴设的图案要素与上次贴设的图案要素不交叉重叠，此时，可以对当前贴设的图案要素进行缩小，和/或对上次贴设的图案要素进行缩小，从而使得当前图案要素能够不交叉重叠地贴设在可编辑区域中。如此，可以预估得到设计要素中的图案要素以不交叉重叠的方式绘制在可编辑区域中所占用的区域的第一目标尺寸，以及图案要素在可编辑区域中的目标位置。

在步骤142中，第一目标缩放比例可理解为将图案要素以第一初始尺寸缩放至第一目标尺寸时的缩放比例。

在步骤144中，注解文本的缩放/平移方式，与图案要素的缩放/平移方式相类似，这里不再赘述。区别在于，注解文本在平移或缩放时，是围绕所关联的图案要素的周边进行缩放/或平移，即，注解文本与所关联的图案要素的间距小于等于指定距离，以避免注解文本距离所关联的图案要素过远。其中，注解文本与所关联的图案要素的距离可以指注解文本的文本框的中心与图案要素的中心的距离，指定距离可以根据实际情况灵活确定，这里不作具体限制。

在步骤145中，第二目标缩放比例即为将注解文本从第二初始尺寸缩放至第二目标尺寸时的缩放比例。

可理解地，经过图案要素、注解文本的位置调节及尺寸缩放后，便得到第一目标图像。在第一目标图像中，图案要素之间互不交叉，注解文本之间互不交叉，图案要素与注解文本之间可以存在交叉重叠的区域。

在本实施例中，方法还可以包括：

基于接收的第一操作指令，在所述canvas画布中调整所述第一目标图像中第一指定图案要素的渐变色，和/或生成所述第一目标图像中第二指定图案要素的边缘描边，得到更新后的第一目标图像。

可理解地，第一指定图案要素、第二指定图案要素均可以根据实际情况灵活选择。设计师可以根据实际需求，对设计要素中的任一个图案要素，灵活调节渐变色、描边的线宽、描边颜色中的一项或多项，实现图案的自定义编辑。其中，用于调节渐变色、描边的线宽、描边颜色的操作指令即为第一操作指令。

另外，设计师可随意排版，拖动图层等编辑功能，图标/文本不能超出可编辑区域。

在本实施例中，方法还可以包括：

基于接收的第二操作指令，控制所述第一目标图像中所有的注解文本的透明度变更为全透明，得到第二目标图像。

可理解地，用于透明度条件的操作指令即为第二操作指令。设计师可以利用电子设备的操作界面，通过对注解文本所在图层的属性进行调整，使得图层的文字透明度为全透明，即，透明度为100％，如此，在图像的视觉呈现上，相当于删除或隐去了注解文本。

第二目标图像相当于第一图像隐藏了注解文本后呈现的图像，第二图像可理解为实际印制在产品包装盒的外观图案、广告宣传图等。

在本实施例中，电子设备可以一次性地输出第一目标图像和第二目标图像。第一目标图像上的注解文本可以方便他人理解设计师的设计理念；第二目标图像即为在产品或广告上实际要呈现的外观图案，方便用户结合第一目标图像进行对照查看。

在本实施例中，方法还可以包括：

将所述第一目标图像、所述第二目标图像以指定图像格式导出至指定文件夹。

指定图像格式可以是但不限于JPEG、TIFF、RAW及PNG等。指定文件夹可以根据实际情况灵活创建与设置。设计师可以根据实际情况灵活选择相应的图像格式进行图像文件的导出，并将文件灵活导出至期望的文件夹，如此，有利于提高设计师的用户体验。

作为一种示例，当方法应用在卷烟包装盒的外观图案设计时，设计师可以在电子设备的浏览器上，利用Canvas API实现图片编辑器功能。Canvas API是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，支持脚本化客户端绘图操作。设计师可以利用电子设备对第一目标图像上的注解文本、图案要素进行高亮、缩放等展示，或进行缩放的动画展示，并对每一个设计要素进行注解。如此，一是在外观图案设计研发阶段，便于对卷烟包装盒的构成元素独立编辑；二是在卷烟销售阶段，便于消费者了解卷烟产品外观图案的设计理念和外观设计元素表征的文化、情感内容等。

请参照图2，本申请还提供一种基于canvas的图形编辑装置200。该图形编辑装置200包括至少一个可以软件或固件(Firmware)的形式存储于存储模块中或固化在电子设备的操作系统(Operating System，OS)中的软件功能模块。处理模块用于执行存储模块中存储的可执行模块，例如图形编辑装置200所包括的软件功能模块及计算机程序等。

图形编辑装置200所包括的各单元具有的功能可以如下：

获取单元210，用于获取设计要素，所述设计要素包括图案要素及与所述图案要素对应的注解文本；

创建单元220，用于在预设的canvas画布上，创建与所述设计要素的数量对应的图层；

设置单元230，用于将所有所述设计要素分别设置在所述canvas画布上的相应图层；

调整单元240，用于基于预设调整策略，对所述设计要素的尺寸及在所述相应图层的位置进行调整，得到第一目标图像，其中，在所述第一目标图像中，任意两个所述图案要素不交叉，任意两个所述注解文本不交叉。

可选地，所述调整单元240还用于：基于接收的第一操作指令，在所述canvas画布中调整所述第一目标图像中第一指定图案要素的渐变色，和/或生成所述第一目标图像中第二指定图案要素的边缘描边，得到更新后的第一目标图像。

可选地，所述调整单元240还用于：基于接收的第二操作指令，控制所述第一目标图像中所有的注解文本的透明度变更为全透明，得到第二目标图像。

可选地，图形编辑装置200还包括导出单元，用于：将所述第一目标图像、所述第二目标图像以指定图像格式导出至指定文件夹。

可选地，所述调整单元240还用于：

基于所述设计要素中每个图案要素及所述每个图案要素的第一初始尺寸、所述canvas画布对应的可编辑尺寸，预估将所有图案要素以不交叉的方式绘制在所述canvas画布中所占用的第一目标尺寸以及所述所有图案要素在所述canvas画布中的第一目标位置，所述第一目标尺寸小于等于所述可编辑尺寸；

基于所述第一目标尺寸、所述每个图案要素在所述canvas画布中的位置和所述第一初始尺寸，确定所述每个图案要素对应的第一目标缩放比例；

将所述设计要素中的图案要素移动至所述canvas画布相应图层中的所述第一目标位置，并基于所述第一目标缩放比例，对所述设计要素中相应的图案要素进行缩放操作；

基于所述设计要素中每条注解文本及所述每条注解文本的第二初始尺寸、所述canvas画布对应的可编辑尺寸，预估将所有注解文本以不交叉的方式绘制在所述canvas画布中所占用的第二目标尺寸以及所述所有注解文本在所述canvas画布中的第二目标位置，其中，所述每个图案要素的第一目标位置与对应的所述每条注解文本的第二目标位置相关联，所述第二目标尺寸小于等于所述可编辑尺寸；

基于所述第二目标尺寸、所述每条注解文本在所述canvas画布中的位置和所述第二初始尺寸，确定所述每条注解文本对应的第二目标缩放比例；

将所述设计要素中的注解文本移动至所述canvas画布相应图层中的所述第二目标位置，并基于所述第二目标缩放比例，对所述设计要素中相应的注解文本进行缩放操作，以得到所述第一目标图像。

在本实施例中，处理模块可以是一种集成电路芯片，具有信号的处理能力。上述处理模块可以是通用处理器。例如，该处理器可以是中央处理器(Central Processing Unit，CPU)、数字信号处理器(Digital Signal Processing，DSP)、专用集成电路(ApplicationSpecific Integrated Circuit，ASIC)、现场可编程门阵列(Field－Programmable GateArray，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件，可以实现或者执行本申请实施例中的公开的各方法、步骤及逻辑框图。

存储模块可以是，但不限于，随机存取存储器，只读存储器，可编程只读存储器，可擦除可编程只读存储器，电可擦除可编程只读存储器等。在本实施例中，存储模块可以用于存储设计要素、canvas画布、预设调整策略及目标图像等。当然，存储模块还可以用于存储程序，处理模块在接收到执行指令后，执行该程序。

需要说明的是，所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的电子设备的具体工作过程，可以参考前述方法中的各步骤对应过程，在此不再过多赘述。

在本申请所提供的实施例中，应该理解到，所揭露的装置、系统和方法，也可以通过其它的方式实现。以上所描述的装置、系统和方法实施例仅仅是示意性的，例如，附图中的流程图和框图显示了根据本申请的多个实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。另外，在本申请各个实施例中的各功能模块可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或两个以上模块集成形成一个独立的部分。

以上所述仅为本申请的实施例而已，并不用于限制本申请的保护范围，对于本领域的技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。

Claims (10)

1.一种基于canvas的图形编辑方法，其特征在于，所述方法包括：

获取设计要素，所述设计要素包括图案要素及与所述图案要素对应的注解文本；

在预设的canvas画布上，创建与所述设计要素的数量对应的图层；

将所有所述设计要素分别设置在所述canvas画布上的相应图层；

基于预设调整策略，对所述设计要素的尺寸及在所述相应图层的位置进行调整，得到第一目标图像，其中，在所述第一目标图像中，任意两个所述图案要素不交叉，任意两个所述注解文本不交叉。

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

基于接收的第一操作指令，在所述canvas画布中调整所述第一目标图像中第一指定图案要素的渐变色，和/或生成所述第一目标图像中第二指定图案要素的边缘描边，得到更新后的第一目标图像。

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

基于接收的第二操作指令，控制所述第一目标图像中所有的注解文本的透明度变更为全透明，得到第二目标图像。

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

将所述第一目标图像、所述第二目标图像以指定图像格式导出至指定文件夹。

5.根据权利要求1所述的方法，其特征在于，基于预设调整策略，对所述设计要素的尺寸及在所述相应图层的位置进行调整，得到第一目标图像，包括：

基于所述设计要素中每个图案要素及所述每个图案要素的第一初始尺寸、所述canvas画布对应的可编辑尺寸，预估将所有图案要素以不交叉的方式绘制在所述canvas画布中所占用的第一目标尺寸以及所述所有图案要素在所述canvas画布中的第一目标位置，所述第一目标尺寸小于等于所述可编辑尺寸；

基于所述第一目标尺寸、所述每个图案要素在所述canvas画布中的位置和所述第一初始尺寸，确定所述每个图案要素对应的第一目标缩放比例；

将所述设计要素中的图案要素移动至所述canvas画布相应图层中的所述第一目标位置，并基于所述第一目标缩放比例，对所述设计要素中相应的图案要素进行缩放操作；

基于所述设计要素中每条注解文本及所述每条注解文本的第二初始尺寸、所述canvas画布对应的可编辑尺寸，预估将所有注解文本以不交叉的方式绘制在所述canvas画布中所占用的第二目标尺寸以及所述所有注解文本在所述canvas画布中的第二目标位置，其中，所述每个图案要素的第一目标位置与对应的所述每条注解文本的第二目标位置相关联，所述第二目标尺寸小于等于所述可编辑尺寸；

基于所述第二目标尺寸、所述每条注解文本在所述canvas画布中的位置和所述第二初始尺寸，确定所述每条注解文本对应的第二目标缩放比例；

将所述设计要素中的注解文本移动至所述canvas画布相应图层中的所述第二目标位置，并基于所述第二目标缩放比例，对所述设计要素中相应的注解文本进行缩放操作，以得到所述第一目标图像。

6.一种基于canvas的图形编辑装置，其特征在于，所述装置包括：

获取单元，用于获取设计要素，所述设计要素包括图案要素及与所述图案要素对应的注解文本；

创建单元，用于在预设的canvas画布上，创建与所述设计要素的数量对应的图层；

设置单元，用于将所有所述设计要素分别设置在所述canvas画布上的相应图层；

调整单元，用于基于预设调整策略，对所述设计要素的尺寸及在所述相应图层的位置进行调整，得到第一目标图像，其中，在所述第一目标图像中，任意两个所述图案要素不交叉，任意两个所述注解文本不交叉。

7.根据权利要求6所述的装置，其特征在于，所述调整单元还用于：

基于接收的第一操作指令，在所述canvas画布中调整所述第一目标图像中第一指定图案要素的渐变色，和/或生成所述第一目标图像中第二指定图案要素的边缘描边，得到更新后的第一目标图像。

8.根据权利要求6或7所述的装置，其特征在于，所述调整单元还用于：

基于接收的第二操作指令，控制所述第一目标图像中所有的注解文本的透明度变更为全透明，得到第二目标图像。

9.根据权利要求8所述的装置，其特征在于，所述装置还包括导出单元，用于：

将所述第一目标图像、所述第二目标图像以指定图像格式导出至指定文件夹。

10.根据权利要求6所述的装置，其特征在于，所述调整单元还用于：

基于所述设计要素中每个图案要素及所述每个图案要素的第一初始尺寸、所述canvas画布对应的可编辑尺寸，预估将所有图案要素以不交叉的方式绘制在所述canvas画布中所占用的第一目标尺寸以及所述所有图案要素在所述canvas画布中的第一目标位置，所述第一目标尺寸小于等于所述可编辑尺寸；

基于所述第一目标尺寸、所述每个图案要素在所述canvas画布中的位置和所述第一初始尺寸，确定所述每个图案要素对应的第一目标缩放比例；

将所述设计要素中的图案要素移动至所述canvas画布相应图层中的所述第一目标位置，并基于所述第一目标缩放比例，对所述设计要素中相应的图案要素进行缩放操作；

基于所述设计要素中每条注解文本及所述每条注解文本的第二初始尺寸、所述canvas画布对应的可编辑尺寸，预估将所有注解文本以不交叉的方式绘制在所述canvas画布中所占用的第二目标尺寸以及所述所有注解文本在所述canvas画布中的第二目标位置，其中，所述每个图案要素的第一目标位置与对应的所述每条注解文本的第二目标位置相关联，所述第二目标尺寸小于等于所述可编辑尺寸；

基于所述第二目标尺寸、所述每条注解文本在所述canvas画布中的位置和所述第二初始尺寸，确定所述每条注解文本对应的第二目标缩放比例；

将所述设计要素中的注解文本移动至所述canvas画布相应图层中的所述第二目标位置，并基于所述第二目标缩放比例，对所述设计要素中相应的注解文本进行缩放操作，以得到所述第一目标图像。