Konva 入门 — HTML5 Canvas 2D 框架
Konva 是什么？
Konva 是一个用于创建交互式 2D 图形的 HTML5 Canvas JavaScript 框架。它在 Canvas 之上提供对象模型。
你可以创建图形、组合图形、添加事件监听器、拖动图形和播放动画。Konva 负责渲染、命中检测和状态管理。
Konva 支持桌面设备和移动设备。它可以高效渲染数千个图形，并为 React、Vue、Svelte 和 Angular 提供官方集成。
快速示例
// Create a stage (container for all layers)
const stage = new Konva.Stage({
container: 'container',
width: 500,
height: 400,
});
// Create a layer
const layer = new Konva.Layer();
stage.add(layer);
// Create a draggable rectangle
const rect = new Konva.Rect({
x: 50,
y: 50,
width: 100,
height: 80,
fill: 'cornflowerblue',
shadowBlur: 5,
cornerRadius: 4,
draggable: true,
});
layer.add(rect);
// Add event listener
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()保存整个 Canvas state。使用Konva.Node.create(json)恢复 state。 - 滤镜和效果 — 可以对单个图形应用模糊、亮度、对比度、灰度和像素化等效果。
- 高性能 — Konva 可以处理数千个图形。请参阅性能建议和压力测试示例。
可以创建什么？
开发者使用 Konva 创建设计编辑器、绘图应用、标注工具、交互式地图和数据可视化。下面是一些示例：
- Canvas 设计编辑器 — 类似 Canva 的设计工具
- 自由绘图应用 — 白板和自由绘图
- 图像标注 — 机器学习标注工具
- 座位预订图 — 交互式座位预订
- 交互式建筑地图 — 楼层平面图可视化
- 连接对象 — 图表和流程图编辑器