DOMMatrixReadOnly：scale() 方法

scale() 方法是 DOMMatrixReadOnly 接口的方法，用于创建一个新矩阵，该矩阵是原始矩阵应用缩放变换的结果。

语法

scale() 方法可以使用一个或六个值进行指定。

js
DOMMatrixReadOnly.scale(scaleX);
DOMMatrixReadOnly.scale(scaleX, scaleY);
DOMMatrixReadOnly.scale(scaleX, scaleY, scaleZ);
DOMMatrixReadOnly.scale(scaleX, scaleY, scaleZ, originX);
DOMMatrixReadOnly.scale(scaleX, scaleY, scaleZ, originX, originY);
DOMMatrixReadOnly.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 轴的缩放，则生成的矩阵将是一个 4✕4 的 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());

规范

规范
几何接口模块级别 1
# dom-dommatrixreadonly-scale

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。