Масштабировать путь до размера бумаги или задавать размеры пути в пикселях с помощью RaphaelJS - PullRequest
Новая
       3

Масштабировать путь до размера бумаги или задавать размеры пути в пикселях с помощью RaphaelJS

2 голосов
/ 26 марта 2012

Я пытаюсь уменьшить иконки, которые я рендерим с помощью RaphaelJS. Использование "transform": "s.5,.5,0,0" прекрасно работает, но я бы предпочел иметь возможность давать абсолютные значения в пикселях, например, 20px. Хорошей альтернативой было бы получить путь (и) для автоматического масштабирования до размеров бумаги. Возможно ли что-то из этого?

Мой текущий код, который использует transform: 

$('.cog-menu-options-icon').each(function (i) {
    paper = Raphael($(this)[0], 20, 20);
    paper.path(window.icons.wrench).attr({ "fill": "#333", "transform": "s.5,.5,0,0" });
});

Можно ли установить путь для автоматического масштабирования по размеру бумаги? Можно ли задать высоту / ширину пути в пикселях?

1 Ответ

3 голосов
/ 26 марта 2012

Я не очень знаком с Рафаэлем, но не могли бы вы использовать функцию ограничивающего прямоугольника getBBox(), чтобы получить размеры, и использовать их для вычисления правильного масштаба? 

$('.cog-menu-options-icon').each(function (i) {
    paper = Raphael($(this)[0], 20, 20);

    var icon = paper.path(window.icons.wrench);
    var max = icon.getBBox().width;
    var h = icon.getBBox().width;
    if(h>max) {
       max = h;
    }
    var scale = 20/max;
    icon.attr({ "fill": "#333", "transform": "s"+scale+","+scale+",0,0" });
});

Вот пример: http://jsfiddle.net/xUyRS/

Я добавил код для перевода значка, если путь не имеет 0,0-начала, и для центрирования значка.

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

...