Question

使用Flash Canvas构建的动画是否可以在浏览器中响应？我的意思是我希望画布和动画本身在保持原始宽高比的同时根据浏览器窗口的大小重新调整大小。

我从发布我的画布获得的代码如下，虽然我一整天都在努力解决这个问题，但我无法做到这一点。

<script>
var canvas, stage, exportRoot;

function init() {
    canvas = document.getElementById("canvas");
    exportRoot = new lib.test_1();

    stage = new createjs.Stage(canvas);
    stage.addChild(exportRoot);
    stage.update();

    createjs.Ticker.setFPS(lib.properties.fps);
    createjs.Ticker.addEventListener("tick", stage);
}
</script>

和

<canvas id="canvas" width="640" height="360" style="background-color:#FFFFFF"></canvas>

有人可以帮帮我吗？我没有很多java脚本或画布的经验，而且我更新代码的尝试并没有让我走得太远。在stackoverflow的另一个帖子的帮助下，我设法让我的画布响应，但不是动画。动画只停留在同一个地方。非常感谢你提前！ Bellow是使我的画布响应的代码，如果它有任何帮助：

<script>
var canvas, stage, exportRoot, myCanvas;

function init() {
    canvas = document.getElementById("canvas");
    exportRoot = new lib.test_1();

    stage = new createjs.Stage(canvas);
    stage.addChild(exportRoot);
    stage.update();

    createjs.Ticker.setFPS(lib.properties.fps);
    createjs.Ticker.addEventListener("tick", stage);

    var myCanvas = document.getElementById("canvas");
    myCanvas.width = document.documentElement.clientWidth;
    myCanvas.height = document.documentElement.clientHeight;

    window.addEventListener("resize", resizeCanvas, false);

    function resizeCanvas (e) {
    var myCanvas = document.getElementById("canvas");

    myCanvas.width = document.documentElement.clientWidth;
    myCanvas.height = document.documentElement.clientHeight;
}

}
</script>

Answer 1

我找到了适用于Adobe论坛的解决方案。这不是100％完美，但它完成了工作： https://forums.adobe.com/message/6405264

基本上只需通过CSS并在画布上添加100％的宽度即可正确缩放画布和动画。所以你的画布看起来像这样：

<canvas id="canvas" width="720" height="660" style="background-color:#FFFFFF; width: 100%;"></canvas>

此解决方案的问题在于，虽然它可以缩放画布和动画，但它不会将其缩放为矢量，因此质量可能会有所不同。在我的情况下，动画只有大约10kb所以我将以大约3种不同的尺寸创建它，相隔300px来帮助它。

可以帮助一些有更多javascript经验的旁注是，如果你将所有的动画片段和动画放到一个父片段中，当你从flash发布它时，你会在前几行中看到类似的东西。 .js文件中的代码：

this.my_anim_container.setTransform(360,329.2,2,2,0,0,0,0,8.6);

2“2”控制动画的比例，所以如果你将它们改为3，你的动画现在会被放大。根据您的浏览器大小找出修改方法会更好，但我个人没有javascript知识。

Flash Canvas响应动画大小

1 个答案: