zan-poster
Version:
通过json在canvas上绘制图像, 基于cax画图框架开发, 本画图组件是json2canvas库的改造、优化版本 (详情查看README.md文档末说明)。
391 lines (390 loc) • 9.02 kB
JavaScript
window.paintingData = [
{
width: 750,
height: 1624,
scale: 1,
fillStyle: '#fff',
// fonts: [
// {
// family: "AvenirNext-Bold",
// source: "https://img.niwotech.com/fonts/AvenirNext-Bold.ttf"
// }
// ],
children: [
{
id: 'goods',
type: 'image',
url:
// 'https://v.jubaozan.cn/9599/2023/material/image/45f39c1d5366483c8902808b924340bb.png',
'http://localhost:3333/assets/e2b3bb7f1163457d9b9460e27f7c9151.png',
width: 750,
height: 'auto',
maxHeight: 1442,
isCenter: true,
r: 50,
lb: false,
rb: false,
rt: false,
x: 0,
y: 0,
},
{
type: 'container',
x: 20,
y: 1402,
fillStyle: 'orange',
paddingTop: 10,
paddingBottom: 10,
r: 10,
children: [
{
type: 'group',
x: 20,
y: 10,
height: 50,
width: 600 / 2,
children: [{
id: 'week',
type: 'text',
text: 'Thursday 星期四11111',
font: '40px Arial',
color: '#1F1F1F',
textAlign: 'left',
x: 0,
y: 0,
}],
},
{
type: 'group',
x: 20,
y: 10,
height: 50,
width: 600 / 2,
children: [{
id: 'week',
type: 'text',
text: 'Thursday 星期五',
font: '40px Arial',
color: '#1F1F1F',
textAlign: 'left',
x: 0,
y: 0,
}],
},
{
type: 'group',
x: 20,
y: 10,
height: 50,
children: [{
id: 'week',
type: 'text',
text: 'Thursday 星期六',
font: '40px Arial',
color: '#1F1F1F',
textAlign: 'left',
x: 0,
y: 0,
}],
},
{
type: 'group',
x: 20,
y: 10,
height: 50,
width: 600 / 2,
children: [{
id: 'week',
type: 'text',
text: 'Thursday 星期天',
font: '40px Arial',
color: '#1F1F1F',
textAlign: 'left',
x: 0,
y: 0,
}],
},
{
type: 'group',
x: 20,
y: 10,
height: 50,
width: 600 / 2,
children: [{
id: 'week',
type: 'text',
text: 'Thursday 星期天888',
font: '40px Arial',
color: '#1F1F1F',
textAlign: 'left',
x: 0,
y: 0,
}],
},
],
},
{
id: 'week',
type: 'text',
text: 'Thursday 星期四',
font: '40px Arial',
color: '#1F1F1F',
textAlign: 'left',
x: 50,
y: 1492,
},
{
type: 'group',
x: 50,
y: 1550,
width: 650,
display: 'row',
align: 'left',
children: [
{
id: 'date',
type: 'text',
text: '2023-12-12',
font: '22px AvenirNext-Bold',
color: '#1F1F1F',
textAlign: 'left',
x: 0,
y: 0,
},
{
id: 'avatar',
type: 'image',
url:
'http://localhost:3333/assets/b4c787285aef4056bd0dc82590255bd1.png',
isCircular: true,
width: 32,
height: 32,
x: 10,
y: -7,
},
{
id: 'nickname',
type: 'text',
text: '天王盖地虎, 已连签2天',
font: '22px Arial',
color: '#1F1F1F',
textAlign: 'left',
x: 10,
y: 0,
},
],
},
{
type: 'circle',
r: 98,
fillStyle: '#fff',
x: 517,
y: 1426,
},
{
id: 'qrcode',
type: 'image',
url:
'http://localhost:3333/assets/d4-1b83-4692-8473-56a68485a4a1.png',
width: 150,
height: 150,
x: 540,
y: 1450,
},
],
},
{
width: 750,
height: 1624,
scale: 1,
fillStyle: '#fff',
// fonts: [
// {
// family: "AvenirNext-Bold",
// source: "https://img.niwotech.com/fonts/AvenirNext-Bold.ttf"
// }
// ],
children: [
{
id: 'goods',
type: 'image',
url:
// 'https://v.jubaozan.cn/9599/2023/material/image/45f39c1d5366483c8902808b924340bb.png',
'http://localhost:3333/assets/e2b3bb7f1163457d9b9460e27f7c9151.png',
width: 750,
height: 'auto',
maxHeight: 1442,
isCenter: true,
r: 50,
lb: false,
rb: false,
rt: false,
x: 0,
y: 0,
},
{
type: 'container',
x: 20,
y: 1402,
fillStyle: 'orange',
paddingTop: 10,
paddingBottom: 10,
r: 10,
children: [
{
type: 'group',
x: 20,
y: 10,
height: 50,
width: 600 / 2,
children: [{
id: 'week',
type: 'text',
text: 'Thursday 星期四',
font: '40px Arial',
color: '#1F1F1F',
textAlign: 'left',
x: 0,
y: 0,
}],
},
{
type: 'group',
x: 20,
y: 10,
height: 50,
width: 600 / 2,
children: [{
id: 'week',
type: 'text',
text: 'Thursday 星期五',
font: '40px Arial',
color: '#1F1F1F',
textAlign: 'left',
x: 0,
y: 0,
}],
},
{
type: 'group',
x: 20,
y: 10,
height: 50,
children: [{
id: 'week',
type: 'text',
text: 'Thursday 星期六',
font: '40px Arial',
color: '#1F1F1F',
textAlign: 'left',
x: 0,
y: 0,
}],
},
{
type: 'group',
x: 20,
y: 10,
height: 50,
width: 600 / 2,
children: [{
id: 'week',
type: 'text',
text: 'Thursday 星期天',
font: '40px Arial',
color: '#1F1F1F',
textAlign: 'left',
x: 0,
y: 0,
}],
},
{
type: 'group',
x: 20,
y: 10,
height: 50,
width: 600 / 2,
children: [{
id: 'week',
type: 'text',
text: 'Thursday 星期天888',
font: '40px Arial',
color: '#1F1F1F',
textAlign: 'left',
x: 0,
y: 0,
}],
},
],
},
{
id: 'week',
type: 'text',
text: 'Thursday 星期四',
font: '40px Arial',
color: '#1F1F1F',
textAlign: 'left',
x: 50,
y: 1492,
},
{
type: 'group',
x: 50,
y: 1550,
width: 650,
display: 'row',
align: 'left',
children: [
{
id: 'date',
type: 'text',
text: '2023-12-12',
font: '22px AvenirNext-Bold',
color: '#1F1F1F',
textAlign: 'left',
x: 0,
y: 0,
},
{
id: 'avatar',
type: 'image',
url:
'http://localhost:3333/assets/b4c787285aef4056bd0dc82590255bd1.png',
isCircular: true,
width: 32,
height: 32,
x: 10,
y: -7,
},
{
id: 'nickname',
type: 'text',
text: '天王盖地虎, 已连签2天',
font: '22px Arial',
color: '#1F1F1F',
textAlign: 'left',
x: 10,
y: 0,
},
],
},
{
type: 'circle',
r: 98,
fillStyle: '#fff',
x: 517,
y: 1426,
},
{
id: 'qrcode',
type: 'image',
url:
'http://localhost:3333/assets/d4-1b83-4692-8473-56a68485a4a1.png',
width: 150,
height: 150,
x: 540,
y: 1450,
},
],
},
]