如何实现一款轻量级的可视化画布引擎

在很多定制化的可视化场景中，拖拽、缩放、全屏操作必不可少，尤其对于业务复杂的可视化需求，当画布内容足够多，可视区域显示不下时，就需要借助缩略图来一览全局。 本文将介绍一款轻量级的画布引擎ReScreen，ReScreen是集缩略图与画布操作为一体的轻量级绘图引擎，为React专门定制，统一封装了画布的操作和缩略图功能，支持对画布的全屏、复位、显示所有、重置、平移缩放等常见功能。 基于ReScreen，我们搭建了一个通用编排场景的demo。 image.png 可以在使用了之后，再阅读下文，体感会更强。 ReScreen 介绍 ReScreen具备如下的特性： 支持缩放、拖拽等基本功能 支持缩略图，提供缩略图的点击聚焦功能、缩略图的位置、大小、间距等样式 支持缩略图的自定义传入，默认使用画布的缩小版 支持是否启动鼠标滚动缩放 支持缩放的范围设置 支持锁定某一方向的拖拽 支持控制按钮的自定义 支持拖拽动画 画布内容为SVG，或者原生DOM，目前暂未支持Canvas情况 ReScreen基于React与TypeScript开发，其属性参数为： class Props { /** 画布内容的类型，默认为SVG */ type?: 'SVG' | 'DOM' | 'CANVAS'; /** 组件整体的尺寸，支持传入百分数 */ height?: number | string; width?: number | string; /** 是否启动鼠标滚动缩放画布，默认为true */ zoomEnabled?: boolean; /** 是否启动聚焦功能，0表示不启动，1表示单击触发，2表示双击触发 */ focusEnabled?: number; /** 缩放范围 */ minZoom?: number; maxZoom?: number; /** 拖拽方向的锁定，默认为ALL */ dragDirection?: 'ALL' | 'HOR' | 'VER'; /** 是否需要缩略图，默认为true */ needMinimap?: boolean; /** 支持自定义传入缩略图组件 */ Minimap?: React.ReactElement; /** 缩略图位置，默认为RT，右上角；-IN表示在画布的内部 */ mapPosition?: 'RT' | 'RB' | 'LT' | 'LB' | 'RT-IN' | 'RB-IN' | 'LT-IN' | 'LB-IN'; /** 缩略图和原图之间的大小，默认为20 */ mapPadding?: number; /** 缩略图大小，默认为100px */ mapWidth?: number; mapHeight?: number; /** 缩略图矩形的样式，svg语法 */ mapRectStyle?: object; /** 按钮组件，如果不需要就不传 */ Buttons?: React.ReactElement; /** 由于画布元素的变化而引起的视图变化 */ needRefresh?: boolean; /** 通知外层重置needRefresh为false */ resetNeedRefresh?: () => void; /** 画布发生变化时的回调，对外暴露当前的缩放信息 */ onScreenChange?: (transform: ZoomTransform) => void; /** 对外暴露画布操作函数 */ getScreenHandler?: any; } 实现原理详解 画布的缩放能力主要借助了d3-zoom，但整体上还是涉及一些数学计算。这里涉及包括画布上可以平移缩放操作，也包括在缩略图上进行反向的操作。缩略图采用的是DOM复制，每次画布操作发生变化时，就重新复制一份。当然也支持自定义缩略图组件。 基本原理 d3-zoom 里将问题进行了如下的抽象，假设当前画布缩放系数为 k，x 轴平移偏移量在当前缩放系数下为 x ，y 轴平移偏移量在当前缩放系数下为 y，（k，x，y）在点（P0，P1）处进行缩放，需要求得缩放后的（k'，x'，y'），在 SVG 中的表现就是 通过鼠标滚动操作/放大按钮等等，求得缩放系数 k'，在 d3.zoom 内置有缩放系数计算函数： image.png 将（P0，P1）还原到（k，x，y）=（1，0，0）时的坐标： image.png 由于（P0，P1）为缩放原点，它的偏移量是不变，由此求得 x' 与 y' image.png 对于拖拽问题，k 值是不变的，拖拽仅改变 x 与 y 值，这块就比较简单了，通过鼠标拖拽的起点与重点，能得到相应变化量，将变化量给予 x 与 y 即可。 实现步骤 整体主要分成如下几个步骤： 根据传入属性，计算（或者直接获取）画布可视窗口的大小screenWidth/screenHeight和缩略图的大小mapWidth/mapHeight； 计算画布内容全部映射到缩略图中所需要的变化值screenToMapTransform； 监听画布的zoom事件，用screenTransform记录画布当前的变换； 监听缩略图可视矩形的zoom事件，用minimapTransform记录矩形当前的变换； 画布的最终缩放效果transform = screenTransform * invert(minimapTransform)，而缩略图可视矩形的变换为invert(transform)； 具体涉及到的计算原理如下图： image.png image.png image.png image.png 这样就具备了最基本的缩略图缩放功能了。这里涉及到一个问题，当画布内容变化时，缩略图也需要适时地自适应，即重新获取一次screenToMapTransform。 我们再简单介绍一下其他功能： 复位：将screenTransform和minimapTransform恢复到默认初始值，即设置为单位矩阵zoomIdentity。 重置：重置不仅具有复位的功能，还需要通知画布内部一切数据需要恢复到初始状态。 显示全部：这个也比较简单，跟screenToMapTransform的过程类似。 以画布中心缩放：假设P0为画布中心坐标，当前变换为transform，反求出在变换前P0的坐标P1；那么在新的transform1下，P1移到了P2，所以此时想要让画布的中心保持不变，就需要让画布平移P0 - P2的距离。如图所示： image.png 总结 拖拽在可视化场景中是很常见的交互形式，想做好拖拽的交互其实不容易，社区里也有很多强大的可视化绘图引擎，如AntV的底层G引擎，提供了统一的渲染机制。 本文介绍的ReScreen是一种基于React的轻量级绘图引擎方案，目的是借助React生态的能力，更大程度地帮助用户实现业务需求，用户仅仅只关注业务的开发，降低了学习成本，达到开箱即用的效果。 ReScreen 是ReGraph体系中的重要一环，ReGraph 是结合基础操作层、渲染交互层、布局算法层三层结构，针对数据领域图表（以数、图为基础数据结构，带有数据业务属性与特征的可视化图表）提供的解决方案。基于ReGraph体系，我们已经支持了多个领域图表场景的开发，比如复杂的DAG场景、ERGraph、服务编排场景等。目前ReGraph正在逐渐完善与开放，如果您有兴趣，也欢迎提供宝贵的意见。 最后打一下广告：阿里巴巴数据技术及产品部-体验技术团队招大量高级前端开发工程师/前端技术专家，技术氛围好，大神多，妹纸也多。欢迎投递简历：perkin.pj@alibaba-inc.com image.png

本文章由javascript技术分享原创和收集