更新记录

1.0.8（2023-11-22） 下载此版本

修改参数规则

1.0.7（2023-11-16） 下载此版本

文档名称不符合

1.0.6（2023-11-16） 下载此版本

文档名称不符合问题

平台兼容性

uni-app

其他

mu-canvas

使用方法

<template>
    <view>
        <mu-canvas ref="share" width="650" unit="rpx" height="1160" styles="margin-left: 50rpx;margin-top: 36rpx;" backgroundColor="#FFFFFF" :elementList="elementList" :auto="true"></mu-canvas>
    </view>
</template>

<script>
export default {
    // components: { XqGeneratePoster },
    data() {
        return {
            elementList: {
                images: [ //图片对象
                    {
                        path: "http://t6.xin.cn/uploads/20231113/a07068b23e1d4969d09f4105fee78631.png", //图片路径[必填]
                        dx: 0, //左上角x轴[必填]
                        dy: 0, //左上角y轴[必填]
                        dWidth: 325, //宽度[必填]
                        dHeight: 430, //高度[必填]
                        sx: 0, //绘画的宽度[选填]
                        sy: 0, //绘画的高度[选填]
                    }
                ],
                text: [ //渲染文字
                    {
                        value: "邀请码：", //渲染的文字
                        color: "#333333", //文字颜色[选填]
                        size: "14", //大小[选填]
                        font: "PingFang SC-Regular, PingFang SC;", //字体[选填]
                        x: 13, //左上角x轴[必填]
                        y: 452, //左上角y轴[必填]
                        // backgroundColor: "#ffffff", //背景色
                        maxWidth: "", //字体最大宽度
                        maxHeight: "", //字体最大高度
                    }
                ],
                qr: [ //渲染的二维码
                    {
                        url: "http://t6.xin.cn/#/pages/user/code_login?invite_mobile=5", //二维码文字[必填]
                        dx: 241, //左上角x轴[必填]
                        dy: 452, //左上角y轴[必填]
                        size: 71, //二维码大小
                        color: "#333333", //二维码前景色
                        backgroundColor: "#ffffff" //二维码背景色
                    }
                ]

            }
        };
    },
    methods: {
        redraw(){
            this.$refs.share.redraw();
        },
        getImgSrc(){
            this.$refs.share.getImgSrc();
        },
        save(){
            this.$refs.share.saveImg();
        }
    }
};
</script>

mu-canvas参数说明

elementList参数说明

images参数说明

text参数说明

qr参数说明

可用函数说明