关于 Konva.js - 开源 HTML5 Canvas JavaScript 框架

关于 Konva.js

Konva.js 是一个开源的 2D HTML5 Canvas JavaScript 框架。它为交互式 Canvas 应用提供了面向对象的 API。它支持形状、动画、事件、拖放、滤镜、序列化和高质量导出。Konva 提供了 React、Vue、Svelte 和 Angular 集成。它采用 MIT 许可证，自 2015 年起一直维护至今。

关键事实


创建时间	2015 年（从 KineticJS 分叉而来，KineticJS 始于 2012 年）
创建者	Anton Lavrenov
许可证	MIT（可免费用于商业和个人用途）
语言	JavaScript 和 TypeScript（内置类型定义）
npm 包	`konva`
GitHub	github.com/konvajs/konva
网站	konvajs.org
社区	Discord，Stack Overflow（`konvajs`）

框架集成

Konva 拥有所有主要 JavaScript 框架的官方绑定：

框架	包	安装
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`

谁在使用 Konva

Konva 被全球各地的团队使用，包括：

Meta — Facebook/Instagram
Microsoft
Labelbox — AI 数据标注平台
Zazzle — 定制产品设计
Polotno — 基于 Konva 构建的设计编辑器 SDK

在其公开的 package.json 中声明使用 Konva 的开源项目：

peaks.js — BBC 的音频波形编辑器
Label Studio — 数据标注平台
Weave.js — Inditex 的协作式 Canvas
DWV — DICOM 医学图像查看器

以及成千上万的其他公司和个人开发者，他们正在构建设计编辑器、标注工具、白板应用、交互式地图、数据可视化、游戏等。

架构

Konva 使用分层节点结构：

Stage（每个画布区域一个）
  └── Layer（每个层是一个独立的 <canvas> 元素）
        └── Group（可选，用于组织形状）
              └── Shape（Rect, Circle, Text, Image, Line 等）

Stage：根容器，附加到 DOM 元素。包含一个或多个 Layer。
Layer：每个 Layer 是一个独立的 <canvas> 元素，拥有自己的场景和命中检测 Canvas。使用多个 Layer 来优化渲染。
Group：用于组织和变换多个 Shape 的可选容器。
Shape：视觉元素 — Rect, Circle, Ellipse, Line, Arrow, Text, Image, Path, Star, Ring, Arc, RegularPolygon, Wedge, Sprite, TextPath, Label 和自定义形状。

核心功能

形状：Rect, Circle, Ellipse, Line, Arrow, Arc, Ring, Wedge, Star, RegularPolygon, Path, Text, TextPath, Image, Sprite, Label 和自定义形状
事件系统：Click、double-click、mouseover、mouseout、touchstart、touchmove、tap、drag 事件，支持冒泡和委托
拖放：内置拖放功能，支持边界、吸附和放置事件
动画：通过 Konva.Animation 实现基于帧的动画，通过 Konva.Tween 实现属性补间，支持 30 多种缓动函数
滤镜：Blur、Brightness、Contrast、Grayscale、HSL、Invert、Noise、Pixelate、Sepia、Threshold 和自定义滤镜
序列化：使用 toJSON() 和 Konva.Node.create() 保存和恢复节点树及其可序列化属性。图像、事件处理器和自定义绘制函数需要单独恢复。
导出：通过 toDataURL() 和 toBlob() 实现高质量图像导出（PNG、JPEG），通过第三方库导出 PDF
选择和变换：内置 Transformer，用于交互式调整大小、旋转和缩放
性能：基于 Layer 的渲染、形状缓存以及用于处理数千个形状的优化 API
跨平台：可在桌面和移动浏览器上运行，并完整支持触摸事件
Node.js：通过 canvas npm 包实现服务端 Canvas 渲染
TypeScript：内置 TypeScript 类型定义

链接

"Made with Konva" 徽章

将此徽章添加到您的项目 README 中，以显示它是使用 Konva 构建的：

[![Made with Konva](https://img.shields.io/badge/Made%20with-Konva-blue)](https://konvajs.org)

关于 Konva.js​

关键事实​

框架集成​

谁在使用 Konva​

架构​

核心功能​

链接​

"Made with Konva" 徽章​