Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.01.2011, 18:18
Аватар для mycoding
NodeJS developer - ушел
Отправить личное сообщение для mycoding Посмотреть профиль Найти все сообщения от mycoding
 
Регистрация: 06.01.2010
Сообщений: 1,022

Уменьшее svg карт
Подскажите пожалуйста.
Хочется доделать пример для блога
http://javascript.ru/blog/mycoding/Raphael-framework
Карту России уменьшить в векторном редакторе.
Использую Inkscape вроде уменьшает как надо в 3 раза
Но в итоге, после добавления в Raphael карта такая же большая и приходится
программно уменьшать.(хотя если открыть в получившееся изображение само по себе оно уменьше
в 3 раза.)

В современных браузерах Raphael изменяет размер карты быстро, но
в ie6 около 90 секунд.

Вот исходная карта http://upload.wikimedia.org/wikipedi...ts_2007-07.svg
Может помочь пожалуйста?

Последний раз редактировалось mycoding, 09.01.2011 в 18:23.
Ответить с цитированием
  #2 (permalink)  
Старый 09.01.2011, 18:26
Аватар для Gvozd
Матрос
Отправить личное сообщение для Gvozd Посмотреть профиль Найти все сообщения от Gvozd
 
Регистрация: 04.04.2008
Сообщений: 6,246

нету IE 6 чтобы проверить

Последний раз редактировалось Gvozd, 30.04.2012 в 23:36.
Ответить с цитированием
  #3 (permalink)  
Старый 09.01.2011, 20:01
Аватар для mycoding
NodeJS developer - ушел
Отправить личное сообщение для mycoding Посмотреть профиль Найти все сообщения от mycoding
 
Регистрация: 06.01.2010
Сообщений: 1,022

Спасибо за старания, наверное это я туплю.
У меня не получается вставить карту в пример без уменьшения карты.
Наверное я что то недопонимаю.

У Вас Gvozd получился точно такой же пример как у меня.
Почему не получается я не пойму.
Эх ладно.
Ответить с цитированием
  #4 (permalink)  
Старый 09.01.2011, 20:05
Аватар для Gvozd
Матрос
Отправить личное сообщение для Gvozd Посмотреть профиль Найти все сообщения от Gvozd
 
Регистрация: 04.04.2008
Сообщений: 6,246

а как вы ее вставляете-то?
я просто открыл файл в браузере(Opera, FF), и получил уменьшенный вариант.
может быть проблема именно в способе вставки на итоговую страницу?
покажите, как вы это делаете
Ответить с цитированием
  #5 (permalink)  
Старый 09.01.2011, 20:06
Аватар для Vulkan
Профессор
Отправить личное сообщение для Vulkan Посмотреть профиль Найти все сообщения от Vulkan
 
Регистрация: 25.05.2010
Сообщений: 511

mycoding, в карте Gvozd и первоначальном нет никаких изменений кроме 11 и 12 строки, в оригинале:
width="1650"
   height="1000"

в уменьшенном:
width="550"
   height="333"

Так что всё должно работать
Ответить с цитированием
  #6 (permalink)  
Старый 09.01.2011, 20:13
Аватар для mycoding
NodeJS developer - ушел
Отправить личное сообщение для mycoding Посмотреть профиль Найти все сообщения от mycoding
 
Регистрация: 06.01.2010
Сообщений: 1,022

