简介
melchior-sylvester 是一个帮助你快速实现 SVG 标记连线的 JavaScript 库。它有一个简单的 API，可以方便地生成 SVG 的路径，支持贝塞尔曲线、直线和折线，还支持箭头标记，满足了多种需求。
安装
你可以在你的项目目录下使用 npm 安装 melchior-sylvester：
npm install melchior-sylvester --save
示例
我们先来看一个基础的例子，把两个圆用直线连起来，这里我们需要用到 Sylvester.Path 和 Sylvester.Line。
-- -------------------- ---- ------- ------ - ----- ---- - ---- --------------------- ----- ---- - --- ------- ----- ---- - - -- ---- -- --- -- ----- -- - - -- ---- -- --- -- ----- ---- - --- ---------- ---- --------------- ----- --- - -------------------
这里我们先创建了一个 Path 对象，然后创建了一个起点到终点的 Line 对象，将其添加到 Path 中，最后我们调用 toSVGString() 方法生成对应的 SVG 标记代码。
API
Sylvester.Path
add(segment: Sylvester.Segment): Sylvester.Path：向路径添加一个线段对象。toSVGString(): string：返回 SVG 标记代码。
Sylvester.Segment
toSVGString(): string：返回 SVG 标记代码。
Sylvester.Line
toSVGString(): string：返回 SVG 标记代码。
Sylvester.NumericPathSegment
toSVGString(): string：返回 SVG 标记代码。
高级功能
下面我们来看看这个库的高级功能，如何使用贝塞尔曲线。
-- -------------------- ---- ------- ------ - ----- ----------- - ---- --------------------- ----- ---- - --- ------- ----- ---- - - -- ---- -- --- -- ----- -- - - -- ---- -- --- -- ----- ------ - --- ----------------- - -- ---- -- -- -- - -- ---- -- -- -- ---- ----------------- ----- --- - -------------------
实现了一条起点到终点的三次贝塞尔曲线，这里我们需要用到 Sylvester.CubicBezier。除了三次贝塞尔曲线，这个库还实现了二次贝塞尔曲线，具体可以查找文档。
总结
本文介绍了 npm 包 melchior-sylvester 的使用方法，主要包含了基础的使用方法和一些高级功能，并提供了示例代码帮助你了解更多。在项目中使用 melchior-sylvester 可以帮助你解决各种连线问题，节省一定时间和精力，建议大家使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600553ef81e8991b448d1444