从APP角度看复杂表格的交互绘制

本文主要解决对复杂表格的需求分解，以及技术方案选型，文章适合工作中设计到复杂表格这块的app、web开发人员。

一、需求分析

需求：如下图所示，一整个表格为一个矿区，每个方块为矿块，业务上通过选择矿块选择来下发矿山项目的开采指令。

核心需求难点拆解：

1.1、表格框架绘制

1. 根据后端配置绘制x*y个边线为1px的矿块表格，每个矿块根据后端配置显示位置文本信息。

2. 相应的绘制动态长度的x轴、y轴，并且坐标轴上的文本与表格居中对齐。

1.2、表格状态

根据后端配置动态生成表格，分为4种状态：

1. 矿块不存在：整个矿块不存在

2. 不可选中矿块：灰色边框，淡蓝色背景

3. 未选中矿块：蓝色边框，白色背景

4. 已选中矿块：蓝色边框，蓝色背景

1.3、手势响应

1. 滑动手势

矿块可以响应单个手指的滑动，并且在滑动过程中x轴、y轴悬浮。

2. 缩放手势

对表格双指捏合可对表格进行缩放，响应xy轴宽度不变，高度也对应缩放，并设置缩放最大最小限制。

3. 点击手势

点击可改变矿块的选中状态

二、解决思路

本文难点主要在于绘制以及手势这块。

2.1、绘制难点处理

分析：由于边线宽度是1px，而边界由于矿块不存在的问题导致形状不是一个矩形，这里我们就必须舍弃宽度0.5px+0.5px叠加的这种方向上的办法。

针对这种问题我们提出3种解决方案

方案一 、相对布局堆叠

每个方框要么是灰色边线，要么是绿色边线，使用css中的position布局方式，并且设置marginLeft:-1,marginTop:-1错位堆叠起来。并且将需要绘制绿色边线的提高zIndex展示优先级。

优点：逻辑相对清晰，且实现难度较低。

缺点：要求布局不能为单纯的流式布局，意味着会损耗大量性能

方案二、动态计算方块的下面和右边边线颜色。

因为边线颜色在css中可以设置borderLeftColor等四个方向的颜色，所以可以采用这种动态计算边线颜色的方法。

优点：使用1层流式布局不需要堆叠布局，绘制性能好

缺点：仅增加了计算量。

方案三、使用两个容器，下面一个灰色矿块，上面一个蓝色矿块

使用两个容器，下面容器放置灰色矿块，然后上面容器放置蓝色矿块。通过上面一层蓝色矿块的有无决定是否选中，以此达到绘制整个表格的目的。

优点：使用2层流式布局，绘制性能好。且计算量相对也少

2.2、手势难点处理

手势这块相对较为简单

2.2.1、表格滑动与坐标轴悬浮

将表格的xy轴变化量一方面作用于表格的位置上，一方面取y轴变化量作用于y轴，取x轴变化量作用于x轴即可，这样即可实现表格随着手势滑动，同事x、y轴悬浮滑动的效果

2.2.2、表格、坐标轴放大缩小

我们将双指捏合的rate以手指心为坐标原点作用于整个表格的宽高，同时取rate作用于x轴的宽，取rate作用于y轴的高即可

2.2.3、矿区选中点击

实现单击手势即可。这里在react-native上由于冲突的关系onPress已经无法响应，这里我们使用react-native-gesture-handler的TapGestureHandler来响应单击手势，难度系数不高。