Raphael.js Почему мой размер холста не изменился при изменении размера окна браузера? - PullRequest
Новая
       31

Raphael.js Почему мой размер холста не изменился при изменении размера окна браузера?

1 голос
/ 30 мая 2011

Я хотел бы изменить ширину моей области холста 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);

        };
}();

Когда я запускаю свое приложение в окне браузера небольшого размера, рисуется круг, и холст рафаэля имеет ширину исходного окна просмотра браузера * 0,5затем я максимизирую окно браузера, я ожидал, что ширина холста моего рафаэля будет увеличиваться по мере увеличения окна браузера, но холст останется таким же, как и исходный размер.Где я не прав?

Ответы [ 2 ]

1 голос
/ 26 марта 2013

Создайте свою статью так: 

paper = Raphael("graph", "100%", "100%");
1 голос
/ 30 мая 2011
  1. Вы не закрываете тег <div class="my-canvas">.
  2. У вас нет единицы измерения для вашего тега высоты CSS (например, px или em).
  3. Если ваша переменная width не волшебная, вы не обновляете ширину любого элемента с помощью хука $(window).resize. Вы просто устанавливаете переменную ширины равной половине ширины <div class="my-canvas">.
...