我花了一些时间,为你们做出了宣言:
我按照相同的标准 TypeScript 在内部定义其接口来完成此操作lib.d.ts
.
请注意,您可以轻松扩展此代码以实现未来的功能,如果您这样做,我很乐意看到它在这里更新。
Path2D.d.ts (在 TypeScript-Playground 中查看 http://www.typescriptlang.org/Playground#src=%2F%2F%20Class%0Ainterface%20Path2D%20%7B%0A%20%20%20%20addPath(path%3A%20Path2D%2C%20transform%3F%3A%20SVGMatrix)%3B%0A%20%20%20%20closePath()%3A%20void%3B%0A%20%20%20%20moveTo(x%3A%20number%2C%20y%3A%20number)%3A%20void%3B%0A%20%20%20%20lineTo(x%3A%20number%2C%20y%3A%20number)%3A%20void%3B%0A%20%20%20%20bezierCurveTo(cp1x%3A%20number%2C%20cp1y%3A%20number%2C%20cp2x%3A%20number%2C%20cp2y%3A%20number%2C%20x%3A%20number%2C%20y%3A%20number)%3A%20void%3B%0A%20%20%20%20quadraticCurveTo(cpx%3A%20number%2C%20cpy%3A%20number%2C%20x%3A%20number%2C%20y%3A%20number)%3A%20void%3B%0A%20%20%20%20arc(x%3A%20number%2C%20y%3A%20number%2C%20radius%3A%20number%2C%20startAngle%3A%20number%2C%20endAngle%3A%20number%2C%20anticlockwise%3F%3A%20boolean)%3A%20void%3B%0A%20%20%20%20arcTo(x1%3A%20number%2C%20y1%3A%20number%2C%20x2%3A%20number%2C%20y2%3A%20number%2C%20radius%3A%20number)%3A%20void%3B%0A%20%20%20%20%2F*ellipse(x%3A%20number%2C%20y%3A%20number%2C%20radiusX%3A%20number%2C%20radiusY%3A%20number%2C%20rotation%3A%20number%2C%20startAngle%3A%20number%2C%20endAngle%3A%20number%2C%20anticlockwise%3F%3A%20boolean)%3A%20void%3B*%2F%0A%20%20%20%20rect(x%3A%20number%2C%20y%3A%20number%2C%20w%3A%20number%2C%20h%3A%20number)%3A%20void%3B%0A%7D%0A%0A%2F%2F%20Constructor%0Ainterface%20Path2DConstructor%20%7B%0A%20%20%20%20new%20()%3A%20Path2D%3B%0A%20%20%20%20new%20(d%3A%20string)%3A%20Path2D%3B%0A%20%20%20%20new%20(path%3A%20Path2D%2C%20fillRule%3F%3A%20string)%3A%20Path2D%3B%0A%20%20%20%20prototype%3A%20Path2D%3B%0A%7D%0Adeclare%20var%20Path2D%3A%20Path2DConstructor%3B%0A%0A%2F%2F%20Extend%20CanvasRenderingContext2D%0Ainterface%20CanvasRenderingContext2D%20%7B%0A%20%20%20%20fill(path%3A%20Path2D)%3A%20void%3B%0A%20%20%20%20stroke(path%3A%20Path2D)%3A%20void%3B%0A%20%20%20%20clip(path%3A%20Path2D%2C%20fillRule%3F%3A%20string)%3A%20void%3B%0A%7D)
// 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 = <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 = (<SVGSVGElement>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);