小程序 wxml2canvas开发文档

 

wxml:

<view class="share__canvas share__canvas1">
    <view class="share__canvas1-text draw_canvas" 
        data-type="text" data-text="这是一段无边距文字">
        这是一段无边距文字
    view>
view>
<canvas canvas-id="canvas1" class="share__canvas">canvas>

js:

import Wxml2Canvas from 'wxml2canvas'; // 根据具体路径修改，node_modules会被忽略
Page({
    drawImage1 () {
        let self = this;
        this.drawImage1 = new Wxml2Canvas({
            width: 340, // 宽， 以iphone6为基准，传具体数值，其他机型自动适配
            height: 210, // 高
            element: 'canvas1', 
            background: '#f0f0f0',
            progress (percent) {
            },
            finish(url) {
                let imgs = self.data.imgs;
                imgs.push(url);
 
                self.setData({
                    imgs
                })
            },
            error (res) {
            }
        });
 
        let data = {
            list: [{
                type: 'wxml',
                class: '.share__canvas1 .draw_canvas', // draw_canvas指定待绘制的元素
                limit: '.share__canvas1', // 限定绘制元素的范围，取指定元素与它的相对位置
                x: 0,
                y: 0
            }]
        }
 
        this.drawImage1.draw(data);
    },
})

初始化属性

new Wxml2Canvas(options) 时传入的options属性如下：

绘制失败的原因如下：

 

数据配置方式支持的格式

代码示例：

let data = {
    list: [{
        type: 'rect',
        x: 10,
        y: 10,
        style: {
            width: 150,
            height: 80,
            fill: '#3762ab',
            border: '10px solid #aaaaaa',
        }
    }
}

上述是一个矩形的创建方式，可看代码里的示例。下面是支持的属性：

矩形

圆形

线条

图片

圆形图片

文本

此外，上述所有的元素都可以增加 delay:true 属性，来实现延迟绘制。

wxml转换的方式

如上面的使用示例，声明type为wxml时，会查询绘制元素节点的样式并绘制。下表是对应属性：

 

---

 目前支持的wxml类型如下，需要声明在节点上：

图片

圆形图片

背景图片

文本

行内文本

行内图片

行内文本与图片有特殊处理逻辑，当top值相同时，按照从左到右顺序排列，可能会与展现有差异。

此外，上述所有的元素都可以增加 delay:Number 属性，来实现延迟绘制, number范围：1-100，间接实现层级控制。