Показать сообщение отдельно
  #1 (permalink)  
Старый 22.11.2016, 16:39
Новичок на форуме
Отправить личное сообщение для EuRo1985 Посмотреть профиль Найти все сообщения от EuRo1985
 
Регистрация: 22.11.2016
Сообщений: 8

Скрипт получения координат для svg-линий
Уважаемы знатоки Jquery, прошу помощи в реализации скрипта.

Задача такая: есть 5 окружностей - одна в центре и 4 по-краям. Все они заданы через position: absolute в процентном отношении отступов. Необходимо рассчитать координаты линий, соединяющих эти окружности для svg line. Сложность в том, чтобы посчитать точки пересечения этих окружностей и линий.

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

Может кто-нить помочь?

$(function(){
		var slideSize = $('#slide-business');
		var imgS1 = parseInt($('.circles img.img1').width());
		var imgS2 = parseInt($('.circles img.img2').width());
		var line1CoorX1 = parseInt($('.circles img.img1').css('left'));
		var line1CoorY1 = parseInt($('.circles img.img1').css('top'));
		var line2CoorX2 = slideSize.width()-parseInt($('.circles div.img2').css('right'))-imgS2/2;
		var line2CoorY2 = parseInt($('.circles div.img2').css('top'))+imgS2/2;
		var line3CoorX2 = slideSize.width()-parseInt($('.circles div.img3').css('right'))-imgS2/2;
		var line3CoorY2 = parseInt($('.circles div.img3').css('top'))+imgS2/2);
		var line4CoorX2 = parseInt($('.circles div.img4').css('left'))+imgS2/2;
		var line4CoorY2 = slideSize.height()-parseInt($('.circles div.img4').css('bottom'))-imgS2/2;
		var line5CoorX2 = parseInt($('.circles div.img5').css('left'))+imgS2/2;
		var line5CoorY2 = slideSize.height()-parseInt($('.circles div.img5').css('bottom'))-imgS2/2;

// Для правых кругов (X2 > X1). Математический расчет координат
	
		var line2Angle = Math.atan2(line2CoorX2-line1CoorX1,line1CoorY1-line2CoorY2); // Находим угол для линии 2
		var line2SideX1 = Math.abs(Math.sin(line2Angle)*(imgS1/2));  // Находим сдвиг X1
		var line2SideY1 = Math.abs(Math.cos(line2Angle)*(imgS1/2)); // Находим сдвиг Y1	
		var line2SideX2 = Math.abs(Math.sin(line2Angle)*(imgS2/2)); // Находим сдвиг X2
		var line2SideY2 = Math.abs(Math.cos(line2Angle)*(imgS2/2)); // Находим сдвиг Y2
		
		var line3Angle = Math.atan2(line3CoorX2-line1CoorX1,line1CoorY1-line3CoorY2);
		var line3SideX1 = Math.abs(Math.sin(line3Angle)*(imgS1/2));
		var line3SideY1 = Math.abs(Math.cos(line3Angle)*(imgS1/2));
		var line3SideX2 = Math.abs(Math.sin(line3Angle)*(imgS2/2));
		var line3SideY2 = Math.abs(Math.cos(line3Angle)*(imgS2/2));

// Для левых кругов (X2 < X1). Математический расчет координат
		
		var line4Angle = Math.atan2(line1CoorX1-line4CoorX2,line4CoorY2-line1CoorY1);
		var line4SideX1 = Math.abs(Math.sin(line4Angle)*(imgS1/2));
		var line4SideY1 = Math.abs(Math.cos(line4Angle)*(imgS1/2));
		var line4SideX2 = Math.abs(Math.sin(line4Angle)*(imgS2/2));
		var line4SideY2 = Math.abs(Math.cos(line4Angle)*(imgS2/2));
		
		var line5Angle = Math.atan2(line1CoorX1-line5CoorX2,line5CoorY2-line1CoorY1);
		var line5SideX1 = Math.abs(Math.sin(line5Angle)*(imgS1/2));
		var line5SideY1 = Math.abs(Math.cos(line5Angle)*(imgS1/2));
		var line5SideX2 = Math.abs(Math.sin(line5Angle)*(imgS2/2));
		var line5SideY2 = Math.abs(Math.cos(line5Angle)*(imgS2/2));

// Находим координаты линий по центру координат окружностей и сдвигам до краев + увеличиваем сдвиг на x0.3
		
		$('#slide-business svg .line2')
			.attr('x1',line1CoorX1+line2SideX1+line2SideX2*0.3)
			.attr('x2',line2CoorX2-line2SideX2-line2SideX2*0.3)
			.attr('y1',line1CoorY1-line2SideY1-line2SideY2*0.3)
			.attr('y2',line2CoorY2+line2SideY2+line2SideY2*0.3);
			
		if(line3CoorY2<line1CoorY1){ // Проверяем в какую сторону сдвигать линию от центра
			$('#slide-business svg .line3')
			.attr('x1',line1CoorX1+line3SideX1+line3SideX2*0.3)
			.attr('x2',line3CoorX2-line3SideX2-line3SideX2*0.3)
			.attr('y1',line1CoorY1-line3SideY1-line3SideY2*0.3)
			.attr('y2',line3CoorY2+line3SideY2+line3SideY2*0.3);
		} else {
			$('#slide-business svg .line3')
			.attr('x1',line1CoorX1+line3SideX1+line3SideX2*0.3)
			.attr('x2',line3CoorX2-line3SideX2-line3SideX2*0.3)
			.attr('y1',line1CoorY1+line3SideY1+line3SideY2*0.3)
			.attr('y2',line3CoorY2-line3SideY2-line3SideY2*0.3);
		}
				
		if(line4CoorY2>line1CoorY1){
			$('#slide-business svg .line4')
				.attr('x1',line1CoorX1-line4SideX1-line4SideX2*0.3)
				.attr('x2',line4CoorX2+line4SideX2+line4SideX2*0.3)
				.attr('y1',line1CoorY1+line4SideY1+line4SideY2*0.3)
				.attr('y2',line4CoorY2-line4SideY2-line4SideY2*0.3);
		} else {
			$('#slide-business svg .line4')
				.attr('x1',line1CoorX1-line4SideX1-line4SideX2*0.3)
				.attr('x2',line4CoorX2+line4SideX2+line4SideX2*0.3)
				.attr('y1',line1CoorY1-line4SideY1-line4SideY2*0.3)
				.attr('y2',line4CoorY2+line4SideY2+line4SideY2*0.3);
		}
		
		$('#slide-business svg .line5')
		.attr('x1',line1CoorX1-line5SideX1-line5SideX2*0.3)
		.attr('x2',line5CoorX2+line5SideX2+line5SideX2*0.3)
		.attr('y1',line1CoorY1+line5SideY1+line5SideY2*0.3)
		.attr('y2',line5CoorY2-line5SideY2-line5SideY2*0.3);
		
	});
Изображения:
Тип файла: jpg screen.jpg (19.4 Кб, 6 просмотров)

Последний раз редактировалось EuRo1985, 22.11.2016 в 18:20.
Ответить с цитированием