Question

我已经发起了一个PIXI js画布：

g_App = new PIXI.Application(800, 600, { backgroundColor: 0x1099bb });

设置容器：

container = new PIXI.Container();
g_App.stage.addChild(container);

将背景纹理（2000x2000）放入容器中：

var texture = PIXI.Texture.fromImage('picBottom.png');
var back = new PIXI.Sprite(texture);
container.addChild(back);

设置全局：

var g_Container = container;

我在容器和画布舞台元素上执行各种轴点和旋转：

// Set the focus point of the container
g_App.stage.x = Math.floor(400);
g_App.stage.y = Math.floor(500); // Note this one is not central
g_Container.pivot.set(1000, 1000);
g_Container.rotation = 1.5; // radians

现在我需要能够将画布像素转换为背景纹理上的像素。

g_Container有一个元素transform，后者又有几个元素localTransform，pivot，position，scale和{{1} }。同样，skew具有相同的g_App.stage元素。

在数学中，这很简单，你只需要矢量点并对它们进行matix操作。然后以另一种方式返回，你只需找到那些矩阵的反转并向后乘以。

那么我在pixi.js做什么呢？

如何转换画布上的像素并查看它在背景容器上的像素？

Answer 1

注意：以下是使用美国使用矩阵的惯例编写的。它们在左侧有行向量，并乘以右侧的矩阵。（我们在英国讨厌的英国人正好相反。我们在右边有列向量，并用左边的矩阵乘以。这意味着做同样工作的英国和美国矩阵看起来会略有不同。）

现在我把你们所有人都弄糊涂了。

g_Container.transform.localTransform - 此矩阵将世界坐标转换为缩放/转置/旋转的COORDS

g_App.stage.transform.localTransform - 此矩阵采用旋转的世界坐标和输出屏幕（或更准确地说）html canvas coords

例如，Container矩阵是：

MatContainer = [g_Container.transform.localTransform.a, g_Container.transform.localTransform.b, 0]
               [g_Container.transform.localTransform.c, g_Container.transform.localTransform.d, 0]
               [g_Container.transform.localTransform.tx, g_Container.transform.localTransform.ty, 1]

和要旋转的容器矩阵是：

MatToScreen = [g_App.stage.transform.localTransform.a, g_App.stage.transform.localTransform.b, 0]
              [g_App.stage.transform.localTransform.c, g_App.stage.transform.localTransform.d, 0]
              [g_App.stage.transform.localTransform.tx, g_App.stage.transform.localTransform.ty, 1]

所以从世界坐标到屏幕坐标（注意我们的矢量在左边是一行，所以第一个在世界坐标上起作用的操作矩阵也必须在左边），我们需要乘以矢量：

MatAll = MatContainer * MatToScreen

因此，如果您有一个世界坐标向量vectWorld = [worldX, worldY, 1.0]（我将在最后解释1.0），那么要进入屏幕坐标，您将执行以下操作：

vectScreen = vectWorld * MatAll

因此，要获得屏幕坐标并获得世界坐标，我们首先需要计算MatAll的逆矩阵，称之为invMatAll。（有很多地方告诉你如何做到这一点，所以我不会在这里做。）

因此，如果我们有屏幕（画布）坐标screenX和screenY，我们需要创建一个向量vectScreen = [screenX, screenY, 1.0]（我将再次解释1.0），然后到达世界坐标worldX和{ {1}}我们这样做：

worldY

就是这样。

那么1.0呢？

在2D系统中，您可以进行旋转，使用2x2矩阵进行缩放。遗憾的是，您不能使用2x2矩阵进行2D翻译。因此，您需要3x3矩阵来完整描述所有2D缩放，旋转和平移。这意味着您还需要制作矢量3D，并且需要将1.0放在第三个位置才能正确进行翻译。在任何矩阵运算之后，此1.0也将为1.0。

注意：如果我们在3D系统中工作，我们需要4x4矩阵，并在我们的4D向量中放置一个虚拟1.0，原因完全相同。

PIXI.js - Canvas坐标到容器坐标

1 个答案: