如何调整画布上的内容大小？ [英] How to resize the content on canvas?

问题描述

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

I have created a canvas but when I resize the window, the canvas content is disappearing. I am using the following code. So the original size of canvas and background image is 960x558. And I am using those app.stage.canvas width and height because the canvas and background image is getting different on is resized.

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();

    }

推荐答案

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

That is to be expected. When resizing the canvas its content is cleared.

从 标准 ：

From the standard:

当用户代理将位图尺寸设置为宽度和高度
时，它必须运行以下步骤：

...

3.将临时位图的大小调整为

4.如果渲染上下文具有输出位图，并且草绘位图是与输出位图不同的位图，则将输出位图的大小调整为新宽度和高度并将其清除为完全透明的黑色。

When the user agent is to set bitmap dimensions to width and height, it must run the following steps:
...
3. Resize the scratch bitmap to the new width and height and clear it to fully transparent black.
4. If the rendering context has an output bitmap, and the scratch bitmap is a different bitmap than the output bitmap, then resize the output bitmap to the new width and height and clear it to fully transparent black.

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

To get around this you must listen to the resize event of the window object and redraw all the content when invoked:

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

希望这会有所帮助。

这篇关于如何调整画布上的内容大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！