CODEWITHSUNDEEP
javascripthtmlhtml5-canvaskineticjs
user3414354
user3414354

Reputation: 301

How to calculate to position x, y considering the scale

for example I need to move to point: [50, 50], and I have stage scale of 10.4, how do I calculate the position considering the scale what is the formula?

    $('#bPhoneSearch').click(function(e){

        e.preventDefault();
        node.nextXPoint = (stage.width() / 2 - pos.x);
        node.nextYPoint = (stage.height() / 2 - pos.y);
        node.status = 'moving';
    });

On click I'am getting the end point where I need to reach(it will be in the center) AND in my frameanimation function:

                if(node.status == 'moving')
                {

                    var dx = (stage.x() - node.nextXPoint);
                    var dy = (stage.y() - node.nextYPoint);
                    var dist = Math.sqrt(dx * dx + dy * dy);
                    console.log(dist);
                        if(dist < 5)
                        {

                            stage.x(node.nextXPoint);
                            stage.y(node.nextYPoint);
                            node.status = '';
                        }
                        else
                        {
                        var angle = Math.atan2(dy, dx);
                        var speedX = -Math.cos(angle) * 6;
                        var speedY = -Math.sin(angle) * 6;

                        stage.x(stage.x() + speedX);
                        stage.y(stage.y() + speedY);
                        }
                }

I'am doing a moving animation, now it works ok, but when I scale the stage, the position its getting wrong, so the question is where do I put the scale calculation.

how to get the stage scale: stage.getScaleX(), stage.getScaleY()

Upvotes: 1

Views: 1595

Answers (1)

Jonas Grumann
Jonas Grumann

Reputation: 10786

I'm not sure I got the question correctly as this seems a bit too simple. Am I missing something?

scale = 10.4; // your scale    
posXScaled = posX * scale; //posX would be 50 in your example positions[0]
posYScaled = posY * scale; // positions[1]

EDIT

I think you need to add your scale calculation here:

var dx = (stage.x() - node.nextXPoint) * scale;
var dy = (stage.y() - node.nextYPoint) * scale;

You might also need to update the conditional:

if(dist < 5 * scale)

Upvotes: 2

Related Questions