在 TypeScript 项目中使用 Path2D 未解决

2024-03-22

我想用新的Path2D https://developer.mozilla.org/en-US/docs/Web/API/Path2D/Path2Dapi 在 TypeScript 项目中,但我在 lib.es6.d.ts 中没有看到它,使用它的最佳做法是什么?有人有 Path2D 的 d.ts 文件吗?


我花了一些时间,为你们做出了宣言:

我按照相同的标准 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);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 TypeScript 项目中使用 Path2D 未解决 的相关文章

随机推荐

  • Toast LENGTH_LONG 和 LENGTH_SHORT 的持续时间是多少

    我需要 LENGTH LONG 和 LENGTH SHORT 的确切持续时间 以毫秒 ms 为单位 我还需要知道 LENGTH LONG 的 Toast 消息的持续时间在任何手机和任何 API 版本中是否具有相同的持续时间 有人知道持续时间
  • 可观察管道中的异常处理

    我创建了一个可观察对象 其中包含通过运行异步方法将一个项目转换为另一个项目 IObservable
  • ffmpeg:记录/捕获流并同时进行场景检测

    是否可以同时捕获 录制 RTSP 流and使用单个 ffmpeg 命令捕获场景变化事件 我几乎可以做我想做的事 ffmpeg i rtsp mystream map 0 v map 0 a c v copy c a copy f segme
  • 找不到参数的方法 api() [目录 'libs']

    打开文件 这是我的 gradle 文件 apply plugin com android application android compileSdkVersion 27 buildToolsVersion 27 0 1 defaultCo
  • 如何将 _ITERATOR_DEBUG_LEVEL 添加到 CMake?

    我是 CMake 新手 我想将 ITERATOR DEBUG LEVEL 设置为 0 发布版本 和 2 调试版本 以修复尝试编译依赖于其他项目的项目时出现的问题 Error iterator debug level 值 2 与值 0 不匹配
  • Angular:ngc 还是 tsc?

    我一直在使用tsc 但是看到angular io强调ngc 我想知道两者是否有优势 或者我是否应该选择其中一个 提前致谢 tsc 和 ngc 具有不同的目的 并不是要选择其中之一 tsc 是一个 TypeScript 编译器 如果您的应用程
  • C# 从 OpenXML 返回内存流,导致损坏的 Word 文件

    我对来自 OpenXML 的 MemoryStream 有疑问 如果我在一个方法中完成所有步骤 我可以成功打开 Word 文件 更改它并通过 HttpResponse 下载它 但是 如果我尝试通过返回 MemoryStream 在两个不同的
  • 如何使用Android自动填充API

    我已经使用 android webview 组件构建了一个小型浏览器 并且希望使用 Android AutoFill API 集成密码 凭据管理器支持 我已阅读文档 但完全迷失了方向 找不到任何与 webviews 等复杂事物集成的示例 这
  • 嵌套 TagBuilder -作为 TagBuilderTree-

    TagBuilder 是构建 HTML 元素的一个很好的实现 但是某些 HTML 元素可以有其他元素 我称之为 子元素 我无法从 Mvc 类中找到任何类 问题 我应该实现几个支持嵌套标签的类 TagBuilderTree 和 TagBuil
  • 在 Visual Studio C++ 项目中在哪里输入 DLL 依赖项?

    我正在将一些在 Linux 和 Mac 上运行的 Qt 项目文件 pro 转换为 Visual Studio 项目文件 vcproj Qt Visual Studio 加载项可以很好地转换除 DLL 依赖项之外的所有内容 我应该将它们放在
  • 关于变量/函数命名约定的思考

    我一生都在断断续续地编码 我主要编写 Perl 代码 但也编写一些 Java PHP C C 我什至尝试过 Emacs Lisp 并且偶尔也编写过 shell 脚本 然而 我从来没有真正参与这个主题来获得任何专业知识 其他事情对我来说有更高
  • Android 从 java 代码设置文本视图颜色

    我有一个列表 并为此编写了一个自定义适配器 我想为此设置一些文本颜色 例如橙色代码 F06D2F 我正在展示我的代码片段getView method TextView text new TextView this context text
  • 获取单元测试时引用项目的路径

    我正在尝试使用单元测试来测试我的 ASP Net Web 应用程序中的类的功能 此类从硬盘驱动器加载一些文件 以执行 xsl 转换 Xsl GetXSLFromFile AppDomain CurrentDomain BaseDirecto
  • 如何在 Java 中解析 EDIFACT? [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 解析 EDIFACT 可能是一项艰巨的任务 如何从 EDIFACT 文件正确创建语法和语义正确的树 ww
  • for 循环的增长顺序复杂

    对于以下代码片段 N 的增长顺序是多少 int sum 0 for int i 1 i lt N i i 2 for int j 1 j lt N j j 2 for int k 1 k lt i k sum 我发现有 lgN 项 但我一直
  • 什么是过度获取或不足获取?

    我有时会玩 graphQL 在 graphQL 之前 我们通常使用 REST API 许多开发者表示 graphQL 修复了 REST 的一些问题 例如过度获取和不足获取 我对这个术语感到困惑 有人可以解释一下在这种情况下什么是过度获取和不
  • 如何不经过身份验证直接向 SMTP 服务器发送邮件?

    我想通过直接连接到将电子邮件直接从脚本发送到 Gmail 电子邮件帐户smtp gmail com 但是 我不希望脚本中包含 gmail 密码 据我所知 Gmail 似乎需要身份验证才能发送任何邮件 包括发送给自己的用户 我的问题是 来自另
  • TFS 远程用户... SSL + 密码还是 VPN?

    我目前的任务是为客户端设置 TFS 服务器 TFS将主要由本地 现场 用户通过内部网络访问 简单 但是我们拥有的少数远程用户怎么办 他们应该通过 VPN 连接还是最好将 TFS 服务器公开并让用户通过 SSL 连接并向 TFS 提供用户名和
  • 使用 TWIG Markdown 转义 HTML 代码

    我正在开发一个博客评论包 我想让用户使用 Markdown 发布一些代码 我正在使用 symfony2 TWIG 和KNP Markdown 捆绑包 https github com KnpLabs KnpMarkdownBundle用于解
  • 在 TypeScript 项目中使用 Path2D 未解决

    我想用新的Path2D https developer mozilla org en US docs Web API Path2D Path2Dapi 在 TypeScript 项目中 但我在 lib es6 d ts 中没有看到它 使用它