要求。在项目中写了几个canvas生成共享海报页后,感觉这是一个重复、多余的工作。于是想有没有一个库可以直接通过类似的json生成海报。然后在github上找了两个项目:wxa-plugin-canvas,配置文件的写法我不是很喜欢。之前对mp_canvas_drawer不是很了解,使用方式比较直观,可惜功能有点少。然后就想能不能自己造个轮子。于是就有了json2canvas这个项目,你可以简单理解为mp_canvas_drawer的增强版。json2canvas画布画海报,写json就可以了。项目的canvas绘图基于cax。所以自然而然的带来了一个好处,json2canvas同时支持小程序和web函数,支持缩放。如果设计稿是750,而画布只有375,不需要任何转换,直接设置比例为0.5即可。支持文字(长文字自动换行,感谢coolzjy@v2exhttps://regexr.com/4f12l提供的正则优化了换行的计算方式(不暴力断字))支持图片(圆角)支持圆形,矩形,矩形圆角支持分组(cax是一个非常有用的功能)同时支持小程序和网页示例。web-demo界面左侧的json可以编辑直接看效果~applet-demogitclonehttps://github.com/willnewii/json2canvas.git微信开发者工具导入项目example/weapp/小程序安装npmijson2canvas微信开发者工具->工具->在需要使用的界面上构建npmImportComponent{"usingComponents":{"json2canvas":"/miniprogram_npm/json2canvas/index"}}我想生成这样的海报,我应该怎么办?(红框为图片元素,蓝框为文字元素,其余为背景图。)可以用一个json来完成。具体支持的元素和参数请查看项目readme{"width":750,"height":1334,"scale":0.5,"children":[{"type":"image","url":"http://res.mayday5.me/wxapp/wxavatar/tmp/bg_concerts_1.jpg","width":750,"height":1334},{"type":"image","url":"http://res.mayday5.me/wxapp/wxavatar/tmp/wxapp_code.jpg","width":100,"x":48,"y":44,"isCircular":true,},{"type":"circle","r":50,"lineWidth":5,"strokeStyle":"#CCCCCC","x":48,"y":44,},{"type":"text","text":"Lyrics","font":"30pxArial","color":"#FFFFFF","x":168,"y":75,"shadow":{"color":"#000","offsetX":2,"offsetY":2,"blur":2}},{"type":"image","url":"http://res.mayday5.me/wxapp/wxavatar/tmp/medal_concerts_1.png","width":300,"x":"center","y":361},{"type":"text","text":"一生一个五月天","font":"38pxArial","color":"#FFFFFF","x":"center","y":838,"shadow":{"color":"#000","offsetX":2,"offsetY":2,"blur":2}},{"type":"text","text":"北京6场,郑州2场,登机,围棋上班了,你有没有听到你想听的歌?","font":"24pxArial","color":"#FFFFFF","x":"center","y":888,"shadow":{"color":"#000","offsetX":2,"offsetY":2,"blur":2}},{"type":"rect","宽度”:750,“高度”:193,“fillStyle”:“#FFFFFF”,“x”:0,“y”:“底部”},{“类型”:“图像”,“url”:“http://res.mayday5.me/wxapp/wxavatar/tmp/wxapp_code.jpg","width":117,"height":117,"x":47,"y":1180},{"type":"text","text":"长按识别小程序二维码","font":"26pxArial","color":"#858687","x":192,"y":1202},{"type":"text","text":"五月天不晚","font":"18px咏叹调l","color":"#A4A5A6","x":192,"y":1249}]}有问题直接提交issue
