1、 什么是 HuayouJS
HuayouJS是一个基于SVG（Scalable Vector Graphics）的2D图形JavaScript组件库，它提供了原生SVG未具有的平移（Pan）和缩放（Zoom）功能，同时支持按图层管理SVG 图形元素。
HuayouJS定义了Metadata、Defs、Style及Layer等一系列图形对象，在内部高效的实现了zoomAndPan特性，并配合SVG 原生对象模型和API，开发者可以快速构建任何SVG图形应用。
2、 HuayouJS 解决什么问题
SVG规范中，对zoomAndPan（SVG文档整体缩放和平移）特性做了如下描述：
A magnify operation has the effect of a supplemental scale and translate transformation placed at the outermost level on the SVG document fragment (i.e., outside the outermost svg element).
Panning represents a translation (i.e., a shift) transformation on an SVG document fragment in response to a user interface action.
并要求svg文档片段中最外层的svg元素具有属性 “zoomAndPan”， 用于支持SVG文档整体平移和缩放。 （The outermost svg element in an SVG document fragment has attribute ‘zoomAndPan’, which takes the possible values of disable and magnify, with the default being magnify.）
但遗憾的是，SVG规范中也明确指出，应用zoomAndPan 属性是有风险的，因为它没有已知的实现，也不太可能实现。 （The zoomAndPan attribute is at risk, it has no known implementations and is unlikely to be implemented. See Github issue #56.）。 截至当前，zoomAndPan特性没有得到包括chrome在内的任何主流浏览器支持。
但zoomAndPan是任何图形应用中所必须具有的基本特性，正是在这样的背景下，SVG图形应用开发者在实现zoomAndPan特性时，就有了各种不同的选择，有些开发者自己动手实现，而有些借助第三方库来解决问题。
客观来讲，在SVG中自行实现单纯的zoomAndPan特性并不复杂，但由于平移和缩放会带来一系列相关需求，比如在平移缩放过程中提供回调机制来进一步控制平移缩放行为，或是当屏幕或浏览器大小发生变化时，提供resize事件来调整缩放比例控制图形内容来自适应窗口大小，以及由于平移缩放操作导致视口坐标系统（viewport coordinate system）和用户坐标系统（user coordinate system）的转换问题，等等，想系统性的处理这些需求并非易事，需要大量设计和代码工作。
HuayouJS 设计的初衷，就是一次性系统解决 zoomAndPan 及相关衍生需求，简化基于 SVG 的图形应用系统开发。
3、 HuayouJS 功能
HuayouJS专门为SVG图形应用开发者提供了以下三类功能：
（1）zoomAndPan
HuayouJS提供了开箱即用的SVG文档整体平移和缩放特性，并通过一系列简单易用的API接口，用于控制整体平移和缩放行为，以及因此而衍生的平移缩放精细控制、内容自适应及坐标变换等需求。
（2）Layers Management
HuayouJS提供了图层管理功能，图层可增加、移除、排序、可见、按缩放比例显示和隐藏等。
可按图层管理原生SVG图形元素，可向图层中增加、删除及移动SVG图形元素。
（3）Overlay
HuayouJS提供创建各种覆盖物功能，有些覆盖物不随Pan操作而改变位置，而有些覆盖物不随zoom操作而改变大小等等。
4、 HuayouJS 特点
HuayouJS是一个轻量级的JavaScript库，用一层极薄的封装，实现zoomAndPan及Layers Management功能，并可配合原生SVG元素使用。HuayouJS设计者认为，原生SVG的对象模型已经足够易用和强大，像Snap.svg和SVG.js那样对SVG进行全面封装是没有必要的。
与同类产品相比，HuayouJS拥有以下特点：
（1）支持开发者使用SVG原生对象模型和API开发应用，从而不增加额外学习成本，也不必担心第三方库未来的发展和维护问题。
（2）拥有与原生SVG一致的性能。
（3）HuayouJS中可无缝嵌入Echarts、Vue及React等组件，嵌入组件可随SVG元素共同平移和缩放。
5、 类似产品对比
（1）KonvaJS
Konva是一个基于2d Context的Canvas类库。Konva对象模型和API体系简明易懂，包含常用形状、事件系统、变换及分层等功能。
下面是KonvaJS和HuayouJS性能指标对比。
| 序号 | 对标项 | Huyoujs | Konvajs |
|---|---|---|---|
| 1 | 压缩代码包大小 | 57KB | 153KB |
| 2 | 创建10000个位置不重叠的矩形耗时 | 111.8 mm | 418.4 mm |
| 3 | 从10000个矩形中按“[属性=value]”查找，返回 1000个矩形耗时 | 5 mm | 3 mm |
| 4 | 逐个更改10000个矩形的填充色耗时 | 31 mm | 75 mm |
| 5 | 逐个移动10000个矩形的位置（移动1px）耗时 | 38 mm | 79.8 mm |
| 6 | 快速重复鼠标左键平移Pan操作(帧率fps) | 45帧/秒 | 15帧/秒 |
| 7 | 快速重复鼠标滚轮缩放Zoom操作(帧率fps) | 46帧/秒 | 20帧/秒 |
（注：测试机器配置window10，chrome浏览器，CPU: intel Core i7 @ 2.50GHz，集成显卡）
在图形元素（如矩形）达到5000个左右规模时，Konva进行频繁Pan操作有卡顿现象，而达到10000个左右规模时，卡顿现象更加明显。Huyoujs在10000个左右规模时进行Pan操作依然很流畅 (演示地址：huayoujs.github.io/huayou/exam… )
（2）Snap.svg和SVG.js
Snap.svg和SVG.js设计目标是对原生SVG进行全面封装，致力于提供一整套全新的对象模型和API来开发图形应用，Zoom和Pan 并不是其主要设计目标。
（3）anvaka/panzoom
panzoom(作者：anvaka)是一个可扩展、移动端友好的平移和缩放框架，可支持DOM元素和SVG元素平移和缩放。panzoom 需要选取DOM树里的某一个HTMLElement或SVGElement作为其zoomAndPan的根元素，而HuayouJS则是一个自定义组件，在组件内部定义了图形的Metadata、Defs、Style及Layer等对象，并在内部动态创建用于zoomAndPan的虚拟视口元素。
二者性能相近。
6、 适用场景
工业控制和物联网是HuayouJS典型应用领域，尤其是需要渲染数以万计的大规模图形元素及复杂交互场景，以及工业图元高性能装载、着色、闪烁、查找等需求。
HuayouJS适用于与流程图、工程图及示意图等图形相关应用。
HuayouJS也适用于数据可视化及大屏展示场景。
7、 附录
HuayouJS API Reference
huayoujs.github.io/huayou/docs…
HuayouJS示例
基本示例
huayoujs.github.io/huayou/exam…
SCADA应用示例
huayoujs.github.io/huayou/exam…
HuayouJS代码仓库
