我的笔记

高频知识点

konva

konva

canvas 在线图形编辑工具

Konva.js 是一个基于 HTML5 Canvas 的 JavaScript 库，专为桌面和移动应用程序提供高性能的 2D 绘图和动画功能。它通过分层架构简化了复杂图形的管理，并提供了直观的事件处理机制。

1. GitHub 链接

2. 主要功能

（1）强大的绘图能力

  • 支持多种图形（矩形、圆形、线条、文本、图像等）。

  • 提供高级效果（阴影、渐变、滤镜、旋转、缩放等）。

  • 支持复杂路径绘制和贝塞尔曲线。

（2）事件处理

  • 为图形元素绑定鼠标/触摸事件（点击、拖拽、悬停等）。

  • 支持事件冒泡和委托。

（3）动画系统

  • 内置 Tween 动画库，支持关键帧动画。

  • 可自定义动画函数和缓动效果。

（4）分层架构

  • 通过 Stage → Layer → Group → Shape 结构管理复杂场景。

  • 支持独立渲染和交互控制。

（5）性能优化

  • 虚拟渲染和离屏缓存。

  • 自动批处理渲染更新。

（6）交互功能

  • 拖拽、缩放、旋转操作。

  • 碰撞检测和选择工具。

3. 使用案例

（1）数据可视化

  • 构建复杂的图表（如流程图、网络图）。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

// 创建舞台和层
const stage = new Konva.Stage({
  container: 'container',
  width: 800,
  height: 600
});
const layer = new Konva.Layer();
stage.add(layer);

// 添加圆形
const circle = new Konva.Circle({
  x: 100,
  y: 100,
  radius: 50,
  fill: 'blue',
  stroke: 'black',
  strokeWidth: 4
});
layer.add(circle);
layer.draw();

// 添加点击事件
circle.on('click', () => {
  circle.fill('red');
  layer.draw();
});

（2）游戏开发

  • 实现 2D 游戏角色移动、碰撞检测。

  • 支持帧动画和物理效果。

（3）交互设计工具

  • 在线绘图工具（如流程图编辑器）。

  • 支持元素拖拽、变形和分组操作。

（4）教育应用

  • 动态数学可视化（函数图像、几何图形）。

  • 物理模拟和交互式学习界面。

4. 注意事项

（1）性能考虑

  • 大量元素（超过 10,000 个）时需使用 Konva.FastLayer 提升性能。

  • 避免频繁调用 layer.draw()，可使用 batchDraw() 批量更新。

（2）事件绑定

  • 事件绑定在元素而非 Canvas 本身，需确保元素可见且层级正确。

（3）移动设备适配

  • 需处理触摸事件（如 touchstart、touchmove）。

  • 使用 stage.content.offset() 替代 getClientRects() 获取位置。

（4）兼容性

  • 依赖 HTML5 Canvas，不支持 IE8 及以下版本。

（5）学习曲线

  • 需理解分层架构（Stage → Layer → Group → Shape）。

  • 动画和事件处理机制与原生 Canvas 差异较大。

5. 案例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<script src="https://cdn.jsdelivr.net/npm/konva@8.4.2/konva.min.js"></script>

<div id="container"></div>
<script>
  const stage = new Konva.Stage({
    container: 'container',
    width: 500,
    height: 300
  });
  const layer = new Konva.Layer();
  stage.add(layer);

  // 添加图形并监听事件
  const rect = new Konva.Rect({
    x: 50,
    y: 50,
    width: 100,
    height: 50,
    fill: 'green'
  });
  rect.on('mouseover', () => rect.fill('red'));
  rect.on('mouseout', () => rect.fill('green'));

  layer.add(rect);
  layer.draw();
</script>

6. 相关资源

总结

Konva.js 适合需要高性能 2D 绘图、复杂交互和动画的场景，尤其在数据可视化、游戏开发和教育领域表现出色。

它通过简化 Canvas API 降低了开发成本，但在处理超大规模场景时需注意性能优化。