Масштабирование SVG (Raphael.js), как SWF

Я начал использовать Raphael.js несколько дней назад, и мне это очень нравится. Единственное, что мне не удалось выяснить, - это получить тег "бумага" или svg/vml, чтобы заполнить окно браузера, например, swf. См. этот пример.

Обратите внимание на то, как приведенный выше пример изменяет размер с помощью окна браузера.

Мне удалось получить "бумагу" для изменения размера с помощью окна браузера, но не удастся получить всю векторную графику, чтобы настроить их размер. Любая обратная связь будет с благодарностью.

ИЗМЕНИТЬ

Я попробовал кучу разных маршрутов с этим. viewBox работал отлично, но только SVG. Я только что понял, как это сделать, используя наборы Рафаэля и небольшой код в окне window.onresize. Я опубликую мои результаты позже сегодня или завтра. Мне все равно хотелось бы увидеть другие решения вопроса, если они есть.

Ответ 1

Это заняло у меня некоторое время, но я наконец нашел решение этой проблемы. Я завернул решение в небольшой файл js, который можно использовать с Рафаэлем. Вы можете получить файл js вместе с простой документацией здесь. увидеть в действии.

Как это работает:

используйте viewBox для svg
обернуть все узлы vml в узле группы
оберните конструктор Raphael так, чтобы узел группы vml был передан конструктору Raphael
измените несколько свойств CSS при изменении размера бумаги, чтобы справиться с центрированием, отсечкой и сохранением правильного соотношения сторон.

Любая обратная связь будет принята с благодарностью.

Ответ 2

Хорошо привет Зев,

Я нашел хороший ответ, сделанный парнем по имени Зеван. Тем не менее, я обнаружил, что код слишком сложный для моей симпатии (обязательно jquery, wierd вроде "$ (this)" и т.д.).

Поэтому я упростил это. Теперь он достаточно короткий, чтобы вставить в stackoverflow;):

var paper;

window.ScaleRaphael = function(container, width, height) {
    var wrapper = document.getElementById(container);
    wrapper.style.width = width + "px";
    wrapper.style.height = height + "px";
    wrapper.style.overflow = "hidden";

    wrapper.innerHTML = "<div id='svggroup'><\/div>";
    var nestedWrapper = document.getElementById("svggroup");

    paper = new Raphael(nestedWrapper, width, height);
    paper.w = width;
    paper.h = height;
    paper.canvas.setAttribute("viewBox", "0 0 "+width+" "+height);
    paper.changeSize = function() {
        var w = window.innerWidth
        var h = window.innerHeight
        var ratioW = w / width;
        var ratioH = h / height;
        var scale = ratioW < ratioH ? ratioW : ratioH;

        var newHeight = Math.floor(height * scale);
        var newWidth = Math.floor(width * scale);

        wrapper.style.width = newWidth + "px";
        wrapper.style.height = newHeight + "px";
        paper.setSize(newWidth, newHeight);
    }
    window.onresize = function() {
        paper.changeSize();
    }

    paper.changeSize();

    return paper;
}

Единственный недостаток вашей версии в том, что для нее требуется SVG, она не выполняет VML. Это проблема?

Я использую его с упрощенной версией вашей демонстрационной страницы:

<!DOCTYPE html> 
<html lang="en"> 
<head>
<title>ScaleRaphaël Demo 1</title>
<meta charset="utf-8"> 

<script type="text/javascript" src="raphael.js"></script>
<script type="text/javascript" src="scale.raphael.js"></script>
<script type="text/javascript">

    window.onload = function() {
        var paper = new ScaleRaphael("wrap", 600, 400);

        // draw some random vectors:
        var path = "M " + paper.w / 2 + " " + paper.h / 2;
        for (var i = 0; i < 100; i++){
            var x = Math.random() * paper.w;
            var y = Math.random() * paper.h;
            paper.circle(x, y,
                Math.random() * 60 + 2).
                attr("fill", "rgb("+Math.random() * 255+",0,0)").
                attr("opacity", 0.5);
            path += "L " + x + " " + y + " ";
        }

        paper.path(path).attr("stroke","#ffffff").attr("stroke-opacity", 0.2);

        paper.text(200,100,"Resize the window").attr("font","30px Arial").attr("fill","#ffffff");
    }

      </script>
<style type="text/css">
    body, html {
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    #wrap{
        background-color: orange;
    }
</style>

</head>
<body>

Ответ 3

После изменения размера вы можете перебрать все пути и масштаб() в соответствии с новым масштабом бумаги.

Ответ 4

Вы можете добавить атрибут 'viewBox' в корневой элемент svg для определения системы координат, тогда формы будут масштабироваться до любого размера контейнера. Не уверен, как бороться с VML-стороной вещей. Я предлагаю сообщить о проблеме, https://github.com/DmitryBaranovskiy/raphael/issues.

Ответ 5

Это может быть слишком старым из потока, но Raphael 2.0 по крайней мере имеет метод setViewBox - http://raphaeljs.com/reference.html#Paper.setViewBox

Вам все равно нужно установить фактический размер холста на 100%, поэтому контейнер масштабируется до окна, но вызывает setViewBox с соответствующим w/h в вашем окне. Обратный вызов должен делать трюк.