path

路径优先模式，可用于修改 Box 的形状、普通元素转路径。

设置 path 数据 或调用 pen 画笔 后可以将普通元素转为路径模式，优先渲染手动绘制的路径。

关键属性

path: IPathString ｜ IPathCommandData

路径数据，支持 SVG 与 Cavnas 绘图命令。

可通过 pen 画笔 快速绘制路径。

windingRule: WindingRule

路径缠绕规则， 默认为非零缠绕 nonzero。

两条以上路径重合时的填充算法，可产生相加、相交、减去的效果。

type WindingRule: =  "nonzero" | "evenodd"

只读属性

pathInputed: boolean

是否为路径模式。

将 path 设为 null 后，可还原为非路径模式。

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 ...] 或 [ {x, y}, {x, y} ...] 绘制折线。

curve 表示转换为平滑曲线，设置 0 ～ 1 控制曲率，或设置 true 代表 0.5。

close 表示是否闭合折线。

归属

UI

示例

使用画笔绘制

import { Leafer, Rect } from 'leafer-ui'

const leafer = new Leafer({ view: window })

const rect = new Rect({
    width: 100,
    height: 100,
    fill: 'rgb(50,205,121)'
})

leafer.add(rect)

rect.windingRule = 'evenodd'
rect.pen.roundRect(0, 0, 100, 100, 30).drawArc(50, 50, 25)

使用路径数据

import { Leafer, Rect } from 'leafer-ui'

const leafer = new Leafer({ view: window })

const rect = new Rect({
    width: 100,
    height: 100,
    windingRule: 'evenodd',
    path: 'X0 0 100 100 30M75 50P50 50 25',
    fill: 'rgb(50,205,121)'
})

leafer.add(rect)