当事物处于透视状态时改变位置

Question

我想在透视图中画一个网格，并在左下角画一个圆圈。 但我无法做到正确。

因此，首先我在没有透视的情况下绘制网格和圆圈。

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);
            }
        }
    }

使用此代码，我得到以下结果

这一切都很好，圆圈位于左下角。

现在我在 init() 中设置网格的视角。我使用旋转Y（我不知道这是否是正确的方法）。角度为20度。

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

结果已经不行了。该圆圈不再位于网格的左下角。

我的问题是：如何更改圆圈的位置，这样它就位于透视网格的左下角？

我尝试了很多，但我的数学不太好不再了。 这是未将圆圈放在左下角的示例代码。

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);

我希望你能理解我的问题并能帮助我。

谢谢，

文森特

Answer 1

我认为你把问题过于复杂化了。您只需在同一个容器中旋转网格和圆即可。在这种情况下，您的“测试”类是容器，但您始终可以创建另一个精灵作为容器。

因此，如果您想同时旋转网格和圆形，只需执行 this.rotationY = -20 而不是 _gridSprite.rotationY = -20;