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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
|
---
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>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Firefox (Gecko)</th>
<th>Chrome</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>基本支持</td>
<td>{{CompatGeckoDesktop(33)}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td>可用于 Web workers</td>
<td>{{CompatNo}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Firefox Mobile (Gecko)</th>
<th>Android</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>基本支持</td>
<td>{{CompatGeckoMobile(33)}}</td>
<td rowspan="1">{{CompatUnknown}}</td>
<td rowspan="1">{{CompatNo}}</td>
<td rowspan="1">{{CompatUnknown}}</td>
<td rowspan="1">{{CompatNo}}</td>
</tr>
<tr>
<td>可用于 Web workers</td>
<td>{{CompatNo}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="相关链接">相关链接</h2>
<ul>
<li>它的不可修改部分， {{domxref("DOMMatrixReadOnly")}}</li>
<li>{{domxref("SVGMatrix")}}，SVG 矩阵计划被{{domxref("DOMMatrix")}}替代</li>
</ul>
|
