Вместо указания ширины и высоты холста Рафаэля мне нужно, чтобы он был на 100% размером с его контейнером. Поэтому я мог просто сделать Raphael ( "контейнер", containerElement.width, containerElement.height) и установить функцию onresize на reset те значения. Но тогда контент становится очень нервным и беспокойным, когда я изменяю размер окна или контейнера, потому что полосы прокрутки (которые я хочу, если они становятся слишком маленькими) вспыхивают и исчезают.
Это правильный способ связать холст Рафаэля с полным размером контейнера? Я также хотел бы предоставить возможность сделать холст Рафаэля "полным экраном", занимая все окно браузера.
Если вы используете div, вы можете использовать CSS, чтобы установить его на 100% от ширины и высоты. Затем вы используете Raphael("container", "100%", "100%")
Что касается полноэкранного режима, большинство браузеров имеют команду для этого. Поэтому, если вы действительно делаете 100%, то когда вы нажимаете кнопку команды, например. (F11 в firefox), он станет ПОЛНЫМ экраном.
Raphael("container", "100%", "100%"); заполнит холст до ширины/высоты контейнера DIV. Это отлично работает в Chrome и Safari. Чтобы получить Firefox на борту, вам нужно будет предоставить тело и html 100% ширину/высоту в css, иначе вектор будет обрезан.
Немного поздно, но я отправлю сюда для поиска других людей.
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, вы можете определить все свои фигуры на основе тех же переменных.