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

我想根据浏览器窗口的宽度变化来调整我的raphael画布区域的宽度，但是我的代码没有按预期工作。以下代码显示我的尝试：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 { 

    width: 50%; 
    height:800; 

}

我有myWin.js它可以得到当前浏览器窗口的宽度，a

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

开始呈现拉斐尔这里：ND通过调用jQuery函数$(window).resize(...)监听浏览器窗口大小变化

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画布的初始browswer窗口的宽度为* 0.5，然后我最大化browswer窗口，我期待着我的raphael画布宽度会随着浏览器窗口最大化而增加，但画布保持与初始大小相同。我错在哪里？

来源

2011-05-30 Leem

拉斐尔代码有没有跟踪的“宽度”的变量，你维护的更新值的方式。初始化图形时，只传入“width”的* current *值的副本。此后，除非您在自己的“resize（）”处理程序中明确更新，否则Raphael没有与您的代码联系。 – Pointy 2011-05-30 15:45:23

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

来源

2011-05-30 15:48:56 coreyward

谢谢，但我正在寻找一个解决方案（一种更好的方法来摆脱我的问题） – Leem 2011-05-30 15:49:57

正如你希望我把你插入矩阵，所以你不必知道你在做什么（错误的）？ – coreyward 2011-05-30 15:51:23

正如我所说，谢谢，我注意到你已经说过了，我现在也试图摆脱这个问题，但其他人的解决方案是我也想看到的，这并不意味着我不想学习，但学习。 – Leem 2011-05-30 15:54:56

创建你的论文是这样的：

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

来源

2013-03-25 22:57:01

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

回答

相关问题