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 |
浏览器兼容性
加载中…