Konva.js 入门教程

内容纲要

Konva.js - HTML5 2d canvas js library for desktop and mobile applications

官网：https://konvajs.org/

Vue
React
Tutorials
Demos
HTML5 Canvas Shape sele…

1. 什么是 Konva.js？

Konva.js 是一个 2D 画布库，基于 HTML5 的 Canvas API，可以在网页中轻松实现绘制和交互。它为用户提供了简便的方式来处理复杂的 2D 图形，如图形拖拽、缩放、旋转、以及动画效果，广泛应用于网页游戏、数据可视化、互动式设计等领域。

Konva 主要通过两部分来构建画布场景：

Stage：舞台，相当于一个画布。
Layer：图层，舞台上可包含多个图层。

2. 安装 Konva.js

你可以通过以下方式引入 Konva：

通过 CDN 引入

在 HTML 文件中引入 Konva 的 CDN 资源：
通过 npm 安装
如果使用的是模块化开发环境，比如 Vue、React 等，可以通过 npm 安装：
```
npm install konva
```

3. 创建一个基本的 Konva 画布

以下是一个简单的 Konva 实例，绘制了一个矩形并添加到画布上。

<!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@8.3.6/konva.min.js"></script>
</head>
<body>
    <div id="container"></div>

    <script>
        // 创建舞台
        var stage = new Konva.Stage({
            container: 'container',  // 容器 ID
            width: 500,  // 舞台宽度
            height: 400  // 舞台高度
        });

        // 创建图层
        var layer = new Konva.Layer();
        stage.add(layer);

        // 创建一个矩形
        var rect = new Konva.Rect({
            x: 100, // 矩形 X 轴坐标
            y: 100, // 矩形 Y 轴坐标
            width: 200, // 矩形宽度
            height: 100, // 矩形高度
            fill: 'blue', // 填充颜色
            stroke: 'black', // 边框颜色
            strokeWidth: 4 // 边框宽度
        });

        // 将矩形添加到图层
        layer.add(rect);

        // 渲染图层
        layer.draw();
    </script>
</body>
</html>

在这个例子中：

Stage 是舞台，用来放置和管理所有的图形。
Layer 是图层，所有绘制的图形都会被添加到某个图层上。
Rect 是一个矩形对象，它具有 x, y, width, height, fill 等属性。

4. 添加交互

Konva 还提供了很多交互功能，比如拖拽。我们可以为上面的矩形添加拖拽功能。

// 使矩形可拖拽
rect.draggable(true);

// 添加事件监听器，改变矩形颜色
rect.on('mouseover', function () {
    rect.fill('green');
    layer.draw(); // 重新渲染图层
});

rect.on('mouseout', function () {
    rect.fill('blue');
    layer.draw(); // 重新渲染图层
});

现在，矩形可以被拖拽，并且当鼠标悬停在它上面时，会变为绿色，移开后恢复为蓝色。

5. 动画效果

Konva.js 还支持创建简单的动画。我们可以让矩形缓慢移动或者改变大小。

var anim = new Konva.Animation(function (frame) {
    rect.x(rect.x() + Math.sin(frame.time * 0.001) * 2);
}, layer);

// 启动动画
anim.start();

在这个例子中，Konva.Animation 创建了一个动画，每次更新时改变矩形的 X 轴位置，形成一个动态的移动效果。

6. 总结

Konva.js 是一个强大的 2D 图形库，可以方便地处理复杂的图形操作和交互。它在提供 Canvas 原生 API 的基础上，封装了更多实用功能，适合进行复杂图形的开发和交互设计。Konva.js 可以和 Vue、React 等框架结合使用，扩展性很强，非常适合初学者和开发者快速上手绘制图形、处理动画效果等任务。

7. 下一步

下一步可以尝试：

绘制更多形状：如圆形、线条、文本等。
添加复杂交互：如缩放、旋转等。
与框架结合：Konva.js 支持 Vue、React 等前端框架，可以尝试与这些框架结合。

通过这个入门指南，你可以轻松掌握 Konva.js 的基础知识，开始你的 2D 画布开发之旅。

希望你在使用 Konva.js 的过程中，能创造出丰富多彩的图形应用！

Konva.js 入门教程