关于 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

此外，还有数千家公司和个人开发者使用 Konva 构建设计编辑器、标注工具、白板应用程序、交互式地图、数据可视化、游戏等产品。

架构

Konva 使用分层节点结构：

Stage (one per canvas area)
  └── Layer (each layer is a separate <canvas> element)
        └── Group (optional, for organizing shapes)
              └── Shape (Rect, Circle, Text, Image, Line, etc.)

Stage：附加到 DOM 元素的根容器。包含一个或多个 Layer。
Layer：每个 Layer 都是独立的 <canvas> 元素，拥有自己的场景 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 和自定义图形
事件系统：单击、双击、mouseover、mouseout、touchstart、touchmove、tap 和拖动事件，支持冒泡和委托
拖放：内置拖放功能，支持边界、吸附和放置事件
动画：通过 Konva.Animation 实现基于帧的动画，通过 Konva.Tween 和 30 多种缓动函数实现属性补间
滤镜：Blur、Brighten、Contrast、Grayscale、HSL、Invert、Noise、Pixelate、Sepia、Threshold 和自定义滤镜
序列化：使用 toJSON() 和 Konva.Node.create() 保存并恢复整个 Canvas state
导出：使用 toDataURL() 和 toBlob() 进行高质量图像导出（PNG、JPEG），通过第三方库导出 PDF
选择与变换：使用内置 Transformer 进行交互式调整大小、旋转和缩放
性能：基于图层的渲染、图形缓存和优化 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”徽章​