DOMMatrixReadOnly: метод scale()

Метод scale() интерфейса DOMMatrixReadOnly создаёт новую матрицу, являющуюся результатом применения преобразования масштабирования к исходной матрице.

Метод scale() задаётся с помощью одного или шести значений.

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 содержит три квадрата: красный, синий и зелёный, каждый из которых расположен в начале координат документа:

<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() для создания новой матрицы с одним параметром.

Мы проверяем, поддерживает ли браузер метод scale() с шестью параметрами, создавая новую матрицу с тремя параметрами и наблюдая за свойством is2D. Если это false, значит третий параметр был принят браузером как параметр scaleZ, что делает эту матрицу 3D.

Затем мы создаём новую матрицу, масштабированную относительно заданного начала координат, используя три или шесть параметров в зависимости от поддержки браузера.

Эти новые матрицы затем применяются к синему и зелёному квадратам как transform, изменяя их размеры и положение. Красный квадрат остаётся на месте.

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());