taro2canvas
Version:
将 Taro 指定节点转换成 canvas 元素
424 lines (396 loc) • 9.24 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);
},
});