如何根据konvajs中的浏览器窗口缩放图像

Question

我试过以下

首先将图像加载到舞台中。

 function loadPhoneImage() {
        phoneImageStage = new Konva.Stage({
            container: 'phoneContainer',
            width: 600,
            height: 550
        });
        phoneImageLayer = new Konva.Layer();

        phoneImageStage.add(phoneImageLayer);

        var phoneImg = new Konva.Image({
            x: 30,
            y: 20,
            width: 450,
            height: 500
        });
        phoneImageLayer.add(phoneImg);

        var phoneImage = new Image();
        var self = this;
        phoneImage.onload = function () {
            phoneImg.image(phoneImage);
            phoneImageLayer.draw();
        };
        phoneImage.src = '../Content/Avaya_Phone.png';

    }

然后以编程方式在其上添加了一些标签

 function loadPhoneNumberLabel(label) {
        var phoneText = new Konva.Text({
            x: 135,
            y: 73,
            text: label,
            fontSize: 9,
            width: 200,
            fontFamily: 'Calibri',
            fill: 'black',
            align: 'right'
        });
        phoneImageLayer.add(phoneText);

}

在此之后我想根据浏览器尺寸缩放此图像，并且不应在图像上更改标签位置。所以我试过这个

 function fitStageIntoParentContainer() {
        //var stageWidth = document.getElementsByClassName("msgbox")[0].offsetWidth;
        //var stageHeight = document.getElementsByClassName("msgbox")[0].clientHeight;

        var stageWidth=$( window ).width();
        var stageHeight=$( window ).height();
        //var stageWidth=$('#phoneContainer').width();;
        //var stageHeight=$('#phoneContainer').height();
        console.log(stageWidth);
        console.log(stageHeight);
        var container = document.querySelector('#phoneContainer');
        if(container){
            // now we need to fit stage into parent
            var containerWidth = $('#phoneContainer').width();
            var containerHeight = $('#phoneContainer').height();
            // to do this we need to scale the stage

            var scale = (containerWidth/ stageWidth);
            scale=1;
            console.log(scale);

            phoneImageStage.width(containerWidth);
            phoneImageStage.height(containerHeight);
            //phoneImageStage.width(containerWidth);
            //phoneImageStage.height(containerWidth);
            phoneImageStage.scale({ x: scale, y: scale });

            var phoneImg = new Konva.Image({
                x: 30,
                y: 20,
                width: 200,
                height: 300
            });
            phoneImageLayer.add(phoneImg);

            var phoneImage = new Image();
            var self = this;
            phoneImage.onload = function () {
                phoneImg.image(phoneImage);
                phoneImageLayer.draw();
            };
            phoneImage.src = '../Content/Avaya_Phone.png';

            phoneImageStage.draw();
        }
    }

它缩放图像但不是与浏览器相同的比例。

非常感谢您提供的任何帮助。