Сама карта если её открыть в браузере получается уменьшенная в 3 раза.
Но в Raphael надо вставлять каждый регион отдельно.
Т.е. вот так
Цитата:
window.Russia = R.set();
Russia.push(
BelgorodOblast = R.path("M 99.9,675.5 C 99.2,674.7 98.1,669.1 97.5,663.1 C 96.9,657 95.9,651.7 95.4,651.2 C 94.8,650.7 92.2,649.5 89.6,648.5 C 85.6,647.1 84.1,645.7 81.2,641.2 C 77.9,636 77.8,635.5 78.9,631.8 C 79.5,629.7 80.6,627.7 81.3,627.5 C 83.3,626.7 90.6,629.8 95.6,633.5 C 98.7,635.9 101.3,637.1 103.5,637.1 C 106.2,637.1 107.4,637.9 110.3,641.4 C 113.6,645.4 113.9,646.3 113.9,652.2 C 113.8,661.8 112.6,665.6 107.8,671 C 102.6,676.8 101.4,677.4 99.9,675.5 Z").attr({city:"BelgorodOblast"}),
BryanskOblast = R.path("M 90.1,593.2 C 89,592.5 89,591.6 90,588.3 C 91.8,582 91,581.1 83.6,581.1 L 77.2,581.1 L 76.5,576 C 75.9,571.5 75.5,570.8 72.4,569.3 C 70.5,568.4 68.9,567.1 68.9,566.3 C 68.9,564.6 76.7,553.1 77.9,553.1 C 78.4,553.1 79.1,554 79.4,555 C 80.4,558.1 93.8,561.2 96.5,559 C 97.4,558.2 101.9,557.4 107,557.1 C 115.2,556.6 115.8,556.7 116.3,558.6 C 117.4,562.6 116.8,565.5 114.3,568.9 C 111.1,572.9 109.3,580.7 111,582.7 C 111.9,583.8 111.7,584.1 110.1,584.1 C 108.9,584.1 106.4,586.1 103.9,589.1 C 100.1,593.6 99.3,594.1 95.6,594.1 C 93.3,594 90.8,593.7 90.1,593.2 Z"),
IvanovoOblast = R.path("M 288.5,586.4 L 281.6,581.8 L 277.9,584 C 272.4,587.1 267.1,586.7 261,582.8 C 256.8,580.1 256,579.2 256.3,577.1 C 256.6,575.3 255.5,573.4 251.4,569.2 C 246.3,563.9 246,563.7 243.6,565 C 241,566.3 235.8,565.9 233,564.2 C 230.9,562.8 236.9,557.8 245.9,553.2 C 250,551 254.8,548.6 256.4,547.7 C 258.5,546.6 262,546.1 267.7,546.1 C 278,546.1 282.6,548.1 287.2,554.8 C 294,564.6 296.2,566.4 304.8,569 C 312.4,571.2 313,571.3 314.7,569.7 C 317,567.7 321.9,567.5 321.9,569.4 C 321.9,570.2 321.2,571.4 320.4,572.1 C 319.4,572.9 318.9,575.1 318.9,578.6 L 318.9,583.9 L 313.3,583.4 C 308.6,583 307.1,583.3 304,585.3 C 294.4,591.7 296.1,591.6 288.5,586.4 Z"),
И т.д.
Т.е. я открываю файл svg нахожу в нем место где прописываются координаты региона и записываю их в методе push.
Т.е. надо чтобы векторный редактор менял координаты регионов, а не width и height.
Ответить с цитированием
  #7 (permalink)  
Старый 09.01.2011, 20:19
Аватар для Gvozd
Матрос
Отправить личное сообщение для Gvozd Посмотреть профиль Найти все сообщения от Gvozd
 
Регистрация: 04.04.2008
Сообщений: 6,246

Сообщение от mycoding
window.Russia = R.set();
я с Raphael не работал
но здравый смысл подсказывает, что должен быть способ задать атрибуты корневого элемента svg
скорее всего в данном конструкторе
[telepatemode]
window.Russia = R.set({width:"550",height:"333"});
//либо
window.Russia = Raphael(0, 0, 550, 333);
[/telepatemode]
Ответить с цитированием
  #8 (permalink)  
Старый 09.01.2011, 21:04
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

Сообщение от Gvozd
[telepatemode]
ровно на сутки хватило
Ответить с цитированием
  #9 (permalink)  
Старый 09.01.2011, 21:26
Аватар для mycoding
NodeJS developer - ушел
Отправить личное сообщение для mycoding Посмотреть профиль Найти все сообщения от mycoding
 
Регистрация: 06.01.2010
Сообщений: 1,022

Сообщение от Gvozd Посмотреть сообщение
я с Raphael не работал
но здравый смысл подсказывает, что должен быть способ задать атрибуты корневого элемента svg
скорее всего в данном конструкторе
[telepatemode]
window.Russia = R.set({width:"550",height:"333"});
//либо
window.Russia = Raphael(0, 0, 550, 333);
[/telepatemode]
Вроде такого способа нет.

Есть вот такое
Цитата:
Есть Russia.attr({
width:420,
height:300
})
Но он почему то не работает в этом случаем.
Ладно буду думать. Все таки лучшим способом является изменить
исходное изображение.

Последний раз редактировалось mycoding, 09.01.2011 в 21:31.
Ответить с цитированием
  #10 (permalink)  
Старый 09.01.2011, 22:03
Аватар для Gvozd
Матрос
Отправить личное сообщение для Gvozd Посмотреть профиль Найти все сообщения от Gvozd
 
Регистрация: 04.04.2008
Сообщений: 6,246

Сообщение от monolithed Посмотреть сообщение
ровно на сутки хватило
полноте, вам сударь
использование данного тега, выходит за рамки того обсуждения.
Есть разница между
- отсутствием ответа, и фразой "телепаты в отпуске" (что и обсуждалось)
- наличием ответа, в правильности и полезности которого я сомневаюсь.
при чем в данном случае не из-за неоплноты описываемой картины ТС-а, а из-за моего незнакомства с упомянутым инструментом

mycoding, так измените рисунок исходный
корректных графических редакторов я вам посоветовать не могу.
но, вам под силу написать программу по модификации рисунка.
аттрибут d тега path содержит в себе набор цифр, являющихся арсстояниями.
поделите их все на 3
и не забудьте поделить на 3
Код:
width="1650"
   height="1000"
   viewBox="0 0 1650 1000"
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
SVG карта России mycoding Оффтопик 9 17.07.2010 16:29
Простой графический движок: SVG vs Canvas stryaponoff Общие вопросы Javascript 5 29.06.2010 16:59
svg. обработка событий amigo* Элементы интерфейса 0 23.06.2010 22:31
svg поверх google map с использованием raphael amigo* Элементы интерфейса 1 16.06.2010 17:29
SVG, проблема с ногтями на больших пальцах kostik423 Библиотеки/Тулкиты/Фреймворки 1 12.06.2010 11:17