更新记录

1（2022-11-13）

初始版本，提供添加图片、添加文字，一键保存画布为图片等功能。

平台兼容性

胖小导-画布助手使用说明

1、引入插件（完整示例）

<template>
    <view class="content">

        <fd_canvas ref="fd_canvas" width="300" height="500" custom_style="margin: 0 auto; margin-top:50px; box-shadow:2px 2px 10px rgba(0, 0, 0, 0.2);"></fd_canvas>
    </view>
</template>

<script>
import fd_canvas from "@/components/fd-canvas";

export default {
    name: 'test_home', 
    components: {
        fd_canvas
    }, 
    data() {
        return {
            fd_canvas: null, 
        }
    },
    onReady() {

        let that = this;

        that.fd_canvas = that.$refs.fd_canvas.init(function(){

            console.log('ready');
        });
    }, 
    mounted() {

        let that = this;

        that.fd_canvas.add('image', {
            name: 'image-1', 
            // 图片地址，支持网络图片，h5要处理图片跨域问题
            // src: 'http://my.admin.application/editor/20221111/142410-23972.png', 
            src: '/static/logo.png', 
            // 定位，设置了对方方式后失效
            x: 0, 
            y: 0, 
            // 顶部距离
            top: 10, 
            // 底部距离
            bottom: 10, 
            // 左距离
            left: 10, 
            // 右距离
            right: 10, 
            // 横向对齐方式，支持：left|center|right
            align: 'center',
            // 纵向对齐方式，支持：top|middle|bottom
            justify: 'middle', 
            // 宽度
            width: 80, 
            // 高度
            height: 80, 
            // 是否可选中
            can_select: true, 
            // 是否可拖拽
            can_drag: true,
            // 初始层级
            zIndex: 0
        }).add('text', {
            name: 'text-1',
            left: 10, 
            right: 10, 
            top: 80, 
            bottom: 10, 
            align: 'center', 
            justify: 'middle', 
            // 文本内容
            text: 'uni-app', 
            // 文本颜色
            fontcolor: 'white', 
            // 文本字号
            fontsize: 40, 
            // 字体
            fontfamily: 'sans-serif', 
            // 背景颜色
            color: 'red', 
            // 是否有阴影
            has_shadow: true, 
        }).add('text', {
            name: 'text-1',
            left: 10, 
            right: 10, 
            top: 0, 
            bottom: 70, 
            align: 'center', 
            justify: 'middle', 
            text: '画布助手', 
            fontcolor: 'red', 
            has_shadow: true, 
        }).save(function(filepath){

            console.log(filepath);
        });
    },
    methods: {

    }
}
</script>

<style>
.content{

}
</style>