在konva.js中缩放阶段时不影响元素位置

编程问答 2022-08-15

问题描述

我正在使用令人惊叹的konva.js在线创建页面创建软件，所以问题是当我缩放舞台时，整个元素都在那里改变位置。在扩展整个阶段之前

enter image description here

缩放舞台之后，行文本不在中心。

enter image description here

后面的背景是矩形，具有相同的舞台高度和背景图像。
这是我的缩放代码。

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

layer.batchDraw();
}

如果您想在此处查看演示， https://mypagemaker.s3.amazonaws.com/index.html 谢谢，我保证我会悬赏以纠正问题。


因为我必须抵消它，所以我做到了但没有任何改变 
function minusstage(){
    stage.offsetX(stage.width() / 2);
    stage.offsetY(stage.height() / 2);

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

解决方法

您的背景矩形位于舞台内。因此缩放舞台会影响其所有子元素（包括背景矩形）的绝对缩放。

您只需要在其中一位父母身上应用比例尺（可以是舞台）。

canvasjavascriptkonvakonvajs