Изменить положение, когда что-то в перспективе - PullRequest
Новая
       2

Изменить положение, когда что-то в перспективе

1 голос
/ 17 мая 2011

Я хотел бы нарисовать сетку в перспективе и нарисовать круг в левом нижнем углу. Но я не могу понять это правильно.

Итак, сначала я рисую сетку и круг без перспективы. 

public class test extends MovieClip
    {
        private var _gridSprite:Sprite;
        private var _xLineHolder:Sprite;
        private var _yLineHolder:Sprite;
        private var _circle:Sprite;

        public function test()
        {
            init();
        }

        private function init()
        {
            _gridSprite = new Sprite();
            this.addChild(_gridSprite);

            _xLineHolder = new Sprite();
            _gridSprite.addChild(_xLineHolder);
            _yLineHolder = new Sprite();
            _gridSprite.addChild(_yLineHolder);

            draw();

            _circle = new Sprite();         
            _circle.graphics.beginFill(0xFF0000);
            _circle.graphics.drawCircle(0, 0, 5);
            this.addChild(_circle);

                   //Here do I set the position of the circle
            _circle.x = _gridSprite.width + _gridSprite.x;
            _circle.y = _gridSprite.height + _gridSprite.y;
        }

        private function draw()
        {
            var spaceXDiv:Number = 160/20;
            var spaceYDiv:Number = 160/20;

            _xLineHolder.graphics.clear();
            _yLineHolder.graphics.clear();

            _xLineHolder.graphics.lineStyle(1);
            _yLineHolder.graphics.lineStyle(1);

            for(var i:int = 0; i <= spaceXDiv; i++){
                _xLineHolder.graphics.moveTo(i * 20, 0);
                _xLineHolder.graphics.lineTo(i * 20, 160);
            }

            for(var j:int = 0; j <= spaceYDiv; j++){
                _yLineHolder.graphics.moveTo( 0, j * 20);
                _yLineHolder.graphics.lineTo(160, j * 20);
            }
        }
    }

С этим кодом я получаю следующий результат

result from code above

Все нормально, круг в левом нижнем углу.

Теперь я установил перспективу сетки в init(). Я использую вращение Y (я не знаю, правильно ли это). Угол составляет 20 градусов. 

_gridSprite = new Sprite();
this.addChild(_gridSprite);
_gridSprite.rotationY = -20;

Результат больше не в порядке. Круг больше не находится в левом нижнем углу сетки.

Circle is not in bottom left corner of grid

Мой вопрос: как изменить положение круга, чтобы оно находилось в нижнем левом углу сетки в перспективе?

enter image description here

Я много пробовал, но моя математика уже не так хороша. Это пример кода, который не помещает кружок в нижний левый угол. 

var gridLeft:Number = _gridSprite.width + _gridSprite.x;
_circle.x = gridLeft - gridLeft * Math.tan(20 * Math.PI / 180);

var gridBottom:Number = _gridSprite.height + _gridSprite.y;
_circle.y = gridBottom - gridBottom * Math.tan(20 * Math.PI / 180);

Надеюсь, вы понимаете мой вопрос и можете мне помочь.

Спасибо

Vincent

1 Ответ

3 голосов
/ 17 мая 2011

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

Итак, если вы хотите повернуть сетку и круг, просто наберите this.rotationY = -20 вместо _gridSprite.rotationY = -20;

...