我想在TypeScript项目中使用新的Path2D api,但我没有在lib.es6.d.ts中看到它.使用它的最佳方法是什么?有没有人有Path.D的d.ts文件?
我带了一些时间,我为你做了宣言:
我已经按照相同的标准TypeScript在内部定义了它的接口lib.d.ts
.
请注意,您可以轻松扩展此代码以用于将来的功能,如果您这样做,我很乐意在此处更新它.
Path2D.d.ts(在TypeScript-Playground中查看)
// Class
interface Path2D {
addPath(path: Path2D, transform?: SVGMatrix);
closePath(): void;
moveTo(x: number, y: number): void;
lineTo(x: number, y: number): void;
bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void;
quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void;
arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void;
arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void;
/*ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void;*/
rect(x: number, y: number, w: number, h: number): void;
}
// Constructor
interface Path2DConstructor {
new (): Path2D;
new (d: string): Path2D;
new (path: Path2D, fillRule?: string): Path2D;
prototype: Path2D;
}
declare var Path2D: Path2DConstructor;
// Extend Window
interface Window { Path2D: Path2DConstructor; }
// Extend CanvasRenderingContext2D
interface CanvasRenderingContext2D {
fill(path: Path2D): void;
stroke(path: Path2D): void;
clip(path: Path2D, fillRule?: string): void;
}
例子:
var canvas: HTMLCanvasElement =document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var path1 = new Path2D(); path1.rect(10, 10, 100, 100); var path2 = new Path2D(path1); path2.moveTo(220, 60); path2.arc(170, 60, 50, 0, 2 * Math.PI); var m = ( document.createElementNS("http://www.w3.org/2000/svg", "svg")).createSVGMatrix(); m.a = 1; m.b = 0; m.c = 0; m.d = 1; m.e = 300; m.f = 0; path2.addPath(path1, m); ctx.stroke(path1); ctx.fill(path2);