Skip to main content

数学

🌐 Math

PixiJS 包含多个用于 2D 变换、几何和形状操作的数学工具。本指南介绍了最重要的类及其使用案例，包括通过 math-extras 启用的可选高级方法。

🌐 PixiJS includes a several math utilities for 2D transformations, geometry, and shape manipulation. This guide introduces the most important classes and their use cases, including optional advanced methods enabled via math-extras.

矩阵​

🌐 Matrix

Matrix 类表示一个二维仿射变换矩阵。它被广泛用于缩放、平移和旋转等变换。

🌐 The Matrix class represents a 2D affine transformation matrix. It is used extensively for transformations such as scaling, translation, and rotation.

import { Matrix, Point } from 'pixi.js';

const matrix = new Matrix();
matrix.translate(10, 20).scale(2, 2);

const point = new Point(5, 5);
const result = matrix.apply(point); // result is (20, 30)

点和可观察点​

🌐 Point and ObservablePoint

Point​

Point 对象表示二维坐标系统中的一个位置，其中 x 表示水平轴上的位置，y 表示垂直轴上的位置。许多 Pixi 函数接受 PointData 类型作为 Point 的替代，只需要 x 和 y 属性。

🌐 The Point object represents a location in a two-dimensional coordinate system, where x represents the position on the horizontal axis and y represents the position on the vertical axis. Many Pixi functions accept the PointData type as an alternative to Point, which only requires x and y properties.

import { Point } from 'pixi.js';
const point = new Point(5, 10);

point.set(20, 30); // set x and y

ObservablePoint​

扩展 Point 并在其值更改时触发回调。内部用于像位置和缩放更新这样的响应式系统。

🌐 Extends Point and triggers a callback when its values change. Used internally for reactive systems like position and scale updates.

import { Point, ObservablePoint } from 'pixi.js';

const observer = {
  _onUpdate: (point) => {
    console.log(`Point updated to: (${point.x}, ${point.y})`);
  },
};
const reactive = new ObservablePoint(observer, 1, 2);
reactive.set(3, 4); // triggers call to _onUpdate

形状​

🌐 Shapes

PixiJS 包含多个 2D 形状，用于命中测试、渲染和几何计算。

🌐 PixiJS includes several 2D shapes, used for hit testing, rendering, and geometry computations.

Rectangle​

由 x、y、width 和 height 定义的轴对齐矩形。

🌐 Axis-aligned rectangle defined by x, y, width, and height.

import { Rectangle } from 'pixi.js';

const rect = new Rectangle(10, 10, 100, 50);
rect.contains(20, 20); // true

Circle​

由 x、y（中心）和 radius 定义。

🌐 Defined by x, y (center) and radius.

import { Circle } from 'pixi.js';

const circle = new Circle(50, 50, 25);
circle.contains(50, 75); // true

Ellipse​

类似于 Circle，但支持不同的宽度和高度（半径）。

🌐 Similar to Circle, but supports different width and height (radii).

import { Ellipse } from 'pixi.js';

const ellipse = new Ellipse(0, 0, 20, 10);
ellipse.contains(5, 0); // true

Polygon​

由一系列点定义。用于复杂形状和碰撞检测。

🌐 Defined by a list of points. Used for complex shapes and hit testing.

import { Polygon } from 'pixi.js';

const polygon = new Polygon([0, 0, 100, 0, 100, 100, 0, 100]);
polygon.contains(50, 50); // true

RoundedRectangle​

圆角矩形，由半径定义。

🌐 Rectangle with rounded corners, defined by a radius.

import { RoundedRectangle } from 'pixi.js';

const roundRect = new RoundedRectangle(0, 0, 100, 100, 10);
roundRect.contains(10, 10); // true

Triangle​

一个便捷的封装器，用于定义具有三个点的三角形。

🌐 A convenience wrapper for defining triangles with three points.

import { Triangle } from 'pixi.js';

const triangle = new Triangle(0, 0, 100, 0, 50, 100);
triangle.contains(50, 50); // true

可选：math-extras​

🌐 Optional: math-extras

导入 pixi.js/math-extras 扩展了 Point 和 Rectangle，增加了额外的向量和几何工具。

🌐 Importing pixi.js/math-extras extends Point and Rectangle with additional vector and geometry utilities.

启用方法：​

🌐 To enable:

import 'pixi.js/math-extras';

增强的 Point 方法​

🌐 Enhanced Point Methods

方法描述
add(other[, out])将另一个点加到此点上。
subtract(other[, out])从此点中减去另一个点。
multiply(other[, out])与另一个点按分量相乘。
multiplyScalar(scalar[, out])将点乘以一个标量。
dot(other)计算两个向量的点积。
cross(other)计算三维叉积的标量 z 分量。
normalize([out])返回归一化（单位长度）向量。
magnitude()返回欧几里得长度。
magnitudeSquared()返回平方长度（用于比较更高效）。
project(onto[, out])将此点投影到另一个向量上。
reflect(normal[, out])将点关于给定法线反射。

增强的 Rectangle 方法​

🌐 Enhanced Rectangle Methods

方法描述
containsRect(other)如果此矩形包含另一个矩形，则返回 true。
equals(other)检查所有属性是否相等。
intersection(other[, out])返回表示重叠部分的新矩形。
union(other[, out])返回一个包含两个矩形的矩形。

API 参考​

🌐 API Reference