找回密码
 立即注册

QQ登录

只需一步,快速开始

[工具插件] 微信小程序生成图片库,用json绘制一张图片并发到朋友圈

  [复制链接]
查看: 1328|回复: 172
最佳答案
0 

4

主题

5

帖子

110

积分

新人求带

积分
110
微信小程序生成图片库,用json绘制一张图片并发到朋友圈

687474703a2f2f3778713237362e636f6d322e7a302e676c622e71696e697563646e2e636f6d2f70.gif

由于我们无法将小程序直接分享到朋友圈,但分享到朋友圈的需求目前又很多,业界目前的做法是利用小程序的 Canvas 功能生成一张带有二维码的图片,然后引导用户下载图片到本地后再分享到朋友圈。而小程序 Canvas 功能是很难用的,往往为了绘制一张简单图片,就得写上一堆 boilerplate code 。如果此时一个小程序中包含多个绘图的需求,那绝壁要疯。另外 Canvas 上有很多绘图的坑,肯定会让你疯上加疯。

这边说上几个小程序 Canvas 的坑:
  • Canvas 绘图是用的 px,而在小程序中我们一般使用 rpx 进行相对布局。
  • 小程序的 drawCanvas 方法,在 IDE 中可以直接设置网络图片进行绘制,但在真机上设置网络图片无用。
  • canvasContext.clip 方法在 iOS 设备上 微信 6.6.6 版本及以下有 bug,会导致该 clip 下面使用的的 restore 方法失效。

画家计划

想到小程序中有如此大量的生成图片需求,而 Canvas 生成方法又是如此难用和坑爹。那我们就想到可不可以做一款可以很方便生成图片的库,而且还能屏蔽掉直接使用 Canvas 的那些坑呢。所以我们发起了 “画家计划— 通过 json 数据形式,来进行动态渲染并绘制出图片”。 Painter 库的整体架构如下:

687474703a2f2f3778713237362e636f6d322e7a302e676c622e71696e697563646e2e636f6d2f70.png

整体架构

首先,我们定义了一套绘图 JSON 规范,开发者可以根据需求构建生成图片的 Palette(调色板),然后在程序运行过程中把调色板传入给 Painter(画家)。Painter 会调用 Pen(画笔),根据 Palette 内容绘制出对应的图片后返回。

如何使用?

葡京赌场网站下载后,用小程序 IDE 打开后即可使用。

注:请选择小程序项目,非小游戏,例子中无 appid,所以无法在手机上运行,如果需要真机调试,请在打开例子时,填上自己的小程序 id

使用 Painter

1、引入葡京赌场网站

Painter 的核心葡京赌场网站在另一个 repo 中,https://github.com/Kujiale-Mobile/PainterCore.git 。你可以通过以下三种方式进行库的引入:

一,直接下载葡京赌场网站,拷贝葡京赌场网站到你需要的库中。(不推荐)

二,submodule 的方式。可以在主项目下执行以下命令。如后续需更新葡京赌场网站,则到对应目录下 pull 最新的葡京赌场网站即可。(推荐)
  1. git submodule add https://github.com/Kujiale-Mobile/PainterCore.git components/painter
复制葡京赌场网站

三,subtree 的方式。也一样是在主项目中执行命令。葡京赌场网站更新要复杂点,submodule 和 subtree 的区别请自行 Google。

git subtree add --prefix=components/painter https://github.com/Kujiale-Mobile/PainterCore.git master
2、作为自定义组件引入,注意目录为第一步引入的葡京赌场网站所在目录
  1. "usingComponents":{
  2.   "painter":"/components/painter/painter"
  3. }
复制葡京赌场网站

组件接收 palette 字段作为画图数据的数据源, 图案数据以json形式存在,推荐使用“皮肤模板”的方法进行传递,示例葡京赌场网站如下:
  1. <painter palette="{{data}}" bind:imgOK="onImgOK" />
复制葡京赌场网站

数据传入后,则会自动进行绘图。绘图完成后,你可以通过绑定 imgOK 或 onImgErr 事件来获得成功后的图片 或失败的原因。
  1. bind:imgOK="onImgOK"
  2. bind:imgErr="onImgErr"
复制葡京赌场网站

游客,如果您要查看本帖隐藏内容请回复

回复

使用道具 举报

最佳答案
0 

0

主题

91

帖子

887

积分

略知一二

积分
887
发表于 2018-7-9 15:52:30 | 显示全部楼层
值得学习和借鉴
回复 支持 反对

使用道具 举报

最佳答案
0 

1

主题

698

帖子

7133

积分

S1

积分
7133
发表于 2018-7-9 18:14:37 | 显示全部楼层
微信小程序生成图片库,用json绘制一张图片并发到朋友圈
回复 支持 反对

使用道具 举报

最佳答案
0 

2

主题

520

帖子

4790

积分

专家路上

积分
4790
发表于 2018-7-10 09:31:58 | 显示全部楼层
感谢分享
回复

使用道具 举报

最佳答案
1 

3

主题

236

帖子

8115

积分

S1

积分
8115
发表于 2018-7-10 10:13:44 | 显示全部楼层
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

35

帖子

70

积分

等待验证会员

积分
70
发表于 2018-7-10 11:25:18 | 显示全部楼层

顶顶顶顶顶顶顶顶顶顶顶顶顶顶1
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

378

帖子

7556

积分

S1

积分
7556
发表于 2018-7-10 11:25:42 | 显示全部楼层
微信小程序生成图片库,用json绘制一张图片并发到朋友圈
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

115

帖子

1188

积分

专家路上

积分
1188
发表于 2018-7-10 11:30:36 | 显示全部楼层
谢谢分享,看看学习学习
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

331

帖子

3862

积分

黄金VIP

Rank: 3Rank: 3

积分
3862
发表于 2018-7-10 11:58:17 | 显示全部楼层
感觉思路不错
回复 支持 反对

使用道具 举报

最佳答案
0 

4

主题

290

帖子

1444

积分

专家路上

积分
1444
发表于 2018-7-10 14:21:11 | 显示全部楼层
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



www.mainetimberworks.com—微信开发者的分享交流平台,专注微信开发生态。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

微信葡京娱乐网址号

市场合作
[email protected]