前端选中数据动态定位在图片固定位置

最新推荐文章于 2024-07-04 16:37:43 发布

想回家种田ing

最新推荐文章于 2024-07-04 16:37:43 发布

阅读量177

点赞数 2

分类专栏： Vue 文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/m0_67795833/article/details/136534274

版权

Vue 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

前段时间碰到一个需求，需要在左侧组件配置中勾选并按照勾选顺序插入在右侧图片四个框内，最多勾选四个，因为图片是百分比进行缩放的，通过绝对定位会导致不同分辨率下位置会有偏移，以下是我实现的方法：

<template>
    <div class="flex">
        <div>
            <el-checkbox-group v-model="checkList" @change="changecheckList">
                <el-checkbox v-for="item in items" :key="item" :label="item">
                    {{item}}
                </el-checkbox>
            </el-checkbox-group>
        </div>
        <div class="img-box" id="container">
            <img src="../../resources/images/bgc.jpg" alt="" id="img" class="bgc">
            <!-- 定位的组件盒子 -->
            <div id="marker" class="position-box flex-wrap-bwn">
                <div class="for-img" v-for="item in checkList" :key="item">
                    <!-- 你需要动态放的图片 -->
                    <div class=""></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return{
            checkList: [],
            items: ['1','2','3'],
        }
    },
    methods: {
        changecheckList(e) {
            this.showBox()
        },
        showBox() {
            // 获取包装图片的父级容器
            const container = document.getElementById('container');
            // 获取图片容器
            const image = document.getElementById('img')
            // 获取需要定位位置的容器
            const marker = document.getElementById('marker');
            // 拿到父级容器宽度
            const containerWidth = container.clientWidth;
            // 拿到父级容器高度
            const containerHeight = container.clientHeight;
            // 拿到图片容器宽度
            const imageWidth = image.clientWidth;
            // 拿到图片容器高度
            const imageHeight = image.clientHeight;
            // 通过父级容器宽度/父级容器高度 得到缩放比例
            const containerRatio = containerWidth / containerHeight;
            // 获取图片缩放比例
            const imageRatio = imageWidth / imageHeight;
            let offsetX = 0;
            let offsetY = 0;
            if (containerRatio > imageRatio) {
            // 如果容器更宽，水平居中
                offsetX = (containerWidth - imageWidth ) / 2;
            } else {
            // 如果容器更高，垂直居中
                offsetY = (containerHeight - imageHeight ) / 2;
            }
            const markerX = offsetX + imageWidth * 0.07 ; // 根据自己需求进行调整数值
            const _markerX = offsetX + imageWidth * 0.22 ; // 根据自己需求进行调整数值
            const markerY = offsetY + imageHeight  * 0.075;// 根据自己需求进行调整数值
            const _markerY = offsetY + imageHeight  * 0.49;// 根据自己需求进行调整数值
            // 定位marker容器位置
            marker.style.left = markerX + 'px';
            marker.style.top = markerY + 'px';
            marker.style.width = (_markerX - markerX) + 'px';
            marker.style.height = (_markerY - markerY) + 'px';
        },
    }
}
</script>

<style lang="scss" scoped>
.flex-wrap-bwn{display: flex;justify-content: space-between;flex-wrap: wrap;}
.flex{
    display: flex;
    width: 100%;
    height: 100%;
}
.img-box{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .bgc{
        width: 100%;
    }
    .position-box{
        position: absolute;
    }
    .for-img{
        border: 1px solid blue;
        width: calc(100% / 2 - 6px);
        height: calc(100% / 2 - 10px);
    }
}
</style>

主要是拿到图片父级容器、图片容器宽度高度，