使用SVGMatrix记录HTML画布2D转换

Question

我正在考虑使用HTML canvas元素进行简单的游戏,但是很难找到有关2D绘图上下文的某些功能的完整文档.通常我会看MDN,但仍然缺少一些东西.

特别是,即使我查看HTML Canvas 2D Context W3C Candidate Recommendation(我理解为该主题的官方词),我似乎也无法找到更多关于使用该SVGMatrix对象进行转换的信息.

我给出的两个链接描述了CanvasRenderingContext2D对象的变换函数,它将矩阵的各个元素作为参数.例如:

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

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

下面列出的方法仍然是出于历史和兼容性原因,因为SVGMatrix对象现在在API的大多数部分中使用,并将在未来使用.

大多数API使用SVGMatrix对象而不是此API.此API主要是出于历史原因

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

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

Answer 1

这个答案可能比实际的固体信息更具有模糊的形式,但考虑到情况,我希望它仍然可以提供一些输入.

关于它的用法没有太多文档 - 仍然(我相信)关于公开以及如何实现它(使用canvas/paths)的讨论,这就是我们还没有看到它的原因.Canvas有(或有？)一种方法currentTransform可以返回一个SVGMatrix对象,但它没有被广泛支持,或者隐藏在实验标志后面(即在Chrome中.免责声明:最近可能已经改变).

你可以在这里阅读讨论的一个主题.

它的用途也在这里提到(MDN),但没有进一步记录.

我会假设在canvas的情况下,将来你可以将检索和修改的对象传递给f.ex. setTransform()作为现有签名的"重载"选项(很像Path2D对象可以是笔画和填充),虽然在推荐中没有提示(请参阅下面的SVG如何用于可能的使用模式).

该对象的作用相同setTransform()/transform(),您可以使用相同的方法(因为属性本​​身是只读的)与上下文一样使用ae的值初始化它,因此原则上没有区别(查看源代码)对于开源浏览器将准确显示它是如何被使用的).

另请参阅本文(有关SVG的更多信息以及如何使用该对象).

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

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

PS:也可以随意查看我自己的矩阵实现(MIT).