Тригонометрия и Javascript
Вложений: 1
Привет всем!
Есть 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]; } } } Во вложение скрин, как это выглядит. |
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); } |
Цитата:
|
Сделай страничку мимнимальную с примером и сюда выложи, а то сидеть в голове представлять твою ситуацию неохота...
|
Решил проблему с помощью метода atan2 и к ротэйту пришлось добавить угол поворота, так как система координат компа не совпадает с декартовой системой координат.:)
Всем большое спасибо! |
Часовой пояс GMT +3, время: 01:28. |