Как использовать таблицу преобразований в классе Matrix?

Question

Как я могу, если это возможно, использовать эту таблицу преобразования, приведенную в принятом ответе на мой вопрос здесь в ActionScript 3 во Flash?Я понимаю, что это может иметь какое-то отношение к Матрице, но я действительно понятия не имею, возможно ли реализовать это преобразование, приведенное в ответе.Это?Если так, то как?

Answer 1

Хорошо, давайте начнем с вашего преобразования в виде Матрицы (которую я немного сместил, просто чтобы лучше выглядеть - вот что делают последние два значения).

private var gridTransform:Matrix = new Matrix(28, -14, 28, 14, 0, 14);

Теперь, если вы создаете UIComponent, вы можете использовать эту матрицу для рисования вашей сетки:

var grid:UIComponent = new UIComponent();

grid.graphics.beginFill(0xff0000, 0);
grid.graphics.lineStyle(2, 0x888888);

for (var u:int = 0; u < 20; u++)
{
    for (var v:int = 0; v < 20; v++)
    {
        grid.graphics.moveTo(getX(u,v), getY(u,v));
        grid.graphics.lineTo(getX(u+1,v), getY(u+1,v));
        grid.graphics.lineTo(getX(u+1,v+1), getY(u+1,v+1));
        grid.graphics.lineTo(getX(u,v+1), getY(u,v+1));
    }
}
grid.graphics.endFill();

, используя вспомогательные функции:

private function getX(u:Number, v:Number):Number
{
  return gridTransform.transformPoint(new Point(u,v)).x;
}

private function getY(u:Number, v:Number):Number
{
  return gridTransform.transformPoint(new Point(u,v)).y;
}

Примечание: Я знаю, что метод рисования избыточен, но я также делаю это таким образом, чтобы заливка позволяла регистрировать события щелчка в области между сеткой.Есть лучшие способы сделать это, но это не главное.

После того как вы нарисовали сетку на UIComponent, вы можете добавить ее в список отображения:

addChild(grid);

(я использую Flex4, поэтому я использую addElement(grid);)

И чтобы показать, как отобразить события мыши обратно в координаты (u, v), добавьте прослушиватель событий в grid:

grid.addEventListener(MouseEvent.CLICK, grid_clickHandler);

где у нас есть:

private function grid_clickHandler(event:MouseEvent):void
{
    trace("Local coordinates: (" + event.localX + "," + event.localY + ")");
    var inverted:Matrix = gridTransform.clone();
    inverted.invert();
    trace("U-V Coordinates: " + inverted.transformPoint(new Point(event.localX,event.localY)));

}

Если вы хотите, чтобы ваши UV-координаты имели целые числа, вы можете использовать Math.ceil() или Math.floor() или что-то в этом роде.