Path
创建路径。可以画出任意形状的图形， 了解 绘图命令。
关键属性
path: IPathString ｜ IPathCommandData
路径数据，支持 SVG 与 Cavnas 绘图命令。
可通过 pen 画笔 快速绘制路径。
windingRule: WindingRule
路径缠绕规则， 默认为非零缠绕 nonzero。
两条以上路径重合时的填充算法，可产生相加、相交、减去的效果。
type WindingRule: = "nonzero" | "evenodd"只读属性
pen: PathCreator
画笔，可以像 canvas 一样快速绘制路径，并提供了一些新的方法。
画笔实际上修改的是元素 path 属性数据。
注意事项
为了节省创建 pen 实例的数量，全局共享的是同一只画笔，访问 pen 属性时自动装载当前元素的 path，
所以 pen 要紧跟着元素，一次把内容绘制完成，如：rect.pen.moveTo(100,100).lineTo(200,200)。
绘制路径
与 canvas 绘制路径的方法一致， 涉及到角度单位，统一使用度数 -180 ～ 180（0 ～
clearPath ( )
用于清空当前的路径数据（Pen 只清空最近一次 setStyle() 之后的路径数据，之前的路径不受影响），是 beginPath() 的别名，更具语义化一些。
moveTo ( )
moveTo(x, y)
起点: 将起始点移动到 (x, y) 坐标。
lineTo ( )
lineTo(x, y)
画直线: 从上一个点连接到 (x, y) 坐标。
bezierCurveTo ( )
bezierCurveTo(x1, y1, x2, y2, x, y)
画三次贝赛尔曲线: 从上一个点连接到 (x, y) 坐标。(x1, y1)、(x2, y2)为第一个和第二个控制点。
quadraticCurveTo ( )
quadraticCurveTo(x1, y1, x, y)
画二次贝赛尔曲线: 从上一个点连接到 (x, y) 坐标。(x1, y1) 为控制点。
rect ( )
rect(x, y, width, height)
画矩形。
roundRect ( )
roundRect(x, y, width, height, cornerRadius: number | number[])
画圆角矩形。
ellipse ( )
ellipse(x, y, radiusX, radiusY, rotation?, startAngle?, endAngle?, anticlockwise?: boolean)
画椭圆、椭圆弧: 圆心在（x, y）坐标，半径为 (radiusX, radiusY)，按 anticlockwise（默认为顺时针） 方向，从起始角度 startAngle 绘制到结束角度 endAngle, 若省略角度，将创建椭圆。
arc ( )
arc(x, y, radius, startAngle?, endAngle?, anticlockwise?: boolean)
画圆、圆弧: 圆心在（x, y）坐标，半径为 radius，按 anticlockwise（默认为顺时针） 方向，从起始角度 startAngle 绘制到结束角度 endAngle，若省略角度，将创建圆。
arcTo ( )
arcTo(x1, y1, x2, y2, radius)
画切线圆弧: 在控制点 1 (x1, y1) 与上一个点 、控制点 1 (x1, y1) 与控制点 2 (x2, y2)构成的两条切线之间画出半径为 radius 的圆弧。
closePath ( )
闭合路径。
新增方法
drawEllipse ( ) new
drawEllipse(x, y, radiusX, radiusY, rotation?, startAngle?, endAngle?, anticlockwise?)
先 moveTo 至椭圆起始点，再 ellipse()，使之断开与前面路径的连接， 保持 ellipse 的独立性。
drawArc ( ) new
drawArc(x, y, radius, startAngle?, endAngle?, anticlockwise?)
先 moveTo 至圆弧起始点，再 arc()，使之断开与前面路径的连接， 保持 arc 的独立性。
drawPoints ( ) new
drawPoints(points, curve?, close?)
通过坐标组 points [ x,y, x,y, x,y ...] 绘制折线。
curve 表示转换为平滑曲线，设置 0 ～ 1 控制曲率，或设置 true 代表 0.5。
close 表示是否闭合折线。
继承
UI
API
Path
示例
创建路径
import { Leafer, Path } from 'leafer-ui'
const leafer = new Leafer({ view: window })
const path = new Path({
scale: 0.1,
path: 'M945.344 586.304c-13.056-93.44-132.48-98.048-132.48-98.048 0-29.888-39.808-47.424-39.808-47.424L201.664 440.832c-36.736 0-42.112 51.264-42.112 51.264 7.68 288 181.44 382.976 181.44 382.976l299.456 0c42.88-31.36 101.888-122.56 101.888-122.56 9.216 3.072 72.768-0.832 97.984-6.144C865.6 740.992 958.336 679.68 945.344 586.304zM365.568 825.28c-145.472-105.664-130.944-328.576-130.944-328.576l80.448 0c-44.416 126.4 43.648 285.696 55.872 307.904C383.232 826.816 365.568 825.28 365.568 825.28zM833.472 694.272c-37.568 22.272-65.152 7.68-65.152 7.68 39.04-54.4 42.112-159.296 42.112-159.296 6.848 2.304 12.288-26.048 61.312 23.744C920.768 616.128 871.04 672.064 833.472 694.272z M351.68 129.856c0 0-119.424 72.832-44.416 140.928 75.008 68.16 68.16 93.44 24.512 153.216 0 0 81.92-41.344 71.168-104.192s-89.6-94.208-72.768-137.792C347.136 138.304 351.68 129.856 351.68 129.856z M615.232 91.648c0 0-119.488 72.832-44.352 140.928 74.944 68.16 68.032 93.44 24.448 153.216 0 0 81.984-41.344 71.232-104.192-10.688-62.784-89.6-94.208-72.832-137.792C610.624 100.032 615.232 91.648 615.232 91.648z M491.136 64c0 0-74.304 6.144-88.128 78.144C389.248 214.144 435.968 240.96 471.936 276.992 507.904 312.96 492.608 380.352 452.032 427.904c0 0 72.768-25.344 89.6-94.976 16.832-69.76-17.344-94.272-52.8-134.784C453.312 157.504 456.64 83.968 491.136 64z',
fill: 'rgb(50,205,121)'
})
leafer.add(path)缠绕路径
底部圆角矩形与圆形相交，产生挖空效果。
import { Leafer, Path } from 'leafer-ui'
const leafer = new Leafer({ view: window })
const path1 = new Path({
path: 'X 0 0 100 100 30 P 50 50 25',
windingRule: 'evenodd',
fill: '#FF4B4B'
})
const path2 = new Path({
path: 'P 50 50 20',
fill: '#FEB027'
})
leafer.add(path1)
leafer.add(path2)使用画笔绘制
import { Leafer, Path } from 'leafer-ui'
const leafer = new Leafer({ view: window })
const path = new Path({
fill: 'rgb(50,205,121)'
})
leafer.add(path)
path.windingRule = 'evenodd'
path.pen.roundRect(0, 0, 100, 100, 30).drawArc(50, 50, 25)使用路径数据
import { Leafer, Path } from 'leafer-ui'
const leafer = new Leafer({ view: window })
const path = new Path({
windingRule: 'evenodd',
path: 'X0 0 100 100 30M75 50P50 50 25',
fill: 'rgb(50,205,121)'
})
leafer.add(path)