视觉布局模块的开发和共享

经过两年多的迭代，Odeon大数据平台在基础能力建设方面已经相当全面. 在过去的六个月中，数据可视化投入了大量精力. 目前，自助商业智能产品已经成功发布，并且已经稳定运行了一段时间. 今天，该剧将分享我们在数据可视化方面的一些经验.

今天的分享主要围绕视觉布局模块的一些工作. 布局模块是一个带有可视图表的画布，并且是用户组织业务逻辑的重要手段之一. 首先体验演示或查看以下效果图:

图1: 可视化的布局模块渲染

效果图片

实际上，无论是在数据可视化中还是在某些自发布的操作平台中，自助服务布局始终是一个很难跳过的问题. 在项目开始时，这个问题也困扰着我们. 我们是否开发了几个预设模板供用户选择，还是开发了一个布局模块供用户拖放配置？

前者实现起来非常简单，并且易于设计，非常漂亮，但是它缺乏很多灵活性，并且易于保持一致. 后者的用户具有很高的使用自由度，可以拖放更符合他们期望的界面，但是开发成本相对较高，并且难以实现稳定性，易用性和较高的使用价值. 支持.

考虑到上述问题，我们对制定的几种解决方案不满意，最终决定实施一个可以帮助用户进行拖放式布局的组件.

在设计之后，我们整理了交互模型并设计了两层结构的卡片和图表. 在此基础上，完成了数据模型的总体设计，通过结合以上渲染图和演示，可以更容易地理解以下划分.

首先，在本地范围内的单例的Map类用于描述整个仪表板布局和其他数据存储.

接下来是Widget类，用于定义卡信息，包括卡的大小和位置，以及更详细的卡标题，卡类型，脚注，图表ID和其他信息.

最后是Chart类，用于定义图表信息. 为了将布局与统计图模型分开，此处放置的统计图信息较少，仅存储必要的ID和其他字段，并且统计图本身由外部插槽实现.

图2: 数据模型

数据模型

已建立数据模型，下一步是设计拖放交互.

为了快速响应并减少用户操作的随机性，我们在布局设计中放弃了像素单元，但是针对节点的大小以及初始化时缩放比例设计了虚拟的12网格分割，并且“移动全部”严格参考此网格布局.

为了确保用户流畅的拖动体验并保持布局整洁，我们基于自动卡片调整逻辑设计了卡片重绘过程，稍后将对此进行详细介绍.

为了提供更好的拖动体验，我们还设计了一个虚拟卡来协助用户进行布局. 用户可以随时释放鼠标，然后预览卡的位置和大小. 效果如下图阴影所示.

图3: 拖放预览效果图

辅助布局

事实上，通过上述数据模型设计，大多数困难已得到解决. 困难主要体现在辅助布局过程的易用性上，概括如下.

实际上，简单的冲突检测非常容易解决. 毕竟，所有卡都是二维矩形. 这并不困难. 困难在于，碰撞后接触的卡需要腾出空间. 我们需要找到所有被碰撞击中的牌，以及随后受到该牌影响的所有牌数据可视化效果图，这是比较困难的一点.

图4: 碰撞检测布局重绘过程

拖放碰撞检测

在设计布局的过程中，用户可能将卡片拖成碎片，并且上述碰撞检测过程也将导致相邻卡片受到影响. 初始交互后，根据经验发现，用户在拖放过程中花了很长时间重新排列布局. 因此，为了确保布局紧密，必须有一种方法可以按顺序处理所有处于挂起状态的卡.

图5: 自动天花板布局的重绘过程

拖放碰撞检测

上面提到的两个难点存在于移动和缩放的两个拖动交互中，并且在逻辑上是一致的. 因此，我们在拖放布局过程中抽象了一组重绘逻辑.数据可视化效果图，顺序如下:

由于拖动需要实时预览效果，因此上述四步重绘逻辑将频繁触发. 为了避免在布局过程中反复污染真实位置数据，我们为卡片位置引入了PreviewOffset字段，用于存储预览效果的垂直偏移.

有些学生可能会提出一个问题: 这是业务重绘逻辑，这样高密度的修改后的数据性能会不会很差？

实际上，解决此问题的原因是Widget类的数据模型设计. 在从碰撞检测到自动天花板的一系列过程中，仅经常计算和修改相对单位的位置对象，并且使用绝对单位的界面布局screenPosition对象. 数据和性能是分开的. 仅在重绘过程​​结束后才触发screenPosition更新. 这种设计使界面更新节奏更加可控，界面更加稳定，避免了卡片位置的视觉闪烁.

根据这种重画逻辑，避免了dom层的重画重画开销，提高了整体性能，极大地提高了界面布局的易用性，并且操作体验更加稳定流畅.

本文重点介绍视觉布局模块的交互逻辑的设计，并且不涉及特定的代码实现. 作为Odeon大数据平台可视布局模块的一些想法，我相信您已经对本文有初步了解.

如果您对本文中提到的碰撞检测，屈服处理，天花板效果和辅助布局的具体实现细节感兴趣，欢迎您私下讨论. 如果可能的话，我将打开另一篇文章进行详细讨论.

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/bofangqi/article-285883-1.html