更新记录

1.0.0（2025-06-06） 下载此版本

初始化

平台兼容性

uni-app(4.28)

其他

画布Canvas 画板 区域绘制 区域报警（小程序/App/移动端/iPad）

组件名：wsx-canvas-draw

关联组件：画布、canvas、uni、wsx

数据回选、自定义上传画布图片背景、区域报警、基于uniapp打造，支持移动端、iPad、自定义配置。支持H5，微信小程序，APP等全端

功能说明

1.uni-app在image上绘制自定义区域 2.设置canvas的宽高比例，以适应图片尺寸 3.根据画布大小计算绘制区域位置 4.添加绘制区域 5.编辑绘制区域 6.删除绘制区域 7.清空绘制区域 8.设置区域报警（爆闪）

使用方式：

<template>
    <view class="wsx">
        <wsx-canvas-draw :imageInfo="imageInfo" :submitData="submitData" ref="canvasDraw"> </wsx-canvas-draw>
    </view>
</template>

<script>
    import wsxCanvasDraw from '../../components/wsx-canvas-draw/index.vue'
    export default {
        components: {
            wsxCanvasDraw,
        },
        data() {
            return {
                imageInfo: {
                    imgUrl: "/static/factoryImg.jpg",
                    width: 700,
                    height: 1400
                },
                submitData: [{
                        area_id: "",
                        area_name: "区域一",
                        polygon: {
                            x1: 89,
                            x2: 85,
                            x3: 273,
                            x4: 269,
                            y1: 72,
                            y2: 145,
                            y3: 137,
                            y4: 76,
                        },
                        uuid: "e0d0e522-462e-4c57-8ff1-946244288130",
                    },
                    {
                        area_id: "",
                        area_name: "区域二",
                        polygon: {
                            x1: 179,
                            x2: 30,
                            x3: 31,
                            x4: 341,
                            x5: 341,
                            y1: 238,
                            y2: 338,
                            y3: 434,
                            y4: 423,
                            y5: 325,
                        },
                        uuid: "0e5aab62-0021-4e11-b7c6-71bd405746e3",
                    }
                ],
            };
        },
        mounted() {
            this.init()
        },
        methods: {
            init() {
                this.$refs.canvasDraw.init()
            },
        },
    };
</script>

参数说明：

事件说明：

1.初始化Canvas

调用init()方法初始化Canvas画布 调用initCanvas()方法设置画布宽高比例，加载并绘制图片

2.开始绘制

点击开始绘制 drawStart 方法 监听Canvas @touchstart事件 点击时,在drawImageClick中记录点坐标，在drawImageArea中实时绘制区域 点击结束绘制 drawEnd 方法 添加区域名称 点击确定 areaSave 方法

3.区域报警

可设置指定区域色块爆闪

感谢支持

爱人者，人恒爱之；敬人者，人恒敬之；
制作不易, 每一份支持, 都是对我最大的肯定, 让我更有动力创造美好!
如果你在项目中使用该插件并解决了你的问题，请给予厚爱!