如何画一个网格

问题描述

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

实现思路

页面结构

页面结构分为三层

数据结构

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

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

样式

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

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

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

相关推荐
鹏多多18 小时前
Vue3响应式原理Proxy的深度剖析
前端·javascript·vue.js
不可能的是18 小时前
深度解析:Sass-loader Legacy API 警告的前世今生与完美解决方案
前端·javascript
情绪的稳定剂_精神的锚18 小时前
VSCODE开发一个代码规范的插件入门
前端
养老不躺平18 小时前
关于nest项目打包
前端·javascript
Mike_jia19 小时前
uuWAF:开源Web应用防火墙新标杆——从工业级防护到智能防御实战解析
前端
掘金安东尼19 小时前
Chrome 17 岁了——我们的浏览器简史
前端·javascript·github
袁煦丞19 小时前
群晖NAS FTP远程文件仓库全球访问:cpolar内网穿透实验室第524个成功挑战
前端·程序员·远程工作
前端小巷子19 小时前
JS 打造动态表格
前端·javascript·面试
excel19 小时前
从卷积到全连接:用示例理解 CNN 的分层
前端
UNbuff_019 小时前
HTML 各种事件的使用说明书
前端·html