Search code examples
javascriptcanvaskonvajskonva

Don't effect element position while scaling stage in konva.js

I am creating page creation software online using amazing konva.js so the problem is when I was scaling the stage the whole elements are changing there position. Before scaling whole stage enter image description here

After scaling the stage the line text is not in center.

enter image description here

the background at back is just rect having same width height of stage and having background image.
This is my scaling code.

function scaleboth(_x,_y){
stageBackgroundRect.scale({x:_x,y:_y});
stage.scale({x:_x,y:_y});

layer.batchDraw();
}

if you want to see demo here it is, https://mypagemaker.s3.amazonaws.com/index.html Thanks, I promise I will give bounty to correct answer.


As I have to offset it,I have done this but no change 
function minusStage(){
    stage.offsetX(stage.width() / 2);
    stage.offsetY(stage.height() / 2);

    scaleboth(stage.scaleX() - 0.01,stage.scaleY() - 0.01);
}
Solution

  • Your background rectangle is inside a stage. So scaling the stage will affect the absolute scaling of all its children including the background rectangle.

    You just need to apply scale once on one of the parents (it can be the stage).