DOMMatrixReadOnly: scale() 方法
注意：此功能在 Web Workers 中可用。
DOMMatrixReadOnly 介面的 scale() 方法會建立一個新矩陣，該矩陣是原始矩陣應用縮放變換的結果。
語法
js
scale(scaleX)
scale(scaleX, scaleY)
scale(scaleX, scaleY, scaleZ)
scale(scaleX, scaleY, scaleZ, originX)
scale(scaleX, scaleY, scaleZ, originX, originY)
scale(scaleX, scaleY, scaleZ, originX, originY, originZ)
引數
scaleX-
x 軸縮放值的乘數。
scaleY可選-
y 軸縮放值的乘數。如果未提供，則預設為
scaleX的值。 scaleZ可選-
z 軸縮放值的乘數。如果此值不是 1，則生成的矩陣將是 3D 的。
originX可選-
變換原點的 x 座標。如果未提供原點，則預設為 0。
originY可選-
變換原點的 y 座標。如果未提供原點，則預設為 0。
originZ可選-
變換原點的 z 座標。如果未提供原點，則預設為 0。如果此值不是 0，則生成的矩陣將是 3D 的。
返回值
返回一個 DOMMatrix，其中包含一個新矩陣，該矩陣是原始矩陣的 x 和 y 維度按給定因子縮放的結果，以給定的原點為中心。原始矩陣不會被修改。
如果沿 z 軸應用縮放，則生成的矩陣將是一個 4x4 的 3D 矩陣。
示例
此 SVG 包含三個正方形，一個紅色、一個藍色、一個綠色，每個正方形都位於文件原點。
html
<svg width="250" height="250" viewBox="0 0 25 25">
<rect width="25" height="25" fill="red" />
<rect id="transformed" width="25" height="25" fill="blue" />
<rect id="transformedOrigin" width="25" height="25" fill="green" />
</svg>
此 JavaScript 首先建立一個單位矩陣，然後使用 scale() 方法建立一個帶單個引數的新矩陣。
我們透過建立使用三個引數的新矩陣並觀察其 is2D 屬性來測試瀏覽器是否支援六引數 scale() 方法。如果為 false，則表示瀏覽器已將第三個引數接受為 scaleZ 引數，從而使其成為一個 3D 矩陣。
然後，我們建立一個使用三個或六個引數（取決於瀏覽器支援）的新矩陣，該矩陣圍繞給定原點進行縮放。
然後將這些新矩陣作為 transform 應用於藍色和綠色正方形，從而改變它們的尺寸和位置。紅色正方形保持不變。
js
const matrix = new DOMMatrixReadOnly();
const scaledMatrix = matrix.scale(0.5);
let scaledMatrixWithOrigin = matrix.scale(0.5, 25, 25);
// if the browser has interpreted these parameters as scaleX, scaleY, scaleZ, the resulting matrix is 3D
const browserExpectsSixParamScale = !scaledMatrixWithOrigin.is2D;
if (browserExpectsSixParamScale) {
scaledMatrixWithOrigin = matrix.scale(0.5, 0.5, 1, 25, 25, 0);
}
document
.querySelector("#transformed")
.setAttribute("transform", scaledMatrix.toString());
document
.querySelector("#transformedOrigin")
.setAttribute("transform", scaledMatrixWithOrigin.toString());
規範
| 規範 |
|---|
| Geometry Interfaces Module Level 1 # dom-dommatrixreadonly-scale |
瀏覽器相容性
載入中…