Блог

Главная - Вопросы по программированию - Raphael.js Почему размер моего холста не был изменен при изменении размера окна браузера?

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

#javascript #jquery #raphael #jquery-events

#javascript #jquery #рафаэль #jquery-события

Вопрос:

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

Начните рендерить raphael здесь:

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

Комментарии:

1. В коде Raphael нет способа отслеживать обновленные значения поддерживаемой вами переменной «width». Когда вы инициализируете график, вы передаете только копию текущего значения «width». После этого Рафаэль не имеет никакого контакта с вашим кодом, если вы явно не обновили его в своем собственном обработчике «resize ()».

Ответ №1:

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

Ответ №2:

Создайте свой документ следующим образом:

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