import Style from './style'; import { Border, FontOptions, getViewBoxValue, Graph, GraphOptions, IPoint, parseStyle, Point, ViewBox } from "./core"; import Polygon, { Rectangle, Star, Triangle } from "./polygon"; import Circle, { Ellipse, Sector, SectorOptions } from "./circle"; import Text, { Link, TextOptions, TextPath, Tspan } from "./text"; import Defs, { ClipPath, Def, Gradient, GradientStop, LinearGradient, LinearGradientOptions, Marker, MarkerOptions, Mask, MaskOptions, Pattern, PatternOptions, RadialGradient, RadialGradientOptions, Symbol, SymbolOptions, Use, UseOptions } from "./defs"; import Line, { LineOptions, Polyline } from "./line"; import Image, { ImageOptions } from "./image"; import Pie, { PieOptional, PieOptions, PieRatio } from "./pie"; import Path from "./path"; import Animate, { AnimateColor, AnimateMotion, AnimateTransform } from './animate'; import Coordinate from './coordinate'; import Ring from './ring'; import Radar, { RadarOptions, RadarDataItem, RadarDataSet, RadarStyle } from './radar'; export declare interface SvgOptions { readonly viewBox?: ViewBox | string; /** * 元素缩放属性 [] * * [属性说明](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/preserveAspectRatio) */ readonly preserveAspectRatio?: string; readonly width?: string | number; readonly height?: string | number; readonly style?: string | Style; readonly desc?: string; } declare interface LinetoOptions { border?: Border; circle?: { r: number; border?: Border; color?: string; }; } export declare class GOptions extends GraphOptions { readonly id?: string; readonly opacity?: number; constructor(id?: string, opacity?: number); } /** * g * 用于把相关元素进行组合的容器元素 * id="该组的名称" * fill="该组填充颜色" * opacity="该组不透明度" */ export declare class G extends Graph { readonly options: GOptions; constructor(options?: GOptions, attrs?: any); } export declare class ViewOptions extends GraphOptions { readonly id: string; readonly viewBox?: ViewBox; constructor(id: string, viewBox?: ViewBox); } /** * 可配合 Link 定义视图锚点 * @example * * * * * * * * * * * * half size * * * normal size * * * double size * */ export declare class View extends Graph { readonly options: ViewOptions; constructor(options: string | ViewOptions | { id: string; viewBox?: ViewBox; }); protected attrs(): any; } /** * 可嵌入XHTML文档片段 */ export declare class ForeignObject extends Graph { constructor(options?: { point: IPoint; width?: number; height?: number; }); } declare interface Text2Options extends FontOptions { href?: string; } export default class Svg { private readonly element; private readonly nodes; private readonly desc; constructor(options?: SvgOptions); clear(): void; css(css: K | Style, cssValue?: string): this; /** * svg增加html片段 * @param html 片段内容代码 * @param options */ html(html: string, options?: { point: IPoint; width?: number; height?: number; }): this; attr(name: string, value: string): this; elements(...elements: Array): this; commandHelp(): string; /** * 执行单行命令 * @param command */ command(command: string): Graph | void; commands(...commands: string[]): this; append(...graphs: Graph[]): this; lineto(points: IPoint[], options?: LinetoOptions): this; /** * 绘制员 * @param o 圆心 * @param r 半径 * @param options 配置参数 * @param options.color 填充色 * @param options.opacity 填充色透明度 * @param options.border 边框 * @param options.border.width 边框宽度 * @param options.border.color 边框颜色 */ circle(o: IPoint, r: number, options?: { color?: string; opacity?: number; border?: { width: number; color?: string; opacity?: number; }; }): Circle; /** * 椭圆 * @param o 椭圆中心 * @param rx 横轴半径 * @param ry 纵轴半径 * @param color 填充色 */ ellipse(o: IPoint, rx: number, ry: number, color?: string): Ellipse; /** * 画圆或者扇形 或者圆环 * @param o 圆心 * @param r 半径 * @param options 配置项 * @param options.start 起始角度 默认0 * @param options.end 终止角度 默认360 * @param options.color 填充色 * @param options.width 圆环宽度，如果设置该值则绘制为环 */ sector(o: IPoint, r: number, options?: { start?: number; end?: number; width?: number; color?: string; }): Sector; /** * 绘制直线 * @param start 开始坐标点 * @param end 截止坐标描述 * @param border 线宽设置 */ line(start: IPoint, end: IPoint | { horizontal?: number; vertical?: number; slash?: { degree: number; length: number; }; }, border?: { width: number; color?: string; opacity?: number; }): Line; /** * 添加文本 * @param point 添加的文本位置 * @param content 文本内容 * @param options 文本设置 * @param options.href path的id 用于设置轨迹文本 */ text(point: IPoint, content: string | Tspan | Array, options?: Text2Options): Text; /** * 绘制矩形 * @param point 矩形左上坐标点 * @param width 矩形宽度 * @param height 矩形高度 * @param options 配置信息 填充色以及边框设置信息 */ rect(point: IPoint, width: number, height: number, options?: { color?: string; border?: { width: number; color?: string; opacity?: number; }; }): Rectangle; /** * 定义一个模块 * @param def 模块 */ def(def?: Def): Defs; /** * 绘制多边形 * @param points 多边形的各顶点坐标 可为空 */ polygon(points?: IPoint[]): Polygon; /** * 绘制三角形 普通三角形或者正三角形 * @param p1 三角形的第一个顶点坐标或者正三角形的中心坐标 * @param p2 三角形的第二个顶点坐标或者正三角形顶点到p1的距离 * @param p3 三角形的第三个顶点坐标 */ triangle(p1: IPoint, p2: IPoint | number, p3?: IPoint): Triangle; /** * 绘制星星 * @param o 星星的中心 * @param minR 最小半径 * @param maxR 最大半径 * @param size X角星 */ star(o: IPoint, minR: number, maxR: number, size?: number): Star; /** * 绘制坐标系 * @param o 坐标系原点 * @param width 坐标系宽度 * @param height 坐标系高度 * @param color 坐标系颜色 */ coordinate(o: IPoint, width: number, height: number, color?: string): Coordinate; /** * 绘制饼图 * @param o 饼图中心 * @param r 饼图半径 * @param ratios 拼图构成部分 * @param optional 图形设置选项 */ pie(o: IPoint, r: number, ratios: PieRatio[], optional?: PieOptional): Pie; /** * 使用symbol * @param href 引用的标识 * @param point 坐标 * @param options */ use(href: string, point: IPoint, options?: { width?: number; height?: number; mask?: string; color?: string; }): Use; /** * @param id * @param options * @param options.viewBox 视图盒模型边界定义 0 0 1023 1023 * @param options.width 宽度 * @param options.height 高度 * @param options.svg svg 代码块 防止到symbol内部 */ symbol(id: string, options: { viewBox?: string; width?: string | number; height?: string | number; content?: string | Graph | Graph[]; color?: string; }): Symbol; /** * 添加图片 * @param point 图片的位置 * @param src 图片的路径 * @param options 图片设置信息 */ image(point: IPoint, src: string, options?: { width?: number; height?: number; }): Image; /** * 绘制一个path * @param point 起始点 * @param commands path的命令 * @param attrs 需要设置的属性 */ path(point: IPoint, commands: string[], attrs?: any): Path; /** * 注意 该方法仅能调用一次 多次调用将会导致内容重复出现 * 多次调用会重复往element里面添加内容 */ draw(): SVGElement; /** * @param point 画笔起始位置点 * @return 画笔对象 */ painter(point?: IPoint): Painter; toString(): string; } /** * 画笔对象 */ export declare class Painter { private readonly svg; private point; constructor(svg: Svg, point?: IPoint); move(point: IPoint): this; lineto(point: IPoint | { horizontal?: number; vertical?: number; slash?: { degree: number; length: number; }; }, border?: { width: number; color?: string; opacity?: number; }): Line; rect(width: number, height: number, options?: { color?: string; border?: { width: number; color?: string; opacity?: number; }; }): Rectangle; sector(r: number, options?: { start?: number; end?: number; width?: number; color?: string; }): Sector; image(src: string, options?: { width?: number; height?: number; }): Image; text(content: string | Tspan | Array, options?: { href?: string; } | FontOptions): Text; circle(r: number, options?: { color?: string; opacity?: number; border?: { width: number; color?: string; opacity?: number; }; }): Circle; ellipse(rx: number, ry: number, color?: string): Ellipse; } /** * rgb 颜色 */ export declare class Rgb { readonly r: number; readonly g: number; readonly b: number; a: number; constructor(rgb: string); constructor(r: number, g: number, b: number); constructor(r: number, g: number, b: number, a?: number); /** * 调整颜色透明度 * @param alpha */ setAlpha(alpha: number): void; toHex(): Hex; clone(): Rgb; toString(): string; } /** * 16进制颜色表示 */ export declare class Hex { readonly red: number; readonly green: number; readonly blue: number; alpha: number; constructor(hex: string); constructor(r: number, g: number, b: number, a?: number); /** * 调整颜色透明度 * @param alpha */ setAlpha(alpha: number): void; clone(): Hex; static toRgbString(hex: string): string; toRgb(): Rgb; toString(): string; } export { Border, getViewBoxValue, Graph, parseStyle, Point, ViewBox, GraphOptions, FontOptions, Star, Rectangle, Triangle, Polygon, Circle, Ellipse, Sector, SectorOptions, Text, Link, TextOptions, TextPath, Tspan, Defs, Use, Def, UseOptions, SymbolOptions, Symbol, ClipPath, PatternOptions, Pattern, LinearGradientOptions, RadialGradientOptions, LinearGradient, RadialGradient, GradientStop, Gradient, Line, LineOptions, Polyline, Image, ImageOptions, Pie, PieOptions, PieRatio, Path, Animate, AnimateColor, AnimateMotion, AnimateTransform, MaskOptions, Mask, Marker, MarkerOptions, Coordinate, Ring, Radar, RadarOptions, RadarDataItem, RadarDataSet, RadarStyle };