更新记录

1.0.1（2023-12-26）

优化图标rpx单位转换

1.0.0（2023-12-12）

欢迎联系定制

QQ:289097246

支持uni_modules规范，可全局引用，亦可单独引用

• 单独引用

import mrsongCanvas from '@/uni_modules/mrsong-canvas/components/mrsong-canvas/mrsong-canvas.vue';

• 用法

<template>
    <view class="canvas">
        <mrsong-canvas :dataSource="dataSource" @getImgUrl="getImgUrl"></mrsong-canvas>
    </view>
</template>

components: {
        mrsongCanvas
    },
    data() {
        return {
            dataSource: {
                dragBg: {
                    bgColor: '#6739b6',//背景色
                    color: '#6739b6',//画笔颜色
                    url: 'https://static.songjun520.cn/2048.jpg',//背景图
                    top: 0,//定位top
                    left: 0,//定位left
                    radius: 0,//背景圆角
                    cover: true,//背景图是否覆盖全屏
                },
                dragList: [
                    {
                        id: 0,//id不可重复
                        type: 'img',//类型
                        /* #ifndef H5 */
                        url: 'https://gitee.com/songjun520/static/raw/master/2048.jpg',//图片地址
                        /* #endif */
                        /* #ifdef H5 */
                        url: 'https://static.songjun520.cn/2048.jpg',//图片地址
                        /* #endif */
                        zIndex:1,//图层，数值越大，层级越高
                        width: 143,//宽度
                        height: 250,//高度
                        backgroundColor: '#6739b6',//背景色
                        active: false,//是否选中
                        fontSize: 18,//字体大小
                        top: 20,//定位top
                        left: 20,//定位left
                        radius: 10,//圆角
                        rotate: 0//旋转角度
                    },
                    {
                        id: 1,
                        type: 'shape',
                        zIndex:5,
                        width: 50,
                        height: 50,
                        active: false,
                        fontSize: 18,
                        borderColor: '#000',
                        backgroundColor: '#fff',
                        borderWidth: 10,
                        borderStyle: 'solid',
                        top: 80,
                        left: 180,
                        radius: 10,
                        rotate: 20
                    },
                    {
                        id: 2,
                        type: 'shape',
                        zIndex:2,
                        width: 50,
                        height: 50,
                        active: false,
                        fontSize: 18,
                        backgroundColor: '#000',
                        top: 150,
                        left: 250,
                        radius: 10
                    },
                    {
                        id: 4,
                        type: 'text',
                        text: '这是一段文字,可设置选旋转角度，字体大小，颜色',
                        zIndex:7,
                        width: 120,
                        height: 80,
                        fontSize: 15,
                        color: '#fff',
                        active: false,
                        top: 300,
                        left: 120,
                        radius: 0,
                        rotate: 20
                    }
                ]
            }
        };
    },
    methods: {
        getImgUrl(e) {
            console.log('getImgUrl', e);
        }
    }
};

props

dragList说明[{id:0,...}]

dragBg说明{bgColor: '#6739b6',...}

Events

平台兼容性

mrsong-canvas