Question

我创建了一个画布但是当我调整窗口大小时，画布内容正在消失。我使用以下代码。所以画布和背景图像的原始大小是960x558。我正在使用那些app.stage.canvas的宽度和高度，因为画布和背景图像的大小不同。

function resize(){
        app.stage.canvas.width = $('#canvas').parent().width();
        //app.stage.canvas.height = window.innerHeight;
        app.stagetools.canvas.width = $('#canvas').parent().width();


        //tools container
        if(app.stage.canvas.width < 960){
            app.stage.canvas.height = '558';
        }

        if(app.stage.canvas.width < 739){
            app.stage.canvas.height = '400';
        }

        if(app.stage.canvas.width < 510){
            app.stage.canvas.height = '300';
        }

        if(app.stage.canvas.width < 450){
            app.stage.canvas.height = '240';
            tools.toolsScale = 0.7;
        }

        tools.toolsContainer.scaleX = tools.toolsScale;
        tools.toolsContainer.scaleY = tools.toolsScale;
        tools.toolsContainer.x = app.stagetools.canvas.width/2 - 150 * tools.toolsScale;



        app.container.x = app.stage.canvas.width/2;
        app.container.y = app.stage.canvas.height/2;

        //background image      
        app.bgscale = app.stage.canvas.width /  app.backgroundBounds.width;

        if(app.backgroundBounds.height * app.bgscale > app.stage.canvas.height){
           app.bgscale = app.stage.canvas.height /  app.backgroundBounds.height;
        }

        app.backgroundContainer.scaleX = app.bgscale;
        app.backgroundContainer.scaleY = app.bgscale;


        app.backgroundContainer.x = Math.floor(app.stage.canvas.width/2 - app.backgroundBounds.width/2 * app.bgscale);
        app.backgroundContainer.y = Math.floor(app.stage.canvas.height/2 - app.backgroundBounds.height/2 * app.bgscale);


        tools.clearHandler();

        app.stage.update();
        app.stagetools.update();

    }

Answer 1

这是可以预料的。调整画布大小时，其内容将被清除。

来自 standard ：

当用户代理将位图尺寸设置为宽度和高度时，   它必须执行以下步骤：
      ...
      3.将划痕位图的大小调整为新的宽度和高度，并将其清除为完全透明的黑色       4.如果渲染上下文具有输出位图，并且临时位图是与输出位图不同的位图，则将输出位图的大小调整为新的宽度和高度，并将其清除为完全透明的黑色。

要解决此问题，您必须侦听窗口对象的resize事件并在调用时重绘所有内容：

window.addEventListener("resize", function() {
    // call redraw method here...
}, false);

希望这有帮助。

如何调整画布上的内容？

1 个答案: