一种绘制像素画的方法及装置制造方法及图纸

技术编号:35649252 阅读:15 留言:0更新日期:2022-11-19 16:43
本发明专利技术是关于绘制像素画的方法及装置。该方法包括:响应于用户绘制像素画的请求,获取像素画的画布数据;根据所述画布数据渲染画布,包括:根据所述画布数据生成一张图片精灵作为画布的第一层;绘制作为像素画格子的线条作为画布的第二层;绘制透明画布作为画布的第三层;响应于用户在所述画布中的绘制操作,对所述画布的第三层进行重新渲染以显示绘制操作后的像素画;响应于用户在所述画布中的几何变换操作,对所述画布的第一层的图片精灵进行对应的几何变换处理,对所述画布的第二层和第三层进行重新渲染,以显示几何变换操作后的像素画。本发明专利技术通过采用画布分层策略,将需要重新渲染及不需要重新渲染的分离出来,尽可能避免重复渲染。免重复渲染。免重复渲染。

【技术实现步骤摘要】
一种绘制像素画的方法及装置


[0001]本专利技术涉及数字图像领域,尤其涉及绘制像素画的方法及装置。

技术介绍

[0002]目前,像素画越来越受到人们的欢迎。在像素画中,像素颗粒是以肉眼可见的明显大小(即一格一格的)呈现在画布上的。用户可以在线绘制像素画。绘制像素画时,通常是在一个canvas画布上绘制10000个格子,用户在画布上每进行一次操作,例如拖拽、缩放或者上色时,画布都会进行重新渲染,以更新显示用户操作后的像素画。
[0003]然而,在画布格子数较大的场景下,如一幅像素画中有1000*1000格子时,由于画布上需要渲染的点太多,若处理性能较差,则会造成用户在画布上的操作变得卡顿严重。如何提供一种更好的绘制像素画的方法,是目前亟待解决的问题。

技术实现思路

[0004]为克服相关技术中存在的问题,本专利技术的实施例提供一种绘制像素画的方法及装置。技术方案如下:
[0005]根据本专利技术的实施例的第一方面,提供一种绘制像素画的方法,包括:
[0006]响应于用户绘制像素画的请求,获取像素画的画布数据;
[0007]根据所述画布数据渲染画布,包括:根据所述画布数据生成一张图片精灵作为画布的第一层;绘制作为像素画格子的线条作为画布的第二层;绘制透明画布作为画布的第三层;
[0008]响应于用户在所述画布中的绘制操作,对所述画布的第三层进行重新渲染以显示绘制操作后的像素画;
[0009]响应于用户在所述画布中的几何变换操作,对所述画布的第一层的图片精灵进行对应的几何变换处理,对所述画布的第二层和第三层进行重新渲染,以显示几何变换操作后的像素画。
[0010]可选的,所述画布数据包括底纹图数据和历史绘制数据;
[0011]所述获取像素画的画布数据,包括:
[0012]向服务器发送获取像素画的画布数据的指令;
[0013]接收服务器返回的所述像素画的底纹图图片链接和历史绘制数据;
[0014]根据所述图片链接获取底纹图图片;
[0015]将底纹图图片放入画布,获取画布的像素数据作为底纹图数据。
[0016]可选的,所述方法还包括:
[0017]实时获取所述像素画的他人绘制数据;
[0018]根据他人绘制数据重新渲染所述画布的第三层。
[0019]可选的,所述实时获取所述像素画的他人绘制数据,包括:
[0020]与服务器建立长连接,所述服务器存储有其他用户上传的对于所述像素画的他人
绘制数据;
[0021]实时接收服务器通过所述长连接发送的他人绘制数据。
[0022]可选的,所述方法还包括:
[0023]所述实时获取所述像素画的他人绘制数据,包括:
[0024]与服务器建立长连接,所述服务器存储有其他用户上传的对于所述像素画的他人绘制数据;
[0025]实时接收服务器通过所述长连接发送的他人绘制数据。
[0026]可选的,所述方法还包括:
[0027]响应于用户在画布中的绘制操作,生成绘制数据;
[0028]将所述绘制数据发送至服务器,以使服务器将所述绘制数据与所述像素画对应存储。
[0029]根据本专利技术的实施例的第二方面,提供一种绘制像素画的装置,包括:
[0030]第一获取模块,用于响应于用户绘制像素画的请求,获取像素画的画布数据;
[0031]渲染模块,用于根据所述画布数据渲染画布,包括:根据所述画布数据生成一张图片精灵作为画布的第一层;绘制作为像素画格子的线条作为画布的第二层;绘制透明画布作为画布的第三层;
[0032]第一处理模块,用于响应于用户在画布中的绘制操作,对所述画布的第三层进行重新渲染以显示绘制操作后的像素画;
[0033]第二处理模块,用于响应于用户在画布中的几何变换操作,对所述画布的第一层的图片精灵进行对应的几何变换处理,对所述画布的第二层和第三层进行重新渲染,以显示几何变换操作后的像素画。
[0034]可选的,所述画布数据包括底纹图数据和历史绘制数据;所述第一获取模块用于:
[0035]向服务器发送获取画布数据的指令;
[0036]接收服务器返回的底纹图图片链接和历史绘制数据;
[0037]根据所述图片链接获取底纹图图片;
[0038]将底纹图图片放入画布,获取画布的像素数据作为底纹图数据。
[0039]可选的,所述装置还包括:
[0040]第二获取模块,用于实时获取所述像素画的他人绘制数据;
[0041]第三处理模块,用于根据他人绘制数据重新渲染所述画布的第三层。
[0042]可选的,所述第二获取模块用于:
[0043]与服务器建立长连接,所述服务器存储有其他用户上传的对于所述像素画的他人绘制数据;
[0044]实时接收服务器通过所述长连接发送的他人绘制数据。
[0045]可选的,所述装置还包括:
[0046]生成模块,用于响应于用户在画布中的绘制操作,生成绘制数据;
[0047]发送模块,用于将所述绘制数据发送至服务器,以使服务器将所述绘制数据与所述像素画对应存储。
[0048]根据本专利技术的实施例的第三方面,提供一种绘制像素画的装置,包括:
[0049]处理器;
[0050]用于存储处理器可执行指令的存储器;
[0051]其中,处理器被配置为:
[0052]响应于用户绘制像素画的请求,获取像素画的画布数据;
[0053]根据所述画布数据渲染画布,包括:根据所述画布数据生成一张图片精灵作为画布的第一层;绘制作为像素画格子的线条作为画布的第二层;绘制透明画布作为画布的第三层;
[0054]响应于用户在画布中的绘制操作,对所述画布的第三层进行重新渲染以显示绘制操作后的像素画;
[0055]响应于用户在画布中的几何变换操作,对所述画布的第一层的图片精灵进行对应的几何变换处理,对所述画布的第二层和第三层进行重新渲染,以显示几何变换操作后的像素画。
[0056]根据本专利技术的实施例的第四方面,提供一种计算机可读存储介质,其上存储有计算机指令,其特征在于,该指令被处理器执行时实现本专利技术的实施例的第一方面中任一项方法的步骤。
[0057]本专利技术的实施例提供的技术方案,通过采用画布分层的策略,将需要重新渲染及不需要重新渲染的分离出来,极大的减少了画布操作过程中渲染的点,尽可能避免重复渲染,特别是针对画布格子数较大、多人同作画的场景,性能提升明显。
[0058]应当理解的是,以上的一般描述和后文的细节描述仅是示例性和解释性的,并不能限制本专利技术。
附图说明
[0059]此处的附图被并入说明书中并构成本说明书的一部分,示出了符合本专利技术的实施例,并与说明书一起用于解释本专利技术的原理。
[0060]图1是根据一示例性实施例示出的绘制像素画的方法的流程图;
[0061]图2是根据一本文档来自技高网
...

