数学
¥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) | 计算 3D 向量积的标量 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