Konva

原生 HTML5 Canvas API 虽然强大，但在处理复杂交互、动画和对象管理时往往显得笨重且难以维护。Konva 是一个基于 Canvas 的高性能 JavaScript 框架，它引入了场景图（Scene Graph）的概念，让你能够像操作 DOM 元素一样操作图形对象。

无论是构建复杂的在线设计工具、动态数据图表，还是高性能的游戏界面，Konva 都能以极简的代码实现丰富的交互效果，即使面对数千个形状也能保持流畅的帧率。

核心亮点：为何选择 Konva？

1. 面向对象与场景图架构

• 节点化操作：将图形抽象为 Stage、Layer、Group 和 Shape 等对象，支持嵌套结构，逻辑清晰。
• 独立控制：每个形状都可以独立移动、缩放、旋转，无需重绘整个画布。
• 事件监听：原生支持 click、dragstart、mouseover 等事件，让静态图形“活”起来。

2. 极致性能优化

• 高效渲染：内置分层渲染机制，自动优化重绘区域。
• 缓存机制：支持将复杂图形组缓存为图像，大幅提升频繁变换时的性能。
• 海量形状支持：即使应用中包含数千个交互形状，也能保持 60fps 的流畅动画体验。

3. 丰富的功能生态

• 高级特效：内置模糊、阴影、发光等多种滤镜效果。
• 拖放支持：原生支持桌面和移动端的拖拽交互，配置简单。
• 过渡动画：提供平滑的属性过渡动画 API，轻松实现动态效果。

4. 全平台兼容

• 浏览器支持：兼容所有现代桌面和移动浏览器（Chrome, Firefox, Safari, Edge 等）。
• Node.js 服务端渲染：配合 canvas 或 skia-canvas 后端，可在服务器端生成图片，适用于 SSR 或自动化截图场景。
• TypeScript 友好：提供完整的类型定义，提升开发体验与代码安全性。

快速开始

1. 安装

通过 npm 安装（推荐）：

npm install konva --save

或通过 CDN 引入：

<script src="https://unpkg.com/konva@10.0.0-1/konva.min.js"></script>

2. 基础示例

import Konva from 'konva';

// 创建舞台
const stage = new Konva.Stage({
  container: 'container', // DOM 元素 ID
  width: window.innerWidth,
  height: window.innerHeight,
});

// 创建图层
const layer = new Konva.Layer();
stage.add(layer);

// 创建一个矩形
const rect = new Konva.Rect({
  x: 100,
  y: 100,
  width: 100,
  height: 50,
  fill: 'red',
  stroke: 'black',
  strokeWidth: 4,
  draggable: true, // 启用拖拽
});

// 添加到图层
layer.add(rect);

// 添加点击事件
rect.on('click', () => {
  rect.fill(rect.fill() === 'red' ? 'blue' : 'red');
  layer.batchDraw(); // 批量重绘以提升性能
});

// 绘制图层
layer.draw();

3. 模块化与按需导入（减小打包体积）

如果你只使用核心功能，可以按需导入以减小 bundle 大小：

import Konva from 'konva/lib/Core';
import { Rect } from 'konva/lib/shapes/Rect';

// 手动注册形状
Konva.Rect = Rect;

const rect = new Konva.Rect({ ... });

4. Node.js 环境使用

在服务器端生成图片时，需安装后端依赖：

npm install konva canvas

import Konva from 'konva';
import 'konva/canvas-backend'; // 引入 Node 后端

const stage = new Konva.Stage({
  width: 500,
  height: 500,
  // 注意：Node 环境下不需要 container
});

// ... 执行绘图操作 ...

// 导出为图片
const dataURL = stage.toDataURL();

💡 适用场景

• 在线设计工具：如海报编辑器、流程图绘制、白板协作工具。
• 数据可视化：自定义复杂图表、热力图、关系网络图。
• 互动营销页面：具有丰富动画和交互效果的 H5 活动页。
• 简易游戏开发：2D 休闲游戏、益智类游戏界面。
• 图片编辑应用：裁剪、滤镜、贴图等功能的前端实现。

🔧 调试技巧

由于 Canvas 是像素绘制，浏览器开发者工具无法直接查看内部对象。建议安装 konva-dev Chrome 扩展程序，它可以直观地显示 Konva 对象树、属性及层级关系，极大提升调试效率。