使用 Svelte 和 Konva 开始使用 Canvas

如何在 Svelte 中使用 Canvas？

svelte-konva 是一个用于使用 Svelte 绘制复杂 Canvas 图形的 JavaScript 库。

GitHub: https://github.com/konvajs/svelte-konva

它提供了对 Konva 框架 的声明式和响应式绑定。

所有 svelte-konva 组件对应于同名的 Konva 组件。所有可用于 Konva 对象的参数都可以作为 config 属性添加到相应的 svelte-konva 组件中。

要获取更多关于 Konva 的信息，可以阅读 Konva 概述。

快速开始

1 通过 npm 安装

npm i svelte-konva konva

2 导入并使用 svelte-konva 组件

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

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