如何画一个网格

问题描述

做一个类似这种,网格中多个相邻的单元格可以合并成一个大的矩形

实现思路

页面结构

页面结构分为三层

数据结构

还需要维护一个整个网格系统的二维占用数组,如果这个单元格被占了(不管是单独的一个矩形还是包含在了某个大矩形之中),那么这个位置就填上1

fillArr长这样:fillArr: [[0, 0, 1, 1], [0, 2, 0, 3], [0, 4, 3, 4]],

样式

把容器写成realtive,然后所有的矩形、线(其实就是很窄的矩形)都是计算好位置后再absolute放上去

根据二维占用数组,判断自己的周围有没有矩形,从而决定线是横着放还是竖着放

可以把所有线的样式保存到一个数组里面,然后再统一渲染

相关推荐
_瑶瑶_21 小时前
浅记一下ElementPlus中的虚拟化表格(el-table-v2)的简单使用
前端·javascript
Drift_Dream21 小时前
ResizeObserver:轻松监听元素尺寸变化
前端
拉不动的猪21 小时前
Axios 请求取消机制详解
前端·javascript·面试
该用户已不存在21 小时前
2025 年 8 款最佳远程协作工具
前端·后端·远程工作
lxh011321 小时前
螺旋数组题解
前端·算法·js
E***U94521 小时前
前端安全编程实践
前端·安全
老华带你飞1 天前
海产品销售系统|海鲜商城购物|基于SprinBoot+vue的海鲜商城系统(源码+数据库+文档)
java·前端·数据库·vue.js·论文·毕设·海鲜商城购物系统
x***B4111 天前
React安全编程实践
前端·安全·react.js
D***t1311 天前
前端微服务案例
前端
哀木1 天前
诶,这么好用的 mock 你怎么不早说
前端