1. 在git网站上下载代码 将components文件夹下的painter复制到小程序 新建component 文件夹下
2. 在需要生成图片的页面json文件里引用
"usingComponents": {
"painter":"../../components/painter/painter"
}
3. 在wxml中建画布
<painter customStyle='position: absolute; left: -9999rpx;' palette="{{template}}" bind:imgOK="canvasSuc" />
4. 在js种写样式和dom
getDraw() {
this.setData({
template: {
background: '#fff',
borderRadius: '12px',
width: this.data.width + 'px',
height: this.data.height + 'px',
views: [{
type: 'text',
text: this.data.startName,
css: {
top: '50px',
left: '50px',
fontSize: '32px',
fontWeight: 'bold',
color: "#2B3245",
display: "block",
width: "247px",
overflow: "hidden",
whiteSpace: "nowrap",
textOverflow:"ellipsis",
maxLines: 1
},
},
{
type: 'image',
url: "https://test-static-public-log56-com.oss-cn-hangzhou.aliyuncs.com/Tco_static/img/dz_luxian_jiantou.png",
css: {
top: '45px',
left: '296px',
width: '46px',
height: '46px',
mode: "aspectFill"
},
},
{
type: 'text',
text: this.data.endName,
css: {
top: '50px',
right: '50px',
fontSize: '32px',
fontWeight: 'bold',
color: "#2B3245",
display: "block",
width: "247px",
overflow: "hidden",
whiteSpace: "nowrap",
textOverflow:"ellipsis",
maxLines: 1,
},
},
{
type: 'rect',
css: {
top: '116px',
left: '50px',
width: "540px",
height: "144px",
color: "linear-gradient(221deg, #1F70FE 0%, #5CC1FD 100%)",
borderRadius: "16px"
},
},
{
type: 'text',
text: '货物信息：' + this.data.endName,
css: {
top: '138px',
left: '68px',
fontSize: '28px',
color: "#fff",
display: "block",
width: "500px",
overflow: "hidden",
whiteSpace: "nowrap",
textOverflow:"ellipsis",
maxLines: 1,
},
},
{
type: 'text',
text: '车队名称：' + this.data.endName,
css: {
top: '182px',
left: '68px',
fontSize: '28px',
color: "#fff",
width: "500px",
display: "block",
overflow: "hidden",
whiteSpace: "nowrap",
textOverflow:"ellipsis",
maxLines: 1,
},
},
{
type: 'rect',
css: {
top: '240px',
left: '50px',
width: "540px",
height: "372px",
background: "#F4F5F8",
borderRadius: "6px",
borderRadius: '10px',
color: '#F4F5F8',
},
},
{
type: 'image',
url: "https://test-static-public-log56-com.oss-cn-hangzhou.aliyuncs.com/Tco_static/img/gh_8ba8ddec9d29_860.jpg",
css: {
top: '286px',
left: '182px',
width: '276px',
height: '276px'
},
},
{
type: 'text',
text: '长按识别或分享',
css: {
bottom: '50px',
left: '300px',
fontSize: '24px',
color: "#333",
align: 'center',
maxLines: 1,//限制行数
},
},
],
}
})
},
// 生成成功
canvasSuc(e) {
console.log(e)
wx.hideLoading()
this.setData({
image: e.detail.path
})
},
5.data内用到的动态数据
data: {
template: {},
images: "",
width: 640,
height: 720,
startName: '我是测试哈哈哈测试测试嗷嗷嗷水水水水水水水水水水吖',
endName: '煤矿煤矿裴总的矿矿酷酷酷酷酷酷酷酷酷酷酷酷酷酷酷',
show: false,
goodsInfo: '煤炭矿产-石灰石',
carTeamName: '小梦测试',
},
