岩石教程

Konva.js

2024-06-25 17:11:16 217
Konva.js 是一个功能强大的 HTML5 Canvas JavaScript 框架，它通过为桌面和移动应用程序提供高性能动画、过渡、节点嵌套、分层、过滤、缓存和事件处理来增强 2D 上下文。这使其成为希望创建交互式动态 Web 应用程序的开发人员的理想选择。

2. 特点

  • 高性能动画: 支持高性能的动画和过渡效果，适用于数千个形状的应用。
  • 事件处理: 提供复杂的事件处理，包括拖放、鼠标事件等。
  • 跨平台支持: 适用于现代的桌面和移动设备浏览器。
  • 对象导向API: 支持多种形状和节点嵌套、分组。
  • 图层管理: 支持图层管理和优化绘图性能。
  • 广泛的图形支持: 提供多种形状和过滤器，包括矩形、圆形、文本等。
  • 与现代框架集成: 支持与React、Vue、Svelte等现代前端框架的集成。

2. 使用场景

Konva.js适用于创建各种交互式和动态的应用场景，如：

  • 绘图应用
  • 数据可视化
  • 游戏开发
  • 图形编辑器
  • 数据仪表板
  • 教育和培训工具

安装方式

使用CDN

<script src="https://unpkg.com/konva@9/konva.min.js"></script>

使用npm

npm install konva --save

然后在JavaScript中引入：

import Konva from 'konva';

TypeScript支持

在tsconfig.json中添加DOM定义：

{
  "compilerOptions": {
    "lib": [
      "es6",
      "dom"
    ]
  }
}

使用示例

以下是一个基本的Konva.js使用示例，创建一个可拖动的矩形：

<div id="container"></div>
<script>
  var stage = new Konva.Stage({
    container: 'container',
    width: window.innerWidth,
    height: window.innerHeight,
  });

  var layer = new Konva.Layer();
  stage.add(layer);

  var box = new Konva.Rect({
    x: 50,
    y: 50,
    width: 100,
    height: 50,
    fill: '#00D2FF',
    stroke: 'black',
    strokeWidth: 4,
    draggable: true,
  });
  layer.add(box);

  box.on('mouseover', function () {
    document.body.style.cursor = 'pointer';
  });
  box.on('mouseout', function () {
    document.body.style.cursor = 'default';
  });
</script>

常用API介绍

创建舞台和图层

var stage = new Konva.Stage({
  container: 'container',
  width: 500,
  height: 500,
});

var layer = new Konva.Layer();
stage.add(layer);

创建形状

var circle = new Konva.Circle({
  x: stage.width() / 2,
  y: stage.height() / 2,
  radius: 70,
  fill: 'red',
  stroke: 'black',
  strokeWidth: 4,
});
layer.add(circle);

事件处理

circle.on('click', function () {
  alert('Circle clicked!');
});

动画

var amplitude = 100;
var period = 2000;
var centerX = stage.width() / 2;

var anim = new Konva.Animation(function (frame) {
  circle.x(amplitude * Math.sin((frame.time * 2 * Math.PI) / period) + centerX);
}, layer);

anim.start();

导出图像

var dataURL = stage.toDataURL({ pixelRatio: 3 });

高级用法

与React集成

Konva.js可以与React集成，通过react-konva库实现。安装依赖：

npm install react-konva konva

在React组件中使用：

import React from 'react';
import { Stage, Layer, Rect } from 'react-konva';

const App = () => (
  <Stage width={window.innerWidth} height={window.innerHeight}>
    <Layer>
      <Rect
        x={20}
        y={20}
        width={100}
        height={100}
        fill="red"
        draggable
      />
    </Layer>
  </Stage>
);

export default App;

官方资料