跳到主要内容

为 Web 构建交互式图形

Konva 是一个 2D Canvas 场景图库。绘制图形、处理指针和触摸输入、制作动画并导出,无需编写 Canvas 样板代码。

npm install konva
  • MIT 许可
  • 无依赖
  • 自 2015 年起持续维护

使用你熟悉的框架: Vanilla JS

这是一个真实的 Konva 舞台。拖动图形,或使用控制点调整大小和旋转。

这些团队在生产环境中使用

Meta
Microsoft
Polotno
Labelbox
Zazzle

这个库为你提供什么

Konva 位于 canvas 元素与应用状态之间。

面向对象的场景图

使用舞台、图层、组和图形节点,而不是底层绘图命令。

指针和触摸输入

桌面指针和触摸屏使用同一套事件系统。

动画和补间

逐帧更新图形,或使用补间让数值随时间变化。

节点树和事件

嵌套节点、组合相关图形,并使用事件冒泡或委托。

光栅图导出

按指定像素比,将舞台或节点导出为 Canvas、数据 URL 或 Blob。

图像滤镜

缓存节点,并应用模糊、对比度和灰度等内置滤镜。

框架集成

在 JavaScript、React、Vue、Svelte 或 Angular 中使用 Konva。

拖放和变换

让节点可拖动,再用 Transformer 添加调整大小和旋转控件。

需要更快交付生产级设计编辑器?

设计编辑器在 Canvas 之上还需要文本引擎、字体加载、模板、历史记录和导出流程。Polotno 是基于 Konva 构建的商业 SDK,这些功能都已内置。

了解 Polotno