leafer-editor
Version:
**leafer-editor** 在 [leafer-ui](https://github.com/leaferjs/leafer-ui) 的基础上,集成了 图形编辑器、视图控制 、滚动条、箭头、HTML 插件,适用于在线图形编辑的场景。
1 lines • 4.12 kB
Source Map (JSON)
{"version":3,"file":"web.min.cjs","sources":["../../../../src/leafer/packages/interface/src/path/IPathCommand.ts"],"sourcesContent":["import { IPointData } from '../math/IMath'\n\ntype Command = number\ntype x = number\ntype y = number\ntype x1 = number\ntype y1 = number\ntype x2 = number\ntype y2 = number\ntype radiusX = number\ntype radiusY = number\ntype xAxisRotation = number\ntype largeArcFlag = number\ntype sweepFlag = number\n\n\nexport type MCommandData = [Command, x, y]\nexport type HCommandData = [Command, x]\nexport type VCommandData = [Command, y]\nexport type LCommandData = MCommandData\n\nexport type CCommandData = [Command, x1, y1, x2, y2, x, y]\nexport type SCommandData = [Command, x2, y2, x, y]\n\nexport type QCommandData = [Command, x1, y1, x, y]\nexport type TCommandData = [Command, x, y]\n\nexport type ZCommandData = [Command]\n\nexport type ACommandData = [Command, radiusX, radiusY, xAxisRotation, largeArcFlag, sweepFlag, x, y]\n\n\n// 非svg标准的canvas绘图命令\ntype width = number\ntype height = number\ntype rotation = number\ntype startAngle = number\ntype endAngle = number\ntype anticlockwise = boolean\ntype cornerRadius = number | number[]\ntype radius = number\n\nexport type RectCommandData = [Command, x, y, width, height]\nexport type RoundRectCommandData = [Command, x, y, width, height, cornerRadius]\nexport type EllipseCommandData = [Command, x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise]\nexport type ArcCommandData = [Command, x, y, radius, startAngle, endAngle, anticlockwise]\nexport type ArcToCommandData = [Command, x1, y1, x2, y2, radius]\n\n\nexport type CanvasPathCommand = 1 | 2 | 5 | 7 | 11 // M | L | C | Q | Z canvas可以绘制的命令\n\nexport type IPathCommandData = number[] // ...(MCommandData | LCommandData | CCommandData | QCommandData | ZCommandData)\n\n\n// 路径命令对象\nexport interface MoveToCommandObject {\n name: 'M'\n x: number\n y: number\n}\nexport interface LineToCommandObject {\n name: 'L'\n x: number\n y: number\n}\n\nexport interface BezierCurveToCommandObject {\n name: 'C'\n x1: number\n y1: number\n x2: number\n y2: number\n x: number\n y: number\n}\n\nexport interface QuadraticCurveToCommandObject {\n name: 'Q'\n x1: number\n y1: number\n x: number\n y: number\n}\n\nexport interface ClosePathCommandObject {\n name: 'Z'\n}\n\nexport type IPathCommandObject = MoveToCommandObject | LineToCommandObject | BezierCurveToCommandObject | QuadraticCurveToCommandObject | ClosePathCommandObject // M | L | C | Q | Z canvas可以绘制的命令\n\n\n// 可视化路径节点\n\nexport interface IPathCommandNodeBase {\n name: 'M^' | 'L^' | 'C^' | 'Z^'\n x: number\n y: number\n a?: IPointData // 第一个手柄,连接上一个节点\n b?: IPointData // 第二个手柄,连接下一个节点\n ab?: PathNodeHandleType // 手柄类型\n}\n\nexport interface MoveToCommandNode extends IPathCommandNodeBase {\n name: 'M^'\n}\nexport interface LineToCommandNode extends IPathCommandNodeBase {\n name: 'L^'\n}\n\nexport interface BezierCurveToCommandNode extends IPathCommandNodeBase {\n name: 'C^'\n}\n\nexport interface ClosePathCommandNode {\n name: 'Z^'\n x?: number\n y?: number\n a?: IPointData\n b?: IPointData\n ab?: PathNodeHandleType\n}\n\nexport type IPathCommandNode = MoveToCommandNode | LineToCommandNode | BezierCurveToCommandNode | ClosePathCommandNode // M | L | C | Z 路径节点命令(适合可视化编辑)\n\nexport enum PathNodeHandleType { // 手柄类型\n none = 1, // 无手柄\n free = 2, // 每个手柄自由控制\n mirrorAngle = 3, // 仅镜像角度\n mirror = 4, // 镜像角度和长度\n}\n\nexport type PathNodeHandleName = 'a' | 'b' // 手柄名称\n\nexport interface IPathNodeBase {\n pathNode: IPathCommandNode\n}"],"names":["PathNodeHandleType"],"mappings":"iBA4HYA,gTAAAA,QAAAA,wBAAAA,GAAAA,EAAAA,QAAAA,qBAAAA,2BAAkB,CAAA,IAC1BA,EAAA,KAAA,GAAA,OACAA,EAAAA,EAAA,KAAA,GAAA,OACAA,EAAAA,EAAA,YAAA,GAAA,cACAA,EAAAA,EAAA,OAAA,GAAA"}