开始使用 Konva — HTML5 Canvas 2D 框架
什么是 Konva？
Konva 是一个用于构建交互式 2D 图形的 HTML5 Canvas JavaScript 框架。它在 canvas 之上提供了对象模型 — 你创建形状、分组、添加事件监听器、拖动它们、动画化它们，框架负责渲染、命中检测和状态管理。
Konva 适用于桌面和移动端，支持数千个形状的高性能渲染，并且拥有 React、Vue、Svelte 和 Angular 的官方集成。
快速示例
// 创建一个舞台（所有层的容器）
const stage = new Konva.Stage({
container: 'container',
width: 500,
height: 400,
});
// 创建一个层
const layer = new Konva.Layer();
stage.add(layer);
// 创建一个可拖动的矩形
const rect = new Konva.Rect({
x: 50,
y: 50,
width: 100,
height: 80,
fill: 'cornflowerblue',
shadowBlur: 5,
cornerRadius: 4,
draggable: true,
});
layer.add(rect);
// 添加事件监听器
rect.on('click tap', () => {
rect.fill(Konva.Util.getRandomColor());
});
就是这样 — 一个点击后改变颜色的可拖动矩形。没有样板代码，没有渲染循环。
安装 Konva
如果您使用的是包管理器：
npm install konva
或者直接使用脚本标签：
<script src="https://unpkg.com/konva@10/konva.min.js"></script>
或者从 CDN 下载：
在你的框架中使用 Konva
Konva 拥有所有主流框架的官方绑定：
| 框架 | 包 | 安装 |
|---|---|---|
| React | react-konva | npm install react-konva konva |
| Vue | vue-konva | npm install vue-konva konva |
| Svelte | svelte-konva | npm install svelte-konva konva |
| Angular | ng2-konva | npm install ng2-konva konva |
开始使用你的框架：React · Vue · Svelte · Angular
为什么选择 Konva？
- 形状即对象 — 创建矩形、圆形、线条、文本、图像、路径等。每个形状都是一个可以独立操作的 JavaScript 对象
- 完整的事件系统 —
click、dblclick、mouseover、mouseout、touchstart、dragstart、dragend等。事件会像 DOM 一样，从形状冒泡经过组和层 - 拖放 — 在任意形状上设置
draggable: true。添加拖动边界、吸附和放置事件 - 调整大小和旋转 — 内置的
Transformer组件可为任意形状添加调整大小和旋转控制柄 - 多层渲染 — 每个 Layer 都是一个独立的
<canvas>元素。交互式形状发生变化时，静态背景不会重新渲染 - 序列化 — 使用
stage.toJSON()保存节点树及其可序列化属性。使用Konva.Node.create(json)恢复它们。图像、事件处理器和自定义绘制函数需要单独恢复 - 滤镜和效果 — 模糊、提亮、对比度、灰度、像素化等 — 可按形状应用
- 高性能 — 可处理数千个形状。请参阅性能提示和压力测试演示
你可以构建什么？
开发者使用 Konva 构建设计编辑器、绘图应用、注释工具、交互式地图、数据可视化等。以下是一些示例：
- Canvas 设计编辑器 — Canva 风格的设计工具
- 自由绘图应用 — 白板 / 手绘绘图
- 图像注释 — 机器学习标注工具
- 座位预订地图 — 交互式座位预订
- 交互式建筑地图 — 平面图可视化
- 连接对象 — 图表 / 流程图构建器