Konva

为 Web 构建交互式图形、编辑器和图表。

[](https://www.npmjs.com/package/konva) [](http://badge.fury.io/js/konva) [](https://opencollective.com/konva) [](https://github.com/konvajs/konva/actions/workflows/test-browser.yml) [](https://github.com/konvajs/konva/actions/workflows/test-node.yml) [](https://cdnjs.com/libraries/konva) Konva 是一个 HTML5 Canvas JavaScript 框架，支持高性能动画、过渡、节点嵌套、分层、滤镜、缓存、桌面和移动应用的事件处理等众多功能。 你可以将对象绘制到舞台上，为它们添加事件监听器，独立于其他形状移动、缩放和旋转它们，以支持高性能动画，即使你的应用使用了成千上万个形状也毫无压力。震撼体验，即刻开启。 此仓库最初是 [ericdrowell/KineticJS](https://github.com/ericdrowell/KineticJS) 的 GitHub fork。 # 快速浏览 ``` ``` # 浏览器支持 Konva 适用于所有现代移动端和桌面端浏览器。浏览器需要能够运行 ES2015 规范的 JavaScript 代码。对于较旧的浏览器，你可能需要为缺失的函数提供 polyfill。 目前 `Konva` 无法直接在 IE11 中运行。要使其正常工作，你只需提供一些 polyfill，例如 `Array.prototype.find`、`String.prototype.trimLeft`、`String.prototype.trimRight` 和 `Array.from`。 # 调试 Chrome 检查器只能直接显示 canvas 元素。要查看 Konva 对象及其详细信息，请访问 https://github.com/konvajs/konva-devtool 安装 konva-dev 扩展。 # 加载和安装 Konva Konva 支持 UMD 加载。因此，你可以使用所有可能的方式将该框架加载到你的项目中： ### 通过 CDN 的经典 ` ``` ### 使用 npm 安装： ``` npm install konva --save ``` ``` // The modern way (e.g. an ES6-style import for webpack, parcel) import Konva from 'konva'; ``` #### Typescript 用法 将 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 环境 为了在 nodejs 环境中运行 `konva`，你还需要手动安装 `canvas` 或 `skia-canvas` 包作为渲染后端。 ``` # node-canvas 后端 npm install konva canvas # skia-canvas 后端 npm install konva skia-canvas ``` 然后你可以使用相同的 Konva API，所有的 Konva 演示都将正常运行。你只需要在 stage 中使用 `container` 属性即可。 ``` import Konva from 'konva'; import 'konva/canvas-backend'; // or import 'konva/skia-backend'; const stage = new Konva.Stage({ width: 500, height: 500, }); // then all regular Konva code will work ``` # 更新日志 请查看 [CHANGELOG.md](https://github.com/konvajs/konva/blob/master/CHANGELOG.md)。 ## 构建 Konva 框架 运行 `npm run build` 进行完整构建。该命令将编译所有 typescript 文件，将它们合并为一个 bundle 并运行压缩。 ## 测试 Konva 使用 Mocha 进行测试。 - 如果你只需运行一次测试，请运行 `npm run test`。 - 在开发过程中，使用 `npm start` 非常方便。运行它并访问 [http://localhost:1234/unit-tests.html](http://localhost:1234/unit-tests.html)。监听器会在任何更改时重新构建 bundle。 Konva 拥有数百个测试用例和上千个断言。 Konva 采用 TDD（测试驱动开发），这意味着每一个新功能或 bug 修复都会至少配备一个新测试。 ## 生成文档 运行 `npx gulp api`，它将构建文档文件并将其放置在 `api` 文件夹中。 #### 个人 #### 组织 用你的组织支持这个项目。你的 logo 将显示在这里，并附带指向你网站的链接。[[贡献](https://opencollective.com/konva/contribute)]

标签：2D动画, CMS安全, HTML5 Canvas, JavaScript, MITM代理, 图形渲染, 数据可视化, 自动化攻击