Question

我正在考虑将HTML画布元素用于简单的游戏，但却难以找到有关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中。免责声明：最近可能已经改变了）。

您可以阅读discussion here的一个帖子。

它的使用也被提及here (MDN)，但没有进一步记录。

我会假设在canvas的情况下，将来你可以将检索和修改的对象传递给f.ex. setTransform()作为现有签名的“重载”选项（很像Path2D对象可以是笔划和填充），尽管建议中没有这一点（请参阅SVG如何使用它）以下是可能的使用模式）。

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

另请参阅this article（有关SVG的更多信息以及如何使用该对象）。

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

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

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

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

1 个答案: