DOMMatrix: scaleSelf() 方法
注意:此功能在 Web Workers 中可用。
DOMMatrix 介面的 scaleSelf() 方法是一個可變轉換方法,它透過應用指定的縮放因子來修改矩陣,該縮放因子以給定的原點為中心,預設原點為 (0, 0),並返回縮放後的矩陣。
要縮放矩陣而不修改它,請參閱 DOMMatrixReadOnly.scale(),它會建立一個新的縮放矩陣,而保持原矩陣不變。
語法
js
scaleSelf()
scaleSelf(scaleX)
scaleSelf(scaleX, scaleY)
scaleSelf(scaleX, scaleY, scaleZ)
scaleSelf(scaleX, scaleY, scaleZ, originX)
scaleSelf(scaleX, scaleY, scaleZ, originX, originY)
scaleSelf(scaleX, scaleY, scaleZ, originX, originY, originZ)
引數
scaleX可選-
x 軸縮放值的乘數。如果未提供,則預設為
1。 scaleY可選-
y 軸縮放值的乘數。如果未提供,則預設為
scaleX的值。 scaleZ可選-
z 軸縮放值的乘數。如果此值不等於 1,則生成的矩陣將是 3D 的。
originX可選-
轉換原點的 x 座標。如果未提供原點,則預設為 0。
originY可選-
轉換原點的 y 座標。如果未提供原點,則預設為 0。
originZ可選-
轉換原點的 z 座標。如果未提供原點,則預設為 0。如果此值不等於 0,則生成的矩陣將是 3D 的。
返回值
返回自身;一個 DOMMatrix。
如果沿 z 軸應用縮放,則矩陣將是一個 4x4 的 3D 矩陣。
示例
此 SVG 包含兩個半透明的方形,一個紅色,一個藍色,每個都位於文件原點。
html
<svg viewBox="0 0 50 50" height="200">
<rect width="25" height="25" fill="#ff000099" />
<rect id="transformed" width="25" height="25" fill="#0000ff99" />
</svg>
此 JavaScript 首先建立一個矩陣,然後使用 scaleSelf() 方法將矩陣縮放為寬度減半、高度加倍的矩陣。
然後將該矩陣作為 transform 應用於藍色方形,從而改變其尺寸和位置。紅色方形保持不變。
js
const matrix = new DOMMatrix();
matrix.scaleSelf(0.5, 2);
document
.querySelector("#transformed")
.setAttribute("transform", matrix.toString());
規範
| 規範 |
|---|
| Geometry Interfaces Module Level 1 # dom-dommatrix-scaleself |
瀏覽器相容性
載入中…
另見
DOMMatrixReadOnly.scale()DOMMatrix.scale3dSelf()- CSS
transform屬性和scaleSelf()和matrix()函式 - CSS 變換模組
- SVG
transform屬性 CanvasRenderingContext2D介面transform()方法