本篇文章给大家谈谈camvases，以及camvanmay0203的知识点，希望对各位有所帮助，不要忘了收藏本站喔。
文章详情介绍：
Svelvet v8.0发布！Svelte前端生态又一王牌？
大家好，很高兴又见面了，我是”高级前端进阶”，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！
高级前端进阶
今天给大家带来的主题是Svelvet，即 Svelte 开发生态轻量级的组件库，用于构建动态的、可定制的节点图。话不多说，直接进入正题！
前言
Svelte 是最流行的基于 JavaScript 的前端框架之一。 尽管它是在 2016 年左右推出的，但它与 React、Vue.js 等前端框架相比仍然被认为是前端领域中一个相对较新的存在。
但 Svelte 友好的语法和出色的性能吸引了一众的开发者，而且 Svelte 的开发生态也在逐步完善中。Svelte 社区通过不断引入新的、有用的工具来努力保持 Svelte 前端框架的相关性，以弥合与其他前端开发框架之间的差距。 而本文的主角 Svelvet 就允许在 Svelte 项目中轻松创建华丽的、可定制的流程图。
1.什么是 Svelvet
Svelvet 是一个轻量级组件库，用于在 Svelte 中渲染基于节点的交互式流程图。 该库使用基于图形的编辑器来转换、分析和可视化数据。Svelvet 还利用 D3.js 缩放和选择组件在图形上提供平滑的缩放和平移行为。
根据 Svelvet 的创建者说法，该库的构建是为了满足类似于 React flow 的图表工具的需求，React flow 是 Svelte 中基于节点的 React 图形渲染器。 因此，Svelvet 具有与 React Flow 类似的功能和特性，例如：使用方便、易于定制、互动性、快速渲染等等。
Svelvet 是一个轻量级的组件库，用于构建动态的、可定制的节点图
Svelvet 画布（Canvases）通过将组（Groups）、节点（Nodes）和其他组件作为子组件传递给 Svelvet 包装器而在结构上组成标准 Svelte 语法，适用于条件渲染和迭代以将节点绘制在画布上。
可以通过将 props 传递给 Node 组件来配置默认节点，但是在 Node 组件中包装自定义组件或 HTML 元素可以提供更大的灵活性和功能。
Svelvet 的边（Edges），即锚点之间的连接，可以提前或动态指定，并且是完全可定制的。Svelvet 的默认画布样式可以通过特定 props 配置，甚至可以指定主题（浅色或深色）配置。开发者还可以在画布上放置任意 HTML 元素，这对于标注和注释（Annotations）特别有用。
目前 Svelvet 在 Github 上通过 MIT 协议开源，有超过 1.9k 的 star、NPM 周平均下载量 2k，是一个值得关注的前端开源项目。
2.Svelvet 组件库优秀特性
Svelvet 的典型特征包括：
易于使用：要开始使用 Svelvet，只需要节点和边的数据。
交互式：选择节点以将其拖过图形时，界面优雅流畅。
可定制：完全可定制的边缘、节点、背景和组件
可靠：Svelvet 是用 TypeScript 编写的，并使用 Vitest、Playwright 和 Svelte 测试库进行了测试，而且积极维护
特别是随着 Svelvet v8.0的发布，又添加了诸多特性补全了 Svelvet 在高级功能上的缺失。
抽屉组件：允许用户可视化 UI 并与之交互以创建和自定义 Svelvet 组件，同时组件（如节点、边和锚点）样式是完全可配置的，只需要使用 props 来更改可视化和交互行为。
抽屉组件
<script>
import { Drawer } from '$lib';
</script>
<Drawer height={1000}></Drawer>
旋钮组件：是 Svelvet 数据流的一部分，还有 Slider、Radio Group 和 Color Picker 组件。Knob 是一个灵活且可访问的组件，可直接与 Svelvet 的自定义输入和输出存储进行交互，比如通过：键盘输入、箭头键、滚动以及单击和拖动来控制。 用户还可以选择自定义颜色、输出值范围、旋转角度范围以及旋钮组件的许多其他属性。
旋钮组件
因为篇幅问题，关于Svelvet的其他特性本文不再深入展开，感兴趣的可以在文末的参考资料中继续阅读。
3.使用 Svelvet3.1 实例化 Svelvet 项目
首先可以使用以下命令通过 npm 或 Yarn 在项目中安装 Svelvet：
npm install svelvet
// yarn add svelvet
如果还没有设置项目，可以通过如下命令实例化一个 Svelte 项目，如下所示：
npx degit sveltejs/template
接下来，可以通过在项目文件夹中任何组件的脚本部分导入一个 Svelvet 组件，将 Svelvet 集成到 Svelte 项目中：
import Svelvet from "svelvet";
Svelvet 组件接受多个属性，但 nodes 和 edges 属性是组件的实际构建块。组件的 nodes 和 edges 根据指定值渲染图形。下面是 Svelvet 组件的基本用法：
<script>
import Svelvet from 'svelvet';
const initialNodes = [
{
id: 1,
position: { x: 350, y: 50 },
data: { label: 'input Node' },
width: 175,
height: 40,
bgColor: 'white'
},
{
id: 2,
position: { x: 350, y: 150 },
data: { label: 'Default Node' },
width: 175,
height: 40,
bgColor: 'white'
}
];
const initialEdges = [
{ id: 'e1-2', source: 1, target: 2, type: 'default', label: 'label'},
];
</script>
<Svelvet nodes={initialNodes} edges={initialEdges} background />
如代码所见，对象的 initialNodes 和 initialEdges 数组分别被传递给 nodes 和 edges 。 Svelvet 根据每个数组中对象属性的值来渲染图形。上面的代码在浏览器中的渲染结果如下：
3.2 使用 Svelvet 构建流程图
接下来带着大家一起来使用 Svelvet 构建流程图。
第一步，在 Svelte 项目中创建一个新组件或改用 App.svelte 主组件。 接下来，在脚本部分导入 Svelte 组件，创建两个对象数组，并根据喜好调整属性。
<script>
Import Svelvet from ‘svelvet’
//nodes array
const nodeArr = [
{
id: 1,
position: { x: 300, y: 20 },
data: { label: "Input Node" },
width: 175,
height: 40,
bgColor: "#127369"
},
{
id: 2,
position: { x: 80, y: 150 },
data: { label: "bezier" },
width: 70,
height: 40,
bgColor: "#8AA6A3"
},
{
id: 3,
position: { x: 282, y: 190 },
data: { label: "straight" },
width: 70,
height: 40,
bgColor: "#F2BE22"
},
{
id: 4,
position: { x: 494, y: 150 },
data: { label: "animated" },
width: 140,
height: 40,
bgColor: "#BFBFBF"
},
{
id: 5,
position: { x: 120, y: 225 },
data: { label: "no handle" },
width: 80,
height: 40,
bgColor: "#03A678"
},
{
id: 6,
position: { x: 390, y: 225 },
data: { label: "arrow handle" },
width: 100,
height: 40,
bgColor: "#F27405"
}
];
//edges array
const edgeArr = [
{
id: "e1-2",
source: 1,
target: 2,
type: "bezier",
label: "default edge"
},
{
id: "e1-3",
source: 1,
target: 3,
type: "straight",
label: "straight edge"
},
{
id: "e1-4",
source: 1,
target: 4,
type: "bezier",
animate: true,
label: "animated edge"
},
{
id: "e1-5",
source: 1,
target: 5,
type: "bezier",
noHandle: true,
label: "noHandle edge"
},
{
id: "e1-6",
source: 1,
target: 6,
type: "bezier",
arrow: true,
label: "arrow edge"
}
];
</script>
接下来，将 Svelvet 组件添加到组件的模板部分，并将 nodeArr 数组传递给 nodes 属性，将 edgesArr 数组传递给 edges 属性，如下所示：
<Svelvet nodes={nodeArr} edges={edgeArr} />
现在，保存代码并通过运行以下命令启动开发服务器：
npm run dev
上面的例子中你会注意到很难感知 Svelvet 渲染器的边界，并且节点通常会重叠超出边界，这是由于渲染器的默认白色背景导致的。要解决此问题并使渲染器不那么模糊，可以向组件添加背景 props，如下所示：
<Svelvet nodes={nodeArr} edges={edgeArr} background />
background 属性将为渲染器添加点状背景，从而使渲染器的大小更容易感知。
还可以通过向组件添加 width 和 height 属性来增加渲染器的大小：
<Svelvet nodes={nodeArr} edges={edgeArr} background width={900} height={800} />
Svelvet 提供了开箱即用的交互式，用户可以在图中选择和移动节点，以及缩放和平移。
4.本文总结
本文重点研究了什么是 Svelvet ，同时如何使用 Svelvet 构建流程图。
Svelvet 目前仍处于起步阶段，缺乏其对标的 React flow 提供的诸多特性。 Svelvet 团队也承诺在未来通过集成额外的自定义、测试和错误处理功能来使 Svelvet 更加健壮，功能更加强大。
但是值得一提的是，Svelvet 的基本功能已经可以投入生产，用户可以在项目中使用它，成为 Svelte 中构建精美流程图的优秀解决方案。
因为篇幅有限，关于Svelvet的更多内容文章并没有过多展开，如果有兴趣，可以在我的主页继续阅读，同时文末的参考资料提供了大量优秀文档以供学习。最后，欢迎大家点赞、评论、转发、收藏！
参考资料
https://svelvet.mintlify.app/introduction
https://www.npmjs.com/package/svelvet
https://github.com/open-source-labs/Svelvet/tree/a70db8810adffbe5c2f0c6bb931f80c1153a342c
https://levelup.gitconnected.com/svelvet-2-0-c6b2059734a6