画布应用当前变换

Question

如何确定html5画布正在应用的当前变换。

它似乎只支持两种处理变换“transform”，“setTransform”的方法，但我似乎无法发现应用变换的结果。

如果没有自己跟踪它们并重复它本身必须做的矩阵数学，我怎样才能找出当前的变换？

Answer 1

我制作了一个包装器，将此方法添加到Canvas。

http://proceduralgraphics.blogspot.com/2010/03/canvas-wrapper-with-gettransform.html

Answer 2

Firefox的Canvas 2D上下文具有（非标准）mozCurrentTransform和mozCurrentTransformInverse属性。

WhatWG现在定义了currentTransform和currentTransformInverse属性（前者甚至可写）。这是规范的相关部分：

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#transformations

然而，这些可能不会在浏览器中普遍实现一段时间，所以如果你想要可移植性，你将不得不回到手动跟踪矩阵，如@Dave和@James所说。

每个男人和他的狗似乎都写过这样一个Canvas-transform-matrix-tracker。我刚看了@Dave Lawrence的那个;我认为我的方法在某些方面更好，尽管我确信它在其他方面也较差。

• 我不需要对用户JS代码进行任何更改 - 它会修改Canvas和上下文原型，所以你只需添加一个     脚本 标签，你很高兴。
• 它拦截currentTransform属性的设置。
• 只努力做它需要做的事情。

它适用于最新的Chrome和Firefox，但我尚未在IE中测试过它。

我把我放在一个jsfiddle，只有一个简单的演示： http://jsfiddle.net/XmYqL/1/

这是一个安抚stackoverflow的代码块，所以它允许我链接到jsfiddle（??）：

code, code, wonderful code

我终于将我的polyfill上传到GitHub：

https://github.com/supermattydomain/canvas.currentTransform.js

我知道这并不完美，但我真的希望看到我们共同努力实现这个问题的真正解决方案。我不在乎它是我的还是别人的。 JavaScript / HTML5 / Canvas的这个角落太像巴尔干半岛：部分解决方案的海洋。 请大家，叉子，添加你的更改并发送拉动请求，或者把你的URL发给我，这样我就可以合并你的代码，或者用你的代码替换我的批发。 这是一个我想要指出的愚蠢问题。如果我们一起工作，我们就可以做到。

Answer 3

您可以在此处查看影响转换的功能：

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#transformations

如果使用setTransform函数，则将当前变换矩阵设置为单位矩阵，然后使用已设置的值。

此时你有了当前的变换矩阵。

现在，如果你要重置它，然后开始调用其他转换方法，如果你需要知道它是什么，很容易做数学来计算转换矩阵，所以只需要进行操作，使用您自己的转换函数，然后您可以像计算它一样设置转换。

如果你不能这样做，那么你目前运气不好，但是这篇文章也有同样的问题，所以你可能想请求添加一个新功能，getTransform。

http://forums.whatwg.org/viewtopic.php?t=4164

Answer 4

虽然不是如何获得当前转换的解决方案，但上下文包含 save（）和 restore（）功能可能是一个有用的事实。用于推送和弹出上下文状态，包括当前的转换矩阵。

（至少它可能会让那些人受益，与我类似，他们正在寻找getTransform以便使用它来实现堆栈......）