在 TypeScript 项目中使用 Path2D 未解决

Question

我想在 TypeScript 项目中使用新的 Path2D api，但我没有在 lib 中看到它。es6.d.ts 使用它的最佳做法是什么？有人有 Path2D 的 d.ts 文件吗？

Answer 1

我花了一些时间，为你做了宣言：

我按照相同的标准 TypeScript 在 lib.d.ts.
内部定义了它的接口请注意，您可以轻松扩展此代码以获得未来的功能，如果您这样做，我很乐意在此处看到它的更新。

Path2D.d.ts (View in 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 = <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);

在 TypeScript 项目中使用 Path2D 未解决

Using Path2D in a TypeScript project is not resolved

svg

path-2d

typescript

definitelytyped