支持文本、图片、矩形、qrcode 类型的 view 绘制。
如何使用
1.引入代码。注意:存放目录 uni-app根据不同平台插件存放目录不同。
git clone https://github.com/Kujiale-Mobile/Painter.git
2.作为自定义组件引入,注意目录为第一步引入的代码所在目录
"style": {
"navigationBarTitleText": "目录名",
"usingComponents":{
"painter":"/components/painter/painter"
//"painter":"/wxcomponents/painter/painter"//存放在uni-app指定目录
}
}
3.使用,组件接收 palette
字段作为画图数据的数据源, 图案数据以json形式存在
<painter palette="{{data}}" bind:imgOK="onImgOK" />
可以通过设置 widthPixels 来强制指定生成的图片的像素宽度,否则,会根据你画布中设置的大小来动态调节,比如你用了 rpx,则在 iphone 6 上会生成 0.5 倍像素的图片。由于 canvas 绘制的图片像素直接由 Canvas 本身大小决定,此处通过同比例放大整个画布来实现对最后生成的图片大小的调节。Painter
内部生成图片时,调用的是微信的 canvasToTempFilePath
API。
<painter customStyle='position: absolute; left: -9999rpx;' palette="{{template}}" bind:imgOK="onImgOK" widthPixels="1000"/>
json数据官方提供了海报在线生成工具
在线地址为 https://lingxiaoyi.github.io/painter-custom-poster/
只要在工具中生成海报,复制生成的json数据进行使用。
4.绑定imgOk事件
数据传入后,则会自动进行绘图。绘图完成后,你可以通过绑定 imgOK 或 imgErr 事件来获得成功后的图片 或失败的原因。
bind:imgOK="onImgOK"//@imgOk="onImgOK"
bind:imgErr="onImgErr"
onImgOK(e) {
其中 e.detail.path 为生成的图片路径
},