简介
Konva.js 是一个用于创建 2D 图形的高性能 JavaScript 库，专注于提供丰富的 API 和灵活的图层管理。它适用于数据可视化、游戏开发和其他需要复杂图形和动画的应用场景。本文将介绍 Konva.js 的基本使用方法，包括初始化、绘制基本图形、处理事件和动画等。
安装与引入
安装
可以通过 npm 安装 Konva.js：
npm install konva
引入
在 HTML 文件中引入 Konva.js：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Konva.js Example</title><script src="https://cdn.jsdelivr.net/npm/konva@latest/konva.min.js"></script>
</head>
<body><div id="container"></div><script src="app.js"></script>
</body>
</html>
创建舞台和图层
Konva.js 使用 Stage 和 Layer 对象来管理画布和图形元素。一个 Stage 可以包含多个 Layer，每个 Layer 可以包含多个形状。
// 创建舞台
const stage = new Konva.Stage({container: 'container', // 容器 IDwidth: window.innerWidth,height: window.innerHeight
});// 创建图层
const layer = new Konva.Layer();
stage.add(layer);
绘制基本图形
Konva.js 支持多种基本图形的绘制，包括矩形、圆形、线条等。以下是一些常见图形的绘制示例：
矩形
const rect = new Konva.Rect({x: 50,y: 50,width: 100,height: 100,fill: 'red',stroke: 'black',strokeWidth: 2
});
layer.add(rect);
圆形
const circle = new Konva.Circle({x: 200,y: 100,radius: 50,fill: 'blue',stroke: 'black',strokeWidth: 2
});
layer.add(circle);
线条
const line = new Konva.Line({points: [300, 150, 400, 150, 450, 200],stroke: 'green',strokeWidth: 2,lineCap: 'round',lineJoin: 'round'
});
layer.add(line);
更新图层
所有图形添加到图层后，需要调用 layer.draw() 来更新图层：
layer.draw();
文本
Konva.js 还可以在画布上绘制文本，并支持多种字体样式和效果：
const text = new Konva.Text({x: 50,y: 200,text: 'Hello Konva.js',fontSize: 30,fontFamily: 'Calibri',fill: 'black'
});
layer.add(text);
layer.draw();
图像
Konva.js 支持加载和操作图像：
const imageObj = new Image();
imageObj.onload = function() {const img = new Konva.Image({x: 300,y: 200,image: imageObj,width: 100,height: 100});layer.add(img);layer.draw();
};
imageObj.src = 'path/to/image.jpg';
事件处理
Konva.js 提供了丰富的事件处理机制，可以监听对象的各种事件，如点击、拖动、鼠标悬停等：
rect.on('click', function() {alert('矩形被点击');
});circle.on('mouseover', function() {circle.fill('yellow');layer.draw();
});
circle.on('mouseout', function() {circle.fill('blue');layer.draw();
});
动画
Konva.js 支持创建复杂的动画效果：
const anim = new Konva.Animation(function(frame) {rect.rotate(1);
}, layer);anim.start();
保存与导出
舞台的内容可以轻松导出为图像文件或 JSON 数据：
导出为图像
const dataURL = stage.toDataURL({mimeType: 'image/png',quality: 0.8
});
// 将 dataURL 用于图像下载或显示
导出为 JSON
const json = stage.toJSON();
// 将 JSON 数据保存或传递到服务器
总结
Konva.js 是一个功能强大且灵活的 2D 图形库，适用于多种复杂图形和动画场景。通过本文的介绍，您应该已经掌握了 Konva.js 的基本使用方法，包括创建舞台和图层、绘制基本图形、处理事件和动画等。无论是数据可视化、游戏开发还是其他需要高性能图形处理的应用，Konva.js 都是一个值得推荐的选择。
