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 - 我需要在 JS 中的 url 旁边添加 HTML 的 "value"的 "select/option"。你知道怎么做吗?

javascript - 为什么“螃蟹”(实体)不像“怪物”(也是实体)那样可触摸?

javascript - 移动后在 Canvas 中获取鼠标位置

javascript - Bootstrap 3:为jQuery Inline删除行添加确认模式框

javascript - javascript array.sort不适用于整数

c# - 如何在页面加载后抓取包含使用 JavaScript 更新的数据的页面?

javascript - 如何获取特定对象的图像数据?

javascript - 滚动后标题被捕获并粘住

php - Google Chrome将文件.xml重命名为.download

jquery - 在 Canvas 上创建交互式文本区域