vue+canvas实现区域框选功能

颊口村村霸

已于 2023-02-10 15:05:46 修改

阅读量1.4k

点赞数

文章标签： vue.js javascript 前端

于 2023-02-10 15:01:45 首次发布

本文链接：https://blog.csdn.net/qq_42750581/article/details/128970322

版权

本文介绍如何结合Vue.js与HTML5 Canvas技术，实现网页中的图形区域选择功能。通过Vue的数据绑定和Canvas的绘图API，我们可以创建一个交互式的框选工具，允许用户在画布上自由划定选取范围，从而实现对图形的高亮显示和操作。这一功能在数据可视化、图像编辑等场景中十分常见。

摘要由CSDN通过智能技术生成

在这里插入图片描述

//height:自定义canvas的高度，如果不设置的话默认展示图片的宽度
//disabled:设置canvas不允许编辑
//imgSrc:设置背景图连接base64
//rectListData:矩形数组，可在父组件通过watch监听到变化
//initHeatMap：父组件通过this.$refs调用初始化函数
<template>
    <div :style="{marginRight:'50px',width:imgWidth<width?imgWidth+'px':width+'px',height:height?height+'px':imgHeight+'px',position:'relative'}">
        <canvas id="myCanvas"
                :width="width?width+'px':imgWidth+'px'"
                :height="height?height+'px':imgHeight+'px'"
                @mousedown="mousedown"
                @mousemove="mousemove"
                @mousewheel="mousewheel"
        ></canvas>
        <!-- y轴滚动条 -->
        <div
            :style="{height:height?height+'px':imgHeight+'px',overflowY:'scroll',overflowX:'hidden',position:'absolute',right:'-15px'}"
            @scroll="handleScrollY($event)"
            ref="scrollBarWrapY"
            v-show="height && imgHeight > height"
        >
            <div class="scrollBar" style="width:20px" ref="scrollBarY"></div>
        </div>
        <!-- x轴滚动条 -->
        <div
            :style="{width:width?width+'px':imgWidth+'px',overflowX:'scroll',overflowY:'hidden',position:'absolute',right:'-15px'}"
            @scroll="handleScrollX($event)"
            ref="scrollBarWrapX"
            v-show="width && imgWidth > width"
        >
            <div class="scrollBar" style="width:20px" ref="scrollBarX"></div>
        </div>
    </div>
</template>
<script>
    export default{
        props:{
            height:{
                type:Number
            },
            width:{
                type:Number
            },
            imgSrc:{