Konva

Konva 是一个 HTML5 Canvas JavaScript 框架，它支持桌面和移动应用程序的高性能动画、过渡、节点嵌套、分层、过滤、缓存、事件处理等等。

即使您的应用程序使用数千个形状，您也可以将事物绘制到舞台上、向它们添加事件侦听器、移动它们、缩放它们以及独立于其他形状旋转它们以支持高性能动画。热气腾腾的，带着令人敬畏的一面。

这个存储库最初是ericdrowell/KineticJS的 GitHub 分支。

• 访问： 主页并在Twitter上关注
• 发现： 教程、API 文档
• 帮助： StackOverflow，不和谐聊天

快速查看

<script src="https://unpkg.com/konva@8/konva.min.js"></script>
<div id="container"></div>
<script>
  var stage = new Konva.Stage({
    container: 'container',
    width: window.innerWidth,
    height: window.innerHeight,
  });

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

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

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

浏览器支持

Konva 适用于所有现代移动和桌面浏览器。浏览器需要能够运行 ES2015 规范中的 javascript 代码。对于较旧的浏览器，您可能需要 polyfills 来弥补缺失的功能。

目前 Konva不能直接在 IE11 中工作。要使其工作，您只需要提供一些 polyfill，例如 Array.prototype.find, String.prototype.trimLeft, String.prototype.trimRight, Array.from。

加载和安装 Konva

Konva 支持 UMD 加载。因此，您可以使用所有可能的变体将框架加载到您的项目中：

<script>通过CDN 中的经典标签加载 Konva ：

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

使用 npm 安装：

npm install konva --save

// The modern way (e.g. an ES6-style import for webpack, parcel)
import Konva from 'konva';

打字稿使用

将 DOM 定义添加到您的 tsconfig.json：

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

3 最小捆绑

import Konva from 'konva/lib/Core';
// Now you have a Konva object with Stage, Layer, FastLayer, Group, Shape and some additional utils function.
// Also core currently already have support for drag&drop and animations.
// BUT there are no shapes (rect, circle, etc), no filters.

// but you can simply add anything you need:
import { Rect } from 'konva/lib/shapes/Rect';
// importing a shape will automatically inject it into Konva object

var rect1 = new Rect();
// or:
var shape = new Konva.Rect();

// for filters you can use this:
import { Blur } from 'konva/lib/filters/Blur';

4 NodeJS 环境

为了 konva在 nodejs 环境中运行，您还需要 canvas手动安装包。Konva 将把它用于 2d 画布 API。

npm install konva canvas

然后您可以使用相同的 Konva API，所有 Konva 演示都可以正常工作。你只是不需要 container在你的舞台上使用属性。

import Konva from 'konva';

const stage = new Konva.Stage({
  width: 500,
  height: 500,
});
// then all regular Konva code will work

CommonJS 模块

默认情况下 Konva作为 ES 模块交付。某些环境可能会自动采用 CommonJS 版本的 Konva. 如果它不适合您，请尝试 cmj明确使用版本：

const Konva = require('konva/cmj').default;