import Layer, { ILayerState, ILayerEvent } from './Layer'; import { ISketchUtils } from './Sketch'; export interface ILineCoordinate { x: number; y: number; } export declare type ILineCap = 'none' | 'point' | 'arrow' | 'triangle'; export interface ILineProps { /** * 点的坐标 */ coordinates: (readonly number[])[]; /** * 光滑 */ smooth: boolean; /** * 线段样式 */ dash: readonly number[] | null; /** * 出发端点样式 */ startCap: ILineCap; /** * 结束端点样式 */ endCap: ILineCap; } export interface ILineEvent extends ILayerEvent { coordinates: (coordinates: ILineProps['coordinates']) => void; smooth: (smooth: ILineProps['smooth']) => void; dash: (dash: ILineProps['dash']) => void; startCap: (cap: ILineCap) => void; endCap: (cap: ILineCap) => void; } /** * 可绘制 折线、二次曲线、贝塞尔曲线(任意组合) */ export default class Line extends Layer { props: ILineProps; constructor(state?: Partial, props?: Partial); /** * 设置线段点位 * * 根据参数使用不同的绘制算法 * * - `x, y` 直线 * - `x, y, cp1x, cp1y` 二次曲线 * - `x, y, cp1x, cp1y, cp2x, cp2y` 贝塞尔曲线 * @param x 新的结束坐标x * @param y 新的结束坐标y * @param cp1x 二次曲线控制点坐标x / 贝塞尔曲线控制点1坐标x * @param cp1y 二次曲线控制点坐标y / 贝塞尔曲线控制点1坐标y * @param cp2x 贝塞尔曲线控制点2坐标x * @param cp2y 贝塞尔曲线控制点2坐标y */ to(x: number, y: number, cp1x?: number, cp1y?: number, cp2x?: number, cp2y?: number): this; /** * 清空所有坐标点 */ clear(): this; /** * 设置出发端点样式 */ startCap(value: ILineCap): this; /** * 设置结束端点样式 */ endCap(value: ILineCap): this; /** * 光滑折线(曲线点不受影响) */ smooth(value: ILineProps['smooth']): this; /** * 设置线段样式 * * 数值最后将 * strokeWidth 后再被应用 */ dash(value: ILineProps['dash']): this; protected _clone(): Line; protected _render(ctx: CanvasRenderingContext2D, utils: ISketchUtils): void; }