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

问题描述

| 我想根据浏览器窗口的宽度更改我的拉斐尔画布区域的宽度，但是我的代码无法按预期工作。以下代码显示了我尝试过的内容：我的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);

        };
}();

当我在一个小的浏览器窗口中启动我的应用程序时，画出了一个圆圈，拉斐尔画布的宽度为初始浏览窗口的宽度* 0.5，然后最大化了浏览窗口，我期望拉斐尔画布的宽度会随着浏览器窗口会最大化，但是canvas保持与初始大小相同。我哪里错了？

解决方法

您没有关闭<div class=\"my-canvas\">标签。您的CSS高度标签上没有度量单位（例如px或em）。除非您的width变量是魔术，否则您不会使用$(window).resize钩子更新任何元素的宽度。您仅将width变量设置为<div class=\"my-canvas\">宽度的一半。 , 像这样创建您的论文：

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

raphael.js 大小大小改变改变浏览器浏览器画布窗口窗口

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

问题描述

解决方法

相关问答