размер импорта Raphael SVG - PullRequest
Новая
       25

размер импорта Raphael SVG

3 голосов
/ 23 августа 2011

Я создал и SVG-файл из Illustrator-изображения. Я использую это: https://github.com/wout/raphael-svg-import для импорта и отображения векторного изображения.

Я читаю svg-файл в виде текста и отправляю его в функцию импорта: 

var mygetrequest = new XMLHttpRequest();
var svgdata = mygetrequest.responseText; 
paper.importSVG(svgdata); //where paper is my Raphael canvas

Все работает очень хорошо.

Но я не могу найти какую-либо информацию или подсказки о том, как изменить настройки и вид изображения? Например, я бы очень хотел, чтобы он заполнил свой контейнер, не обращая внимания на его размер.

Есть идеи? Документация, чтобы помочь мне в пути? Что-нибудь, действительно ...

Ответы [ 3 ]

3 голосов
/ 23 августа 2011

Я могу предложить вам две идеи:

1) возможно импорт SVG учитывает исходный размер и масштабирует вас.Однако при редактировании в Illustrator у вас может быть документ намного большего размера, что сбивает с толку svgImport?

2) В противном случае вы можете импортировать бумагу в виде набора.И масштабируйте набор. 

var set = paper.set();
paper.importSVG(svgdata, set);
set.scale( 2, 2, centerx, centery );

(я не уверен, без примера поиграть, какими должны быть centerx и centery).

[EDIT (после утверждения)] КажетсяРафаэль позволяет вам получить ограничивающую рамку набора: 

var bbox = set.getBBox();
// You'll now have bbox.x, bbox.y, bbox.width and bbox.height at your disposal. 
// For example:
paper.rect( bbox.x, bbox.y, bbox.width, bbox.height ).attr('border', 'red');

Поэтому я бы сказал, что вы можете:

  1. Получить ограничительную рамку импортированного набора SVG
  2. Использоватьset.translate чтобы выровнять центр ограничительной рамки по центру бумаги (например, для перевода x используйте что-то вроде ( paperwidth / 2 ) - ( bbox.x + bbox.width / 2 )).
  3. Масштаб в зависимости от размера ограничивающей рамки по сравнению с размером бумаги.Вы, вероятно, хотите масштабировать, сохраняя соотношение сторон, поэтому вам придется использовать тот, который ближе всего к 1 (из paper.width/bbox.width и paper.height/bbox.height).
  4. (Примечание: используйте центр бумаги сейчас какцентр масштабирования - так как вы перевели свой набор, это на самом деле и центр набора svg)

Я сделал это с макушки головы, чтобы он не был точным на 100%, но есливы поняли, что, вероятно, сможете избавиться от глюков.

0 голосов
/ 16 марта 2012

У меня была точно такая же проблема, как и у оригинального постера.Я делал то же самое, что и он.Я столкнулся с проблемами, которые не мог решить в течение нескольких дней, даже после того, как прочитал решение / идеи от Jochem.

Моя конкретная проблема заключалась в том, что в Internet Explorer (все версии) изображение продолжало отображаться за пределами границ, в частности выравниваясь по правому нижнему углу содержащего элемента div.

  • Попытка центрировать и «подогнать» изображение к контейнеру с помощью преобразований не сработала, и было нелегко понять реализацию преобразований в Raphael.
  • Я понял, что библиотека Raphael-svg-import была неполной,Невозможно работать с группами svg, а документация отсутствует.

Потратив так много времени на эту проблему, мой старший разработчик пришел к выводу, что этот плагин имеет недостатки и непригоден для использования.

До сих пор мне не удалось найти альтернативное решение, отвечающее моим конкретным требованиям (мы не можем использовать Flash из-за политики компании).Для тех, у кого нет этих ограничений, я рекомендую SVGWeb

* 1016 от Google. Хотя это не ответ на вопрос ОП, мои выводы могут сэкономить время для кого-то, кто может столкнуться с этой проблемой в будущем..
0 голосов
/ 23 августа 2011

У меня была похожая проблема. Что я сделал, так это открыл SVG в Inkscape (программа-редактор SVG), изменил размер, пока он не был в порядке ... но, возможно, есть лучший способ!

...