Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.10.2013, 17:52
Интересующийся
Отправить личное сообщение для grego Посмотреть профиль Найти все сообщения от grego
 
Регистрация: 09.01.2012
Сообщений: 26

Рисование линий на JS без canvas
Добрый день!

Сразу хочу оговориться, что возможно название темы не будет полностью соответствовать содержанию, оно такое скорее для емкости.

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

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

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

Заранее благодарю за ответы!
Ответить с цитированием
  #2 (permalink)  
Старый 13.10.2013, 18:20
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Как насчет SVG?
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #3 (permalink)  
Старый 15.10.2013, 19:28
Интересующийся
Отправить личное сообщение для grego Посмотреть профиль Найти все сообщения от grego
 
Регистрация: 09.01.2012
Сообщений: 26

Сообщение от danik.js Посмотреть сообщение
Как насчет SVG?
Посмотрел, в принципе подходит. Единственное, я нашел крайне мало информации о построении svg через javascript. Может быть подскажете какие-нибудь источники?
Ответить с цитированием
  #4 (permalink)  
Старый 17.10.2013, 11:34
Аватар для maguaguru
Интересующийся
Отправить личное сообщение для maguaguru Посмотреть профиль Найти все сообщения от maguaguru
 
Регистрация: 30.11.2011
Сообщений: 19

Я где то подглядел такой код:
var SVG = {

        self:this,
	        //нужные пространства имен
        svgns: 'http://www.w3.org/2000/svg',
	    xlink: 'http://www.w3.org/1999/xlink',

	        //создание svg элемента
	        createElement: function(name, attrs){
                var element = document.createElementNS(SVG.svgns, name);

	            if(attrs) {
	                SVG.setAttr(element, attrs);
	            }
	            return element;
	        },

	        //установка атрибутов
	        setAttr: function(element, attrs) {
	            for(var i in attrs) {
	                if(i === 'href') { //путь к изображению приписывается в атрибуте xlink:href
	                    element.setAttributeNS(SVG.xlink, i, attrs[i]);
	                } else { //обычный атрибут
	                    element.setAttribute(i, attrs[i]);
	                }
	            }
	            return element;
	        }



	    }


Вывел его в отдельный файл и создаю с помошью него SVG элементы:
wa  =  SVG.createElement("svg",{"width":"460",
                                    "height":"460"});

          target.appendChild(wa);
 wa_rect = SVG.createElement("rect",{"x":0,"y":0,"width":_w,"height":_h,"style":"fill:"+_color});
        wa.appendChild(wa_rect);

target - ссылка на div-контекйнер
Мне так удобно. А какие свойства, и какие элементы, можешь тут глянуть:
http://www.w3schools.com/Svg/svg_examples.asp
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Cоздание анимации на JS и Canvas Severtain Общие вопросы Javascript 5 14.05.2011 20:40
Без JS никуда dimaan777 Оффтопик 14 27.02.2011 23:02
Рисование и js Drakonee Элементы интерфейса 6 22.06.2010 23:51
Отправка POST через JS без перехода на другую страницу m-mikle Общие вопросы Javascript 17 14.04.2010 15:24
Работа js +php без обновления страницы Jekel Javascript под браузер 18 29.11.2009 20:17