Рафаэль холст заполнить контейнер div - PullRequest
Новая
       5

Рафаэль холст заполнить контейнер div

21 голосов
/ 15 ноября 2010

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

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

Ответы [ 3 ]

27 голосов
/ 15 ноября 2010

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

Что касается полноэкранного режима, большинство браузеров имеют команду для этого.Так что, если вы действительно делаете 100%, то, когда вы нажимаете, например, командную кнопку (F11 в Firefox), она становится полным экраном.

2 голосов
/ 14 февраля 2012

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

0 голосов
/ 25 июля 2013

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

    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, вы можете определить все свои фигуры на основе одних и тех же переменных.

...