1

I would like to draw a grid in perspective and draw a circle in in te left bottom corner. But I am not able to get it right.

So, first I draw the grid and circle without perspective.

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

With this code, I get the following result

result from code above

This is all ok, the circle is in te bottom left corner.

Now I set the perspective of the grid in init(). I use rotationY (I don't know if this is the proper way). The angle is 20 degrees.

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

The result is not ok anymore. The circle isn't anymore in the bottom left corner of the grid.

Circle is not in bottom left corner of grid

My question is: how do I change the position of the circle, so that it is in the bottom left corner of the grid in perspective?

enter image description here

I tried a lot, but my mathematics aren't that good anymore. This is example code that doesn't put the circle at the bottom left corner.

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

I hope you understand my question and that you can help me.

Thanks,

Vincent

1 Answer 1

3

I think you're over-complicating the problem. You only need to rotate both the grid and the circle in the same container. In this case, your 'test' class is the container, but you could always create another sprite as the container.

So, if you want to rotate both grid and circle, just do this.rotationY = -20 instead of _gridSprite.rotationY = -20;

2
  • Thanks, tis works, stupid I forgot that. But now I want to change the dimensions of the grid, by dragging the circle. When I do this the mouse pointer isn't in perspective but the circle is. So I need the same formula to put the red circle under the mouse pointer
    – Vinzcent
    May 17, 2011 at 14:33
  • Please accept this answer then. I'm not sure what exactly you mean by 'the mouse pointer isn't in perspective'. You might want to create another question for that. Plus, why aren't using a 3D library as it seems that you're trying to create some kind of 3D editor?
    – J_A_X
    May 17, 2011 at 14:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.