前言 生成海报这个需求非常常见，一般用于分享朋友圈，自定义分享到群，开发者为了生成写了很多绘制代码。绘制代码看上去都差不多，有不得不写，很难受。 直到我遇见了它！ Painter：小程序生成图片库，轻松通过 json 方式绘制一张可以发到朋友圈的图片 看效果 [代码]{ background: '#eee', width: '654rpx', height: '400rpx', borderRadius: '20rpx', views: [ { type: 'image', url: 'https://qhyxpicoss.kujiale.com/r/2017/12/04/L3D123I45VHNYULVSAEYCV3P3X6888_3200x2400.jpg@!70q', css: { top: '48rpx', right: '48rpx', width: '192rpx', height: '192rpx', }, } ... ], } [代码] 绘制结果： [图片] 你没看错，就是如此简单，再也不用写绘制代码了！ 功能与优势 功能全，支持文本、图片、矩形、qrcode 类型的 view 绘制 布局全，支持多种布局方式，如 align（对齐方式）、rotate（旋转） 支持圆角，其中图片，矩形，和整个画布支持 borderRadius 来设置圆角 杠杠的性能优化，我们对网络素材图片加载实现了一套 LRU 存储机制，不用重复下载素材图片。 杠杠的容错，因为某些特殊情况会导致 Canvas 绘图不完整。我们对此加入了对结果图片进行检测机制，如果绘图出错会进行重绘。 实现原理 [图片] 开发者可以根据需求构建生成图片的 Palette（调色板），然后在程序运行过程中把调色板传入给 Painter（画家）。Painter 会调用 Pen（画笔），根据 Palette 内容绘制出对应的图片后返回。 看demo [图片] 从demo我们可以看出支持的样式和组件非常丰富，不仅如此还可以进行拖拽位置、对大家进行调整。 [图片] 具体详细使用方法以及json规范可以点击下方地址项目主页查看。 上地址 地址：https://github.com/Kujiale-Mobile/Painter

1、文字跑马灯效果：http://www.wxapp-union.com/portal.php?mod=view&aid=1038 2、触摸水波涟漪效果：http://www.wxapp-union.com/portal.php?mod=view&aid=1350 3、下拉菜单效果：http://www.wxapp-union.com/portal.php?mod=view&aid=1875 4、五星评分效果：http://www.wxapp-union.com/portal.php?mod=view&aid=1876 5、数字累加，动态效果：http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1694 6、星战字幕效果：http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1689 7、动画卡片效果：http://www.wxapp-union.com/forum.php?mod=viewthread&tid=2193 8、列表项左滑删除效果：http://www.wxapp-union.com/forum.php?mod=viewthread&tid=2189 9、图片的滤镜效果：http://www.wxapp-union.com/forum.php?mod=viewthread&tid=3949 10、黑客帝国metrix效果：http://www.wxapp-union.com/forum.php?mod=viewthread&tid=4670 11、CSS3动画效果：http://www.wxapp-union.com/forum.php?mod=viewthread&tid=4628 12、仿直播点赞气泡效果：http://www.wxapp-union.com/forum.php?mod=viewthread&tid=2833 13、文字弹幕效果：http://www.wxapp-union.com/forum.php?mod=viewthread&tid=4713 14、仿UC宣传页面的简单动画效果：http://www.wxapp-union.com/forum.php?mod=viewthread&tid=4266 15、发短信验证码倒计时：http://www.wxapp-union.com/portal.php?mod=view&aid=1671 16、弹出菜单特效：http://www.wxapp-union.com/portal.php?mod=view&aid=1659 17、滚动动画：http://www.wxapp-union.com/portal.php?mod=view&aid=1538 18、实时圆形进度条：http://www.wxapp-union.com/portal.php?mod=view&aid=1456 19、遮罩层：http://www.wxapp-union.com/forum.php?mod=viewthread&tid=3617 20、仿Table效果：http://www.wxapp-union.com/portal.php?mod=view&aid=1038 21、操作按钮悬浮固定在底部：http://www.wxapp-union.com/portal.php?mod=view&aid=1029 22、支付倒计时效果：http://www.wxapp-union.com/portal.php?mod=view&aid=890 23、文字单行背景自适应带角标：http://www.wxapp-union.com/portal.php?mod=view&aid=636 24、侧边栏滑动特效；http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1202 25、顶部导航效果：http://www.wxapp-union.com/portal.php?mod=view&aid=1665 26、弹出和隐藏动画：http://www.wxapp-union.com/portal.php?mod=view&aid=1449 27、切换动画：http://www.wxapp-union.com/portal.php?mod=view&aid=1113