目录

如何画一个网格

问题描述

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

实现思路

页面结构

页面结构分为三层

数据结构

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

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

样式

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

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

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

本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
夕秋一梦9 分钟前
vue项目本地调试使用https
前端·vue.js·https
小破孩呦13 分钟前
动态列表的数据渲染、新增、编辑等功能开发及数据处理
前端·javascript·elementui
成长ing1213813 分钟前
点击音效系统
前端·cocos creator
熟悉不过14 分钟前
cesium项目之cesiumlab地形数据加载
前端·javascript·vue.js·cesium·webgis·cesiumlab
神经毒素24 分钟前
WEB安全--XSS--DOM破坏
前端·web安全·xss
不简说1 小时前
sv-print可视化打印组件不完全指南③
前端·javascript·vue.js
前端摸鱼杭小哥1 小时前
Vue 开发者狂喜!我在 React 中完美复刻了 v-if/v-for 指令
前端·vue.js·react.js
kovli1 小时前
红宝书第四讲:JavaScript原始值与引用值行为差异详解
前端·javascript
竹苓1 小时前
CSS Grid布局:从入门到放弃再到真香
前端
1_2_3_1 小时前
深入理解 Git 子模块:优化项目管理的利器
前端·github