通过 Konva 开始使用 Svelte 和 Canvas

如何在 Svelte 中使用 Canvas？

svelte-konva 是一个使用 Svelte 绘制复杂 Canvas 图形的 JavaScript 库。它为 Konva 框架 提供声明式响应式绑定。所有 svelte-konva 组件都对应同名的 Konva 组件。Konva 对象的所有可用参数都可以作为单独的 props 添加到对应的 svalte-konva 组件中。

使用 svelte-konva 前，需要基本了解 Konva。可以参阅 Konva 概览。

如果你需要完整的设计编辑器，可以使用 Polotno。它是由 Konva 维护者基于 Konva 开发的商业设计编辑器 SDK，提供模板、文本编辑和导出功能，并附有适用于 Svelte 的不依赖框架的集成指南。

快速开始

1 通过 npm 安装

npm i svelte-konva konva

2 导入并使用 svelte-konva 组件

<script>
  import { Stage, Layer, Rect } from 'svelte-konva';
</script>

<Stage width={window.innerWidth} height={window.innerHeight}>
  <Layer>
    <Rect x={100} y={100} width={400} height={200} fill="blue" />
  </Layer>
</Stage>