Question

我想根据浏览器窗口的宽度变化调整我的raphael画布区域的宽度，但是我的代码没有像我预期的那样工作。以下代码显示了我尝试的内容：

我的 index.html 页面：

<body>
  <div class="my-canvas">

    <script src="js/jquery-1.5.1.js"></script>
    <script src="js/raphael.js"></script>
    <script src="js/myWin.js"></script>
    <script src="js/myRaphaelApp.js"></script>
</body>

我的CSS定义了my-canvas的初始大小：

.my-canvas {

    width: 50%;
    height:800;

}

我有 myWin.js ，它可以获取当前浏览器窗口的宽度，并通过调用jQuery函数$(window).resize(...)来监听浏览器窗口大小的变化：

的 myWin.js 的

myWin = function(){


    var width=$('.my-canvas').width()*0.5;

    $(window).resize(function() {
        width=$('.my-canvas').width()*0.5; //update the width as browser window size is changing


    });



    return {
        getWidth: function(){
            $(window).resize();
            return width;
        }
        };
}();

开始在这里渲染raphael：

的 myRaphaelApp.js 的

myRaphaelApp = function(){


    var width = myWin.getWidth(); //get the width of the current browser



    return {
        startRender: function(){


            paper = Raphael("graph", width, height); //width is not updated...
                        var c = paper.rect(10, 10, 50, 50);

        };
}();

当我在一个小尺寸的浏览器窗口中启动我的应用程序时，圆圈被绘制并且raphael画布具有初始浏览窗口的宽度* 0.5，然后我最大化了浏览窗口，我期待我的raphael画布宽度将随着浏览器窗口的最大化而增加，但画布保持与初始大小相同。我哪里错了？

Answer 1

您尚未关闭<div class="my-canvas">代码。
您的CSS高度标记上没有度量单位（例如px或em）。
除非您的width变量是魔术，否则您不会使用$(window).resize挂钩更新任何元素的宽度。您只是将宽度变量设置为<div class="my-canvas">宽度的一半。

Answer 2

像这样创建你的论文：

paper = Raphael("graph", "100%", "100%");

Raphael.js为什么我的画布大小没有随浏览器窗口大小的变化而改变？

2 个答案: