Painter由于我们无法将小程序直接分享到朋友圈,但分享到朋友圈的需求目前又很多,业界目前的做法是利用小程序的 Canvas 功能生成一张带有二维码的图片,然后引导用户下载图片到本地后再分享到朋友圈。而小程序 Canvas 功能是很难用的,往往为了绘制一张简单图片,就得写上一堆 boilerplate code 。如果此时一个小程序中包含多个绘图的需求,那绝壁要疯。另外 Canvas 上有很多绘图的坑,肯定会让你疯上加疯。 这边说上几个小程序 Canvas 的坑: 1, Canvas 绘图是用的 px,而在小程序中我们一般使用 rpx 进行相对布局。 2,小程序的 drawCanvas 方法,在 IDE 中可以直接设置网络图片进行绘制,但在真机上设置网络图片无用。 3,canvasContext.clip 方法在 iOS 设备上 微信 6.6.6 版本及以下有 bug,会导致该 clip 下面使用的的 restore 方法失效。 画家计划想到小程序中有如此大量的生成图片需求,而 Canvas 生成方法又是如此难用和坑爹。那我们就想到可不可以做一款可以很方便生成图片的库,而且还能屏蔽掉直接使用 Canvas 的那些坑呢。所以我们发起了 “画家计划— 通过 json 数据形式,来进行动态渲染并绘制出图片”。 Painter 库的整体架构如下: 首先,我们定义了一套绘图 JSON 规范,开发者可以根据需求构建生成图片的 Palette(调色板),然后在程序运行过程中把调色板传入给 Painter(画家)。Painter 会调用 Pen(画笔),根据 Palette 内容绘制出对应的图片后返回。 How To Use运行例子因该项目为 submodule 管理方式。首次 clone 代码时,需加上
代码下载后,用小程序 IDE 打开后即可使用。 使用 Painter
Palette 规范如你使用 wxss + wxml 规范进行绘制一样,Painter 需要根据一定的规范来进行图片绘制。当然 Painter 的绘制规范要比 wxml 简单很多。 调色板属性一个调色板首先需要给予一些整体属性
子 View 属性当我们把整体的调色板属性构建起来后,里面就可以添加子 View 来进行绘制了。
布局属性以上 View ,除去自己拥有的特别属性外,还有以下的通用布局属性
尺寸即其他1,目前 Painter 中支持两种尺寸单位,px 和 rpx,代表的意思和小程序中一致,此处就不多说。 2,目前子 view 的 css 属性支持 object 或 array。所以意味着,你可以把几个子 view 共用的 css 属性提取出来。做到让 Palette 更加简洁。 3,因为我们的 palette 是以 js 承载的 json,所以意味着你可以在每一个属性中很方便的加上自己的逻辑。也可以把某些属性单独提取出来,让多个 palette 共用,做到模块化。 绘制效果如下 License |
温馨提示:这篇文章没有解决您的问题?欢迎添加微信:18948083295,有微信小程序专业人员,保证有问必答。转载本站文章请注明转自http://www.okeydown.com/(微信小程序网)。
- 微信扫描二维码关注官方微信
- ▲长按图片识别二维码