Я хотел бы изменить ширину области холста 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 {
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 будет увеличиваться как окно браузера увеличивается, но холст остается таким же, как первоначальный размер. Где я не прав?
