DOMMatrix: scaleSelf() 方法

Baseline 已廣泛支援

此特性已相當成熟,可在許多裝置和瀏覽器版本上使用。自 ⁨2020 年 1 月⁩ 起,所有主流瀏覽器均已支援。

注意:此功能在 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

瀏覽器相容性

另見