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

【问题标题】：Raphael.js Why my canvas size was not changed with browser window size changing?Raphael.js 为什么我的画布大小没有随着浏览器窗口大小的变化而改变？
【发布时间】：2011-05-30 15:39:21
【问题描述】：

我想根据浏览器窗口的宽度变化来调整我的 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;
        }
        };
}();

从这里开始渲染拉斐尔：

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 画布宽度会随着浏览器窗口最大化而增加，但画布保持与初始大小相同。我哪里错了？

【问题讨论】：

Raphael 代码无法跟踪您维护的“width”变量的更新值。当你初始化图表时，你只传入一个 current 值“width”的副本。此后，除非您在自己的“resize()”处理程序中明确更新，否则 Raphael 将不再与您的代码联系。

标签： javascript jquery raphael jquery-events

【解决方案1】：

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

【讨论】：

【解决方案2】：

像这样创建你的论文：

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

【讨论】：