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画布宽度会随着浏览器窗口最大化而增加,但画布保持与初始大小相同。我错在哪里?
答
- 您没有关闭您的
<div class="my-canvas">
标记。 - 您的CSS高度标记没有计量单位(例如px或em)。
- 除非您的
width
变量具有魔力,否则您不会使用$(window).resize
钩子更新任何元素的宽度。您只是将宽度变量设置为<div class="my-canvas">
的一半宽度。
答
创建你的论文是这样的:
paper = Raphael("graph", "100%", "100%");
拉斐尔代码有没有跟踪的“宽度”的变量,你维护的更新值的方式。初始化图形时,只传入“width”的* current *值的副本。此后,除非您在自己的“resize()”处理程序中明确更新,否则Raphael没有与您的代码联系。 – Pointy 2011-05-30 15:45:23