如何画一个网格

问题描述

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

实现思路

页面结构

页面结构分为三层

数据结构

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

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

样式

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

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

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

相关推荐
吹牛不交税2 分钟前
tree-transfer-vue3 前端插件安装问题解决(--legacy-peer-deps)(其他插件可考虑)适用
前端·javascript·vue.js
ricardo19734 分钟前
Chrome DevTools + Lighthouse + Performance API:前端性能调优三件套实操指南
前端
Appoint_x6 分钟前
设计稿自己会说话:我用 Claude 给 Figma 做了个 AI 上下文插件
前端·javascript
豹哥学前端8 分钟前
浏览器console里的双中括号 `[[ ]]`
前端·javascript·ecmascript 6
菜泡泡@9 分钟前
npm 安装pnpm之后运行pnpm -v查询报错
前端·npm·node.js
贫民窟的勇敢爷们34 分钟前
React跨平台能力,打破前端开发的平台边界
前端·react.js·前端框架
lifejump1 小时前
Dede(织梦)CMS渗透测试(all)
前端·网络·安全·web安全
扬帆破浪1 小时前
sidecar崩溃后前端怎么续命 重启策略与状态保留
前端·人工智能·架构·开源·知识图谱
光影少年1 小时前
前端算法题
前端·javascript·算法