如何画一个网格

问题描述

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

实现思路

页面结构

页面结构分为三层

数据结构

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

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

样式

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

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

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

相关推荐
我爱学习_zwj几秒前
动态HTTP服务器实战:解析请求与Mock数据
开发语言·前端·javascript
NMBG222 分钟前
外卖综合项目
java·前端·spring boot
小白阿龙2 分钟前
样式不生效/被覆盖(CSS优先级陷阱)
前端·css
Beginner x_u6 分钟前
Vue 事件机制全面解析:原生事件、自定义事件与 DOM 冒泡完全讲透
前端·javascript·vue.js·dom
Emma_Maria6 分钟前
关于vant-ui-vue 的datepicker 时间选择错乱问题的处理
前端·vue.js·ui
Dabei11 分钟前
Android 语音助手简单实现与语音助手“执行任务”交流
android·前端
dongczlu13 分钟前
iOS 循环引用篇 菜鸟都能看懂
前端
Alsn8615 分钟前
26.IDEA 专业版中创建简单的 Web 项目并打包部署到本地Tomcat 9
前端·tomcat·intellij-idea
霍理迪16 分钟前
HTML行内块标签——img、表单、音视频标签
前端·html
小小前端_我自坚强17 分钟前
边缘函数 (Edge Functions)详解
前端