【技术保护点】

【技术特征摘要】
1.一种绘制像素画的方法,其特征在于,包括:响应于用户绘制像素画的请求,获取像素画的画布数据;根据所述画布数据渲染画布,包括:根据所述画布数据生成一张图片精灵作为画布的第一层;绘制作为像素画格子的线条作为画布的第二层;绘制透明画布作为画布的第三层;响应于用户在所述画布中的绘制操作,对所述画布的第三层进行重新渲染以显示绘制操作后的像素画;响应于用户在所述画布中的几何变换操作,对所述画布的第一层的图片精灵进行对应的几何变换处理,对所述画布的第二层和第三层进行重新渲染,以显示几何变换操作后的像素画。2.根据权利要求1所述的方法,其特征在于,所述画布数据包括底纹图数据和历史绘制数据;所述获取像素画的画布数据,包括:向服务器发送获取像素画的画布数据的指令;接收服务器返回的所述像素画的底纹图图片链接和历史绘制数据;根据所述图片链接获取底纹图图片;将底纹图图片放入画布,获取画布的像素数据作为底纹图数据。3.根据权利要求1所述的方法,其特征在于,所述方法还包括:实时获取所述像素画的他人绘制数据;根据他人绘制数据重新渲染所述画布的第三层。4.根据权利要求3所述的方法,其特征在于,所述实时获取所述像素画的他人绘制数据,包括:与服务器建立长连接,所述服务器存储有其他用户上传的对于所述像素画的他人绘制数据;实时接收服务器通过所述长连接发送的他人绘制数据。5.根据权利要求1所述的方法,其特征在于,所述方法还包括:响应于用户在画布中的绘制操作,生成绘制数据;将所述绘制数据发送至服务器,以使服务器将所述绘制数据与所述像素画对应存储。6.一种绘制像素画的装置,其特征在于,包括:第一获取模块,用于响应于用户绘制像素画的请求,获取像素画的画布数据;渲染模块,用于根据所述画布数据渲染画布,包括:根据所述画布数据生成一张图片精灵作为画布的第一层;绘制作为像素画格子的线条作为画布的第二层;绘制透明画布作为画布的第三层;第一处理模块,用于响应于用户在画布中的绘制操作,对所述画布的第三层进行重新渲染以显示绘制操作后的像素画;第二处理模块,用于响应...

【专利技术属性】
技术研发人员:任娜娜项立衡
申请(专利权)人:无线生活杭州信息科技有限公司
类型:发明
国别省市:

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1