Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.11.2009, 16:10
Аспирант
Отправить личное сообщение для neurostep Посмотреть профиль Найти все сообщения от neurostep
 
Регистрация: 10.04.2008
Сообщений: 83

Тригонометрия и Javascript
Привет всем!
Есть 2 массива координат. Первый массив с координатами дивов 1го уровня(координаты середины нижней части), а второй массив с координатами дивов второго уровня(координаты середины дивов верхней части). Мне их нужно соеденить "стрелочками"(направленн е линии). Соединение происходит с помощью canvas. Стрелочки рисуются просто замечательно. Направление отрисовываю следующим образом:
1. Переходим translate'ом в координату центра дива второго уровня;
2. Рисуем треугольник.
Есть 2 ситуации, когда дивы находятся ровно друг под другом - все замечательно, рисуем линию и направляем стрелочку вниз. Но вот когда соединяемые дивы находятся либо левее, либо правее, стрелочку соответственно нужно повернуть на определенный угол. Для этого я вычисляю тангенс угла между дивами и поворачиваю с помощью rotate. Но почему-то мое предположение оказалось не верным, и поворачивается стрелочка на неправильный угол.

вот код:
var canvas = document.getElementById('field');
		var ctx = canvas.getContext("2d");
		var elem_error, before_error;
		ctx.lineWidth = 1;
		for(var i=0; i<array0.length; i++) {
			if(array0[i].node_type == 'active') {
				ctx.stroke();
				//ctx.clearRect(array0[i].x2, array0[i].y2, 1000, 1000);
				ctx.fillStyle = "#00a83c";
				ctx.strokeStyle = "#00a83c";
			}else if(array0[i].node_type != 'active') {
				//ctx.beginPath();
				//ctx.clearRect(array0[i].x2-5, array0[i].y2, -99, 100);
				ctx.fillStyle = "#138CCB";
				ctx.strokeStyle = "#138CCB";
			}
			for(var j=0; j<array1.length; j++) {
				if(!array0[i].is_error && !array1[j].is_error) {
					if(array0[i].node_ip.test(array1[j].node_ip)) {
						ctx.beginPath();
						ctx.save();
						ctx.moveTo(array0[i].x2, array0[i].y2);
						ctx.lineTo(array1[j].x1, array1[j].y1);
						ctx.restore();
						ctx.save();
						ctx.translate(array1[j].x1, array1[j].y1);
						if(array1[j].x1 != array0[i].x1) {
							var a, b, sinus, cosinus, tangens, alpha;
							a = array1[j].y1 - array0[i].y2;
							b = array1[j].x1 - array0[i].x2;
							tangens = Math.tan(a/b);
							alpha = Math.atan(tangens);
							//alert(alpha);
							ctx.rotate(alpha);
						}
						ctx.moveTo(0, 0);
						ctx.lineTo(-2, -6);
						ctx.lineTo(2, -6);
						ctx.lineTo(0, 0);
						ctx.restore();
						ctx.stroke();
						ctx.fill();
						ctx.closePath();
					}
				
				}else{
					elem_error = array0[i];
					before_error = array1[j];
				}
			}
		}

Во вложение скрин, как это выглядит.
Изображения:
Тип файла: jpg ex.jpg (19.2 Кб, 25 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 02.11.2009, 17:10
Флудер
Отправить личное сообщение для ZoNT Посмотреть профиль Найти все сообщения от ZoNT
 
Регистрация: 25.07.2008
Сообщений: 1,271

if(array1[j].x1 != array0[i].x1) {
                            var a, b, sinus, cosinus, tangens, alpha;
                            a = array1[j].y1 - array0[i].y2;
                            b = array1[j].x1 - array0[i].x2;
                            alpha = Math.atan(a/b);
                            //alert(alpha);
                            ctx.rotate(alpha);
                        }
Ответить с цитированием
  #3 (permalink)  
Старый 02.11.2009, 17:49
Аспирант
Отправить личное сообщение для neurostep Посмотреть профиль Найти все сообщения от neurostep
 
Регистрация: 10.04.2008
Сообщений: 83

Сообщение от ZoNT
if(array1[j].x1 != array0[i].x1) { var a, b, sinus, cosinus, tangens, alpha; a = array1[j].y1 - array0[i].y2; b = array1[j].x1 - array0[i].x2; alpha = Math.atan(a/b); //alert(alpha); ctx.rotate(alpha); }
Да, спасибо, наверное так правильнее. Но все равно немного не так. Похоже, что нужно к alpha прибавить половину угла "стрелочки"(треугольника-указателя). И еще одно проблема в связи с этим: тангенс угла от Math.PI*n до ((Math.PI)/2 + Math.PI*n) положителен и от ((Math.PI)/2 + Math.PI*n) до (Math.PI + Math.PI*n) отрицателен. Как вот это проследить - ума не приложу
Ответить с цитированием
  #4 (permalink)  
Старый 02.11.2009, 18:02
Флудер
Отправить личное сообщение для ZoNT Посмотреть профиль Найти все сообщения от ZoNT
 
Регистрация: 25.07.2008
Сообщений: 1,271

Сделай страничку мимнимальную с примером и сюда выложи, а то сидеть в голове представлять твою ситуацию неохота...
Ответить с цитированием
  #5 (permalink)  
Старый 03.11.2009, 16:30
Аспирант
Отправить личное сообщение для neurostep Посмотреть профиль Найти все сообщения от neurostep
 
Регистрация: 10.04.2008
Сообщений: 83

Решил проблему с помощью метода atan2 и к ротэйту пришлось добавить угол поворота, так как система координат компа не совпадает с декартовой системой координат.

Всем большое спасибо!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите с javascript andruhin Общие вопросы Javascript 12 04.05.2012 10:05
Собрался силами, собираюсь освоить Javascript walker Общие вопросы Javascript 14 20.03.2012 16:17
JavaScript на Яндекс.Фотки - почему тормозит браузеры? ZavFirefox Javascript под браузер 23 27.09.2009 19:24
Программист на JavaScript (удалённо) Vadym Работа 1 28.01.2009 13:57
Нужен Старший разработчик JavaScript Yandex Работа 17 19.08.2008 16:43