javascript - 使用 SVGMatrix 的 HTML canvas 2D 转换文档

标签 javascript html canvas matrix 2d

我正在考虑将 HTML canvas 元素用于一个简单的游戏,但找不到有关 2D 绘图上下文的某些功能的完整文档。通常我会看MDN , 但仍然缺少一些东西。

特别是,即使我查看了 HTML Canvas 2D Context W3C Candidate Recommendation (据我所知,这是关于该主题的官方说法),我似乎找不到更多关于使用 SVGMatrix 对象进行转换的信息。

我提供的两个链接都描述了 CanvasRenderingContext2D 对象的转换函数,这些函数将矩阵的各个元素作为参数。例如:

context.transform(a, b, c, d, e, f)

但是,链接也有这些注释:

The methods listed below remain for historical and compatibility reasons as SVGMatrix objects are used in most parts of the API nowadays and will be used in the future instead.

Most of the API uses SVGMatrix objects rather than this API. This API remains mostly for historical reasons

尽管页面上说大多数 API 现在使用 SVGMatrix 对象而不是指定单个矩阵元素,但我似乎找不到这方面的文档。

有人可以指点我一些官方文档,或者以其他方式描述使用 SVGMatrix 对象而不是指定单个矩阵元素的 API 吗?

最佳答案

这个答案可能比实际的可靠信息更多的是宣传形式,但考虑到这种情况,我希望它仍然可以提供一些输入。

关于它的用法的文档不多——仍然(我相信)关于公开以及如何实现它(使用 Canvas /路径)的讨论,这就是为什么我们还没有看到很多。 Canvas 有(或曾经有?)一个方法 currentTransform 会返回一个 SVGMatrix 对象,但它没有得到广泛支持,或者隐藏在实验性标志后面(即在 Chrome 中。免责声明:最近可能已更改)。

您可以阅读 discussion here 的一个主题.

还提到了它的用途here (MDN)但没有进一步记录。

我假设在 canvas 的情况下,将来您可以将检索和修改的对象传递给 f.ex。 setTransform() 作为现有签名的“重载”选项(很像 Path2D 对象可以描边和填充),尽管在推荐(查看它如何与下面的 SVG 一起使用以获得可能的使用模式)。

该对象的作用与 setTransform()/transform() 相同,但您可以通过使用相同的方法(因为属性本​​身是只读的)使用 a-e 的值对其进行初始化与上下文,所以原则上没有区别(查看开源浏览器的源代码将准确显示它是如何使用的)。

另见 this article (更多关于 SVG 以及如何使用该对象)。

在 f.ex 中使用对象本身的当前实现。控制台,你可以这样做:

var matrix = document.createElementNS('http://www.w3.org/2000/svg','svg')
             .createSVGMatrix();

PS:也可以随时查看我自己的matrix implementation (MIT) .

关于javascript - 使用 SVGMatrix 的 HTML canvas 2D 转换文档,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26840448/

相关文章:

javascript - 高质量缩放 <canvas> drawImage()

javascript - 处理 ANTLR4 JavaScript 中的错误

javascript - 您如何创建一个自定义的 css 弹出窗口以在每个访问者每周一次的页面加载时打开

javascript - 无法访问 $.ajax.done() 中的全局变量

javascript - Jquery 星级评定在 Firefox 和 Chrome 中不起作用

javascript - 使用 Brad Birdsall 的 Swipe 2.0 在纯 JavaScript 中的 iOS 导航栏

jquery - 单击图标时带有附加信息的按钮

javascript - 如何使用 Angular.js/Javascript 为 url 添加输入字段验证

html - 我应该为 SEO 动态更改图像的标题/替代标签吗?

html - 在 Canvas 上制作可拖动、可调整大小的图像