1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
---
title: DOMMatrix
slug: Web/API/DOMMatrix
translation_of: Web/API/DOMMatrix
---
<p>{{APIRef("Geometry Interfaces")}}{{SeeCompatTable}}</p>
<p><code><strong>DOMMatrix</strong></code>接口代表4x4矩阵，适合 2D 和3D 操作。</p>
<p>一个4x4矩阵适于描绘任何3D的旋转（rotation ）和过渡（translation）。</p>
<p>此接口在Web workers里应该是可用的，虽然某些实现现在还不允许。</p>
<h2 id="属性">属性</h2>
<p><em>此接口从{{domxref("DOMMatrixReadOnly")}}继承属性，虽然某些属性被修改为非只读的。</em></p>
<dl>
<dt><code>m11</code>, <code>m12</code>, <code>m13</code>, <code>m14</code>, <code>m21</code>, <code>m22</code>, <code>m23</code>, <code>m24</code>, <code>m31</code>, <code>m32</code>, <code>m33</code>, <code>m34</code>, <code>m41</code>, <code>m42</code>, <code>m43</code>, <code>m44</code></dt>
<dd>代表一个4x4矩阵的每个组成部分的double值。</dd>
<dt><code>a</code>, <code>b</code>, <code>c</code>, <code>d</code>, <code>e</code>, <code>f</code> {{ReadOnlyInline}}</dt>
<dd>代表了2D旋转和过渡所需要的一个4x4矩阵的每个组成部分的double值。它们是这个矩阵的一些组成的别名：
<table class="standard-table">
<thead>
<tr>
<th scope="col"><code>2D</code></th>
<th scope="col"><code>3D 等价值</code></th>
</tr>
</thead>
<tbody>
<tr>
<td><code>a</code></td>
<td><code>m11</code></td>
</tr>
<tr>
<td><code>b</code></td>
<td><code>m12</code></td>
</tr>
<tr>
<td><code>c</code></td>
<td><code>m21</code></td>
</tr>
<tr>
<td><code>d</code></td>
<td><code>m22</code></td>
</tr>
<tr>
<td><code>e</code></td>
<td><code>m41</code></td>
</tr>
<tr>
<td><code>f</code></td>
<td><code>m42</code></td>
</tr>
</tbody>
</table>
</dd>
</dl>
<h2 id="方法">方法</h2>
<p><em>此接口从{{domxref("DOMMatrixReadOnly")}}继承方法。</em></p>
<dl>
<dt>{{domxref("DOMMatrixReadOnly.multiplySelf()")}}</dt>
<dd>返回自身，一个{{domxref("DOMMatrix")}}，它的新内容是原始矩阵乘以指定的矩阵{{domxref("DOMMatrix")}}的结果。</dd>
<dt>{{domxref("DOMMatrixReadOnly.preMultiplySelf()")}}</dt>
<dd>返回自身，一个{{domxref("DOMMatrix")}}，它的新内容是指定的矩阵{{domxref("DOMMatrix")}}乘以原始矩阵的结果。</dd>
<dt>{{domxref("DOMMatrix.translateSelf()")}}</dt>
<dd>返回自身，一个{{domxref("DOMMatrix")}}，它的新内容是矩阵被指定向量转换后的结果。</dd>
<dt>{{domxref("DOMMatrix.scaleSelf()")}}</dt>
<dd>返回自身，一个{{domxref("DOMMatrix")}}，它的新内容是矩阵的 x 和y维度被指定因子缩放后的结果，对齐指定原点。</dd>
<dt>{{domxref("DOMMatrix.scale3dSelf()")}}</dt>
<dd>返回自身，一个{{domxref("DOMMatrix")}}，它的新内容是矩阵的 x, y和z维度被指定因子缩放后的结果，对齐指定原点。</dd>
<dt>{{domxref("DOMMatrix.scaleNonUniformSelf()")}}</dt>
<dd>返回自身，一个{{domxref("DOMMatrix")}}，它的新内容是矩阵的 x, y和z维度被各自维度的指定因子缩放后的结果，对齐指定原点。</dd>
<dt>{{domxref("DOMMatrix.rotateSelf()")}}</dt>
<dd>返回自身，一个{{domxref("DOMMatrix")}}，它的新内容是原始矩阵被指定角度旋转后的结果，对齐指定原点。</dd>
<dt>{{domxref("DOMMatrix.rotateFromVectorSelf()")}}</dt>
<dd>返回自身，一个{{domxref("DOMMatrix")}}，它的新内容是原始矩阵被指定角度旋转后的结果，该角度在指定向量和 (1,0)之间，对齐指定原点。</dd>
<dt>{{domxref("DOMMatrix.rotateAxisAngleSelf()")}}</dt>
<dd>返回自身，一个{{domxref("DOMMatrix")}}，它的新内容是原始矩阵被指定角度和指定向量旋转后的结果。</dd>
<dt>{{domxref("DOMMatrix.skewXSelf()")}}</dt>
<dd>返回自身，一个{{domxref("DOMMatrix")}}，它的新内容是原始矩阵被指定因子沿x轴倾斜后的结果。</dd>
<dt>{{domxref("DOMMatrix.skewYSelf()")}}</dt>
<dd>返回自身，一个{{domxref("DOMMatrix")}}，它的新内容是原始矩阵被指定因子沿y轴倾斜后的结果。</dd>
<dt>{{domxref("DOMMatrix.invertSelf()")}}</dt>
<dd>返回自身，一个{{domxref("DOMMatrix")}}，它的新内容是原始矩阵求逆后的结果。如果不能求逆，所有的组成部分会被设为NaN，并且<code>is2D()返回</code> <code>false</code>。</dd>
<dt>{{domxref("DOMMatrix.setMatrixValue()")}}</dt>
<dd>返回自身，一个{{domxref("DOMMatrix")}}，描述了一个矩阵，它的变换（transformation）和被参数指定的CSS {{domxref("transform")}}函数一样。</dd>
</dl>
<h2 id="规范">规范</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{ SpecName('Geometry Interfaces', '#dom-dommatrix', 'DOMMatrix') }}</td>
<td>{{ Spec2('Geometry Interfaces') }}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
{{Compat("api.DOMMatrix")}}
{{Compat("api.WebKitCSSMatrix")}}
<h2 id="相关链接">相关链接</h2>
<ul>
<li>它的不可修改部分， {{domxref("DOMMatrixReadOnly")}}</li>
<li>{{domxref("SVGMatrix")}}，SVG 矩阵计划被{{domxref("DOMMatrix")}}替代</li>
</ul>
|
