wxml2canvas
Version:
将wxml指定节点转换成canvas元素
411 lines (383 loc) • 11.4 kB
JavaScript
import Wxml2Canvas from '../../src/index';
Page({
data: {
},
onLoad (res) {
this.drawImage1();
this.drawImage2();
this.drawImage3();
this.drawImage4();
this.drawImage5();
this.drawImage6();
this.drawImage7();
this.drawImage8();
},
drawImage1 () {
this.drawImage1 = new Wxml2Canvas({
width: 340,
height: 210,
element: 'canvas1',
gradientBackground: {
color: ['#27326b', '#540821'],
line: [0, 0, 0, 210]
},
finish(url) {
},
error (res) {
}
});
},
drawImage2 () {
this.drawImage2 = new Wxml2Canvas({
width: 340,
height: 210,
element: 'canvas2',
background: '#f0f0f0',
finish(url) {
},
error (res) {
}
});
let data2 = {
list: [{
type: 'rect',
x: 10,
y: 10,
style: {
width: 150,
height: 80,
fill: {
color: ['#27326b', '#540821'],
line: [0, 0, 0, 110]
},
border: '10px solid #aaaaaa',
}
},{
type: 'rect',
x: 170,
y: 100,
style: {
width: 150,
height: 80,
fill: '#3762ab',
border: '10px dashed #540821',
boxShadow: '10 20 20 rgba(0, 0, 0, 0.4)',
// dash: [10, 20, 10]
}
}]
}
this.drawImage2.draw(data2);
},
drawImage3 () {
this.drawImage3 = new Wxml2Canvas({
width: 340,
height: 210,
element: 'canvas3',
background: '#f0f0f0',
finish(url) {
},
error (res) {
}
});
let text = '一行很长很长很长很长很长很长很长很长很长很长的文字';
let data3 = {
list: [{
type: 'text',
text,
x: 0,
y: 0,
style: {
textAlign: 'left',
width: 130,
height: 80,
fontSize: 14,
lineHeight: 16,
fontWeight: 'bold',
boxShadow: '5 5 20 rgba(255, 0, 0, 0.5)',
}
}, {
type: 'text',
text,
x: 170,
y: 0,
style: {
textAlign: 'center',
width: 130,
fontSize: 14,
lineHeight: 16,
color: '#888888',
}
}, {
type: 'text',
text,
x: 0,
y: 70,
style: {
textAlign: 'right',
width: 130,
fontSize: 14,
lineHeight: 16,
fontFamily: 'Serif'
}
}, {
type: 'text',
text,
x: 170,
y: 70,
style: {
textAlign: 'center',
width: 130,
lineClamp: 2,
fontSize: 14,
lineHeight: 16,
}
}, {
type: 'text',
text,
x: 0,
y: 140,
style: {
textAlign: 'left',
width: 130,
fontSize: 14,
lineHeight: 16,
height: 60,
background: 'rgba(0, 111, 255, 0.5)',
color: '#ffffff'
}
}, {
type: 'text',
text,
x: 170,
y: 140,
style: {
textAlign: 'left',
width: 130,
background: 'rgba(255, 0, 0, 0.3)',
fontSize: 14,
lineHeight: 16,
height: 60,
border: '2px solid #000000',
padding: '5 10 0 10'
}
}]
}
this.drawImage3.draw(data3);
},
drawImage4 () {
this.drawImage4 = new Wxml2Canvas({
width: 340,
height: 210,
element: 'canvas4',
background: '#f0f0f0',
finish(url) {
},
error (res) {
}
});
let data4 = {
list: [{
type: 'circle',
x: 30,
y: 30,
style: {
r: 40,
fill: {
color: ['#27326b', '#540821'],
line: [0, 0, 0, 110]
},
border: '10px solid #aaaaaa',
boxShadow: '10 10 20 rgba(0, 0, 0, 0.6)',
}
},{
type: 'circle',
x: 200,
y: 100,
style: {
r: 40,
fill: '#3762ab',
border: '10px dashed #540821',
// dash: [10, 20, 10]
}
}]
}
this.drawImage4.draw(data4);
},
drawImage5 () {
this.drawImage5 = new Wxml2Canvas({
width: 340,
height: 210,
element: 'canvas5',
background: '#f0f0f0',
finish(url) {
},
error (res) {
}
});
let data5 = {
list: [{
type: 'line',
x: 30,
y: 30,
x2: 200,
y2: 30,
style: {
width: 10,
// stroke: '#3762ab',
stroke: {
color: ['#27326b', '#540821'],
line: [0, 0, 200, 10]
},
}
},{
type: 'line',
x: 30,
y: 100,
x2: 200,
y2: 100,
style: {
r: 40,
width: 10,
stroke: '#3762ab',
dash: [10, 10, 0],
boxShadow: '20 20 20 rgba(0, 0, 0, 0.3)',
}
}]
}
this.drawImage5.draw(data5);
},
drawImage6 () {
this.drawImage6 = new Wxml2Canvas({
width: 340,
height: 210,
element: 'canvas6',
background: '#f0f0f0',
finish(url) {
},
error (res) {
}
});
let data6 = {
list: [{
type: 'image',
x: 10,
y: 10,
url: 'https://mmocgame.qpic.cn/wechatgame/duc2TvpEgSQCEa0WicosqlEgJiacYLaTLEDFB8Kq9Hr7LjAVhM8wu8TT77KqNezQnH/0',
style: {
width: 150,
height: 80,
border: '10px solid #aaaaaa',
boxShadow: '10 20 20 rgba(0, 0, 0, 0.4)',
}
},{
type: 'image',
x: 170,
y: 100,
url: './img/demo.png',
style: {
width: 150,
height: 80,
border: '10px dashed #540821',
// dash: [10, 20, 10]
}
}]
}
this.drawImage6.draw(data6);
},
drawImage7 () {
this.drawImage7 = new Wxml2Canvas({
width: 340,
height: 210,
element: 'canvas7',
background: '#f0f0f0',
finish(url) {
},
error (res) {
}
});
let data7 = {
list: [{
type: 'radius-image',
x: 10,
y: 10,
url: './img/demo.png',
style: {
r: 40,
border: '10px solid #aaaaaa',
boxShadow: '10 10 20 rgba(0, 0, 0, 0.6)',
}
},{
type: 'radius-image',
x: 170,
y: 100,
url: './img/demo.png',
style: {
r: 40,
border: '10px dashed #540821',
// dash: [10, 20, 10]
}
}]
}
this.drawImage7.draw(data7);
},
drawImage8 () {
this.drawImage8 = new Wxml2Canvas({
width: 340,
height: 400,
element: 'canvas8',
background: '#f0f0f0',
finish(url) {
},
error (res) {
}
});
let style = {
text: {
textAlign: 'left',
width: 320,
fontSize: 16,
lineHeight: 25,
}
}
let text = [
'Wxml2Cavnas库，是一个生成小程序分享图的通用方案，提供了两种绘制方式：',
'封装基础图形的绘制接口，包括矩形、圆形、线条、图片、圆角图片、纯文本等，使用时只需要声明元素类型并提供关键数据即可，不需要再关注canvas的具体绘制过程；',
'wxml直接转换成canvas元素，使用时传入待绘制的wxml节点的class类名，并且声明绘制此节点的类型（图片、文字等），会自动读取此节点的computedStyle，利用这些数据完成元素的绘制。',
]
let height1 = 20 + Math.ceil(this.drawImage8.measureWidth(text[0], '16px pingfang') / style.text.width) * style.text.lineHeight;
let height2 = height1 + 10 + Math.ceil(this.drawImage8.measureWidth(text[1], '16px pingfang') / style.text.width) * style.text.lineHeight;
let data8 = {
list: [
{
type: 'text',
text: text[0],
x: 10,
y: 10,
style: style.text
}, {
type: 'text',
text: text[1],
x: 10,
y: height1,
style: style.text
}, {
type: 'image',
x: 10,
y: height2,
url: './img/demo.png',
style: {
width: 100,
height: 60,
}
}, {
type: 'text',
text: text[2],
x: 15,
y: height2 + 80,
style: style.text
}
]
}
this.drawImage8.draw(data8);
}
});