Как я могу масштабировать элементы java Raphael при изменении размера окна с помощью jquery

Как я могу перемасштабировать весь элемент внутри холста Raphael при смене окна?

учитывая следующий код /​​DEMO, если я изменил размер только моего окна div container, так как я установил его ширину до 50% от ширина окна и ни одна из (rect, circle или path) не изменилась

КОД

<div id="container"></div>​
 #container{border : 1px solid black ;
               width : 50% ;
               height:300px}​
var con = $("#container");
var paper = Raphael(con.attr('id'), con.attr('width'), con.attr('height'));
var win = paper.rect(0,0,400,300).attr({stroke: 'black' }) ; 
var path = paper.path("M 200 100 l 100 0 z") ; 
var cir = paper.circle(50, 50, 40);

Ответы

Ответ 1

Если вы используете Raphaël версии 2.0 или новее, альтернативой является вызов paper.setViewBox для настройки вашей системы координат, а затем позволить браузерам автоматически отрегулируйте размер.

Обновление: Хорошо, получается, что Raphaël немного менее автомасштабируем, чем я думал... во всяком случае, здесь пример (raphaël по-прежнему устанавливает абсолютную ширину/высоту для корня <svg> , поэтому их необходимо удалить для нормального масштабирования svg). Затем размер определяется CSS, а svg просто вписывается в указанную область. Это можно настроить, чтобы иметь дело с переполняющим контентом, что может произойти из-за соотношения сторон svg viewBox, не соответствующего блоку CSS, в который он помещен. Вы делаете это, добавляя атрибут preserveAspectRatio к элементу root svg.

Вы можете узнать больше о значениях, которые вы можете установить в атрибуте svg preserveAspectRatio здесь, но три значения, которые, вероятно, проценты 'none' (для сжимания/растяжения для соответствия любому прямоугольнику), 'xMidYMid slice' (для масштабирования до заполнения прямоугольника, возможно, отсечения некоторых частей, если аспект не соответствует), 'xMidYMid meet' (это по умолчанию, так же, как и не указывать pAR вообще, и означает, что контент будет центрирован и будет переполняться в одном направлении, если аспект не соответствует).

Ответ 2

http://jsfiddle.net/vnTQT/

    var paper = Raphael("wrap");
    paper.setViewBox(0,0,w,h,true);
    paper.setSize('100%', '100%');

Использовал это (paper.setViewBox) с помощью paper.setSize('100%', '100%') и изменил размер окна с изменением размера содержимого SVG, без использования svg-функций.

Ответ 3

Я думаю, что нашел решение: следующий код будет масштабировать весь элемент при изменении размера окна, и это то, что я искал

            var w = $(window).width();
            var h = $(window).height();
            function draw(w, h) {
                var paper = Raphael($('#wrap').attr('id'), w, h);
                paper.setViewBox(0, 0, 1500, 1500, true);
                var rec = paper.rect(0, 0, 200, 200).attr({ stroke: 'black' });
                var cir = paper.circle(100, 100, 50);
            };
            draw(w, h);
            function resize() {
                var xw = $(window).width();
                var xh = $(window).height();
                draw(xw, xh)
            }
            $(window).resize(resize);

ссылка от @Erik Dahlström: Paper.setViewBox(x, y, w, h, fit) И 'атрибут viewBox

Ответ 5

Если у вас есть набор элементов для изменения размера, вы можете использовать непосредственно в своем js-коде...

for (var i = 0; i < your_set.length; i++) {
    your_set[i].scale(ratio, ratio, 0,0);
};

... и функцию для перезагрузки страницы при изменении размера браузера:

window.addEventListener('resize', function () { 
    "use strict";
    window.location.reload(); 
});