Konva.js

Konva 是一个支持高性能动画、过渡、节点嵌套、图层、滤镜、缓存、事件处理等的 2D Canvas 库。

核心特性与底层原理

场景图结构 (Scene Graph) 与严格的多图层设计： Konva 的设计哲学强烈依赖于“图层”。它的数据结构是一棵严格的树：Stage (舞台) -> Layer (图层) -> Group (组) -> Shape (形状)。
- 底层原理：在 Konva 中，每一个 Layer 都会在 DOM 中生成一个独立的 <canvas> 物理节点。
- 动静分离优化：如果你有 10000 个静态背景节点和 1 个在屏幕上飞来飞去的小球。你应该把背景放进 BackgroundLayer，小球放进 AnimationLayer。小球移动时，只会触发顶层 <canvas> 的 clearRect 和重绘，底层包含万个节点的 <canvas> 纹丝不动。
完美的隐藏画布拾取算法 (Color Hash / Hit Canvas)：
面试题：Konva 是如何做到在几万个极度复杂的不规则图形中，瞬间知道你点击了哪一个的？
- 底层原理：当你向 Konva 舞台添加一个形状时，它除了在肉眼可见的图层上画出来，还会在内存中隐密地画到一个 Hit Canvas (拾取画布) 上。
- 唯一色哈希映射：在画到 Hit Canvas 时，Konva 会给这个形状随机生成一个独一无二的十六进制颜色（例如 #000001），并用这个颜色填充整个形状。同时把 {#000001: 真实Shape对象} 存入一个哈希表。
- 极速拾取：用户点击屏幕时，Konva 直接去 Hit Canvas 获取该坐标 (x, y) 上的 [R, G, B] 像素值，拼接成字符串去哈希表里查。无视图形的几何复杂度，拾取时间复杂度永远是极速的 $O(1)$。
框架集成（React/Vue 友好）：有官方维护的 react-konva 和 vue-konva。得益于其清晰的树状节点结构，它非常适合与现代声明式前端框架结合使用。

实战代码示例（以 react-konva 为例）

使用声明式的语法写 Canvas，心智负担极低，状态驱动视图更新：

import React, { useState } from "react";
import { Stage, Layer, Circle, Rect } from "react-konva";

const App = () => {
  const [isHovered, setHovered] = useState(false);

  return (
    // Stage 会生成一个包裹容器
    <Stage width={window.innerWidth} height={window.innerHeight}>
      {/* 每一个 Layer 都会生成一个真实的 <canvas> DOM 节点 */}
      <Layer>
        <Rect
          x={20}
          y={20}
          width={50}
          height={50}
          fill={isHovered ? "red" : "blue"}
          // Konva 内部通过 Hit Canvas 极速捕获这些事件
          onMouseEnter={() => setHovered(true)}
          onMouseLeave={() => setHovered(false)}
          draggable // 内置拖拽支持
        />
        <Circle x={200} y={100} radius={50} fill="green" />
      </Layer>
    </Stage>
  );
};

适用场景

数据可视化面板、拓扑图、流程图。
复杂的 2D 游戏或需要极致性能的动态大屏项目。

面试考点：深度对比 Fabric.js vs Konva
这两个库是目前 2D Canvas 领域最主流的选择，面试中常被问到技术选型。可以从以下几个核心维度进行深度对比：
核心架构与图层管理（性能差异所在）：
Konva：采用严格的 Stage -> Layer -> Group -> Shape 树状架构。它的核心优势是多图层管理，每个 Layer 在底层对应一个独立的 <canvas> DOM 节点。这使得局部重绘非常高效（比如一个图层做复杂背景，另一个图层做高频运动的元素，动画时只会重绘运动图层）。
Fabric.js：在 DOM 层仅使用“双层 Canvas”（Lower Canvas 和 Upper Canvas）。
Lower Canvas（底层）：负责渲染所有的静态图形（比如你画了 1000 个矩形）。
Upper Canvas（上层）：负责拦截鼠标事件，以及专门绘制交互时的临时状态。比如当你选中并拖拽其中 1 个矩形时，Fabric 会把这个矩形从底层“抠”出来画到上层，并画上控制框（虚线和拉伸点）。拖拽期间，只有上层 Canvas 在做小范围的高频重绘，而包含另外 999 个矩形的底层 Canvas 完全静止不动。这就是它保障交互不卡顿的秘诀。但在处理几千个独立图形都在无规律运动（无交互）的场景时，其性能不如 Konva 的多图层。
事件拾取机制（Hit Detection）：
Konva：使用极具特色的颜色拾取法（Color-key Hit Graph）。它在内存中维护了一个隐藏的 Canvas，用不同的颜色绘制每个形状，通过读取鼠标坐标处的像素颜色来精准判断点中了谁。这种方式对极其复杂、不规则的路径图形拾取非常快。
Fabric.js：使用纯数学/几何计算（射线法、点在多边形内、包围盒等）。
框架集成与开发范式：
Konva：完美契合现代前端框架。官方提供了 react-konva 和 vue-konva，完全支持数据驱动和声明式渲染。你可以像写普通 React 组件一样写 Canvas 节点，与 Redux/Zustand 等状态管理库结合极其顺滑。
Fabric.js：偏向传统的指令式操作。与 React/Vue 集成时，通常需要手动通过 ref 获取实例，并在生命周期钩子中手动调用 canvas.add(), canvas.renderAll() 进行同步。
SVG 生态支持：
Fabric.js：绝对优势。拥有极其成熟的 SVG 双向转换能力（一键解析外部 SVG 为内部对象树，一键导出画布为高保真 SVG），这是很多印刷、设计类业务的刚需。
Konva：SVG 支持较弱，通常需要将 SVG 转换为原生的 Path 数据，或者作为 Image 渲染，难以做到双向无损互转。
总结：场景选型
选择 Fabric.js：如果你在做“在线海报设计”、“图片编辑器”、“T恤/马克杯定制”，且业务强依赖于 SVG 导入导出以及丰富的内置拖拽/缩放交互控件。
选择 Konva：如果你在做“复杂的网络拓扑图”、“流程图编辑器”、“低代码平台画布”、“数据可视化大屏”，且项目重度使用 React/Vue 并需要极致的多图层性能与声明式状态管理。

核心特性与底层原理​

实战代码示例（以 react-konva 为例）​

适用场景​

核心特性与底层原理

实战代码示例（以 react-konva 为例）

适用场景