Холст Рафаэля, заполняющий контейнер div

Вместо указания ширины и высоты холста Рафаэля мне нужно, чтобы он был на 100% размером с его контейнером. Поэтому я мог просто сделать Raphael ( "контейнер", containerElement.width, containerElement.height) и установить функцию onresize на reset те значения. Но тогда контент становится очень нервным и беспокойным, когда я изменяю размер окна или контейнера, потому что полосы прокрутки (которые я хочу, если они становятся слишком маленькими) вспыхивают и исчезают.

Это правильный способ связать холст Рафаэля с полным размером контейнера? Я также хотел бы предоставить возможность сделать холст Рафаэля "полным экраном", занимая все окно браузера.

Ответ 1

Если вы используете div, вы можете использовать CSS, чтобы установить его на 100% от ширины и высоты. Затем вы используете Raphael("container", "100%", "100%")

Что касается полноэкранного режима, большинство браузеров имеют команду для этого. Поэтому, если вы действительно делаете 100%, то когда вы нажимаете кнопку команды, например. (F11 в firefox), он станет ПОЛНЫМ экраном.

Ответ 2

Raphael("container", "100%", "100%"); заполнит холст до ширины/высоты контейнера DIV. Это отлично работает в Chrome и Safari. Чтобы получить Firefox на борту, вам нужно будет предоставить тело и html 100% ширину/высоту в css, иначе вектор будет обрезан.

Ответ 3

Немного поздно, но я отправлю сюда для поиска других людей.

    var h = $('container').height(); //get the container height into variable h       
    var w = $('container').width(); //get the container width into variable w
    //set your Raphael canvas to the variables
    var contpaper = Raphael("container", w, h); 
    var doit;
    //function to reload the page and/or do other adjustments
    function resizedw(){   
        document.location.reload()                
    }
    //call function 200 ms after resize is complete.
    $(window).resize(function(){clearTimeout(doit); 
        doit = setTimeout(function() {
        resizedw();
    }, 200)});

Это решение представляет собой кросс-браузер и мобильный сейф, поэтому вы можете использовать его для создания адаптивного дизайна. Добавляя предостережения для ширины или высоты видового экрана к вашему javascript в форме операторов if, вы можете определить все свои фигуры на основе тех же переменных.