更新记录

0.1（2020-05-21） 下载此版本

1:手绘版 2:笔画粗细 3:笔画颜色 4:背景色 5:撤回 6:保存图片

平台兼容性

手绘版

使用方式

• 导入

～～～JavaScript

import draw from '@/components/xiaobai-draw.vue'

export default {
    components: {
        draw
    }
}

～～～

• 使用

～～～HTML

<view class="page">
    <draw ref="ddd" :width="uni.upx2px(750)" :height="uni.upx2px(750)" background="#fff" color="#ff0" :size="size" @onSave="onSave"></draw>
    <button @click="save">Save</button>
    <button @click="init">Init</button>
    <button @click="back">Back</button>
    <image :src="img"></image>
</view>

～～～

～～～JavaScript

import draw from '@/components/xiaobai-draw.vue'

export default {
    components: {
        draw
    },
    methods: {
        init: () => {
            that.$refs.ddd.init()
        },
        back: () => {
            that.$refs.ddd.back()
        },
        save: () => {
            that.$refs.ddd.save()
        },
        onSave: (file) => {
            that.img = file
            console.log(file)
        }
    },
    onLoad() {
        that = this
    },
    data() {
        return {
            size: 6,
            img: ''
        }
    }
}

～～～

• 属性

width：px 画布大小

heigh：px

background：#fff 画布背景色

color: #000 笔画颜色

size: px 笔画大小