meeting-management-applet/node_modules/wxml2canvas/pages/index/index.js

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);
    }
});