Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.05.2011, 22:21
Аспирант
Отправить личное сообщение для ntro123 Посмотреть профиль Найти все сообщения от ntro123
 
Регистрация: 18.10.2009
Сообщений: 57

прямая от первого объекта до второго
Добрый вечер.

Алгоритм я придумал. Но нету времени на реализацию и отладку.

Собственно сабаж, есть готовые решения? или более легкий алгоритм кроме как рассматривать рабочее пространство как систему координат, расположение неподвижного объекта номер 1 в начало координат (тобишь отнять координаты объекта один от координат объекта 2 и присвоить объекту 1 координаты 0;0) после чего по ф-ции y=kx, где k=(КоординатыОбъекта1 по игрику)/(КоординатыОбъекта1 по иксу)

потом через счетчик прогоняем
for(i=0; i<Obj2.x; i++)
{
zakrasitPixel(x,k*x); // ф-ция закраски пикселя по координатам x y=k*x.
}

Вот, если все понятно объяснил, то может кто подскажет готовые решения или более рациональный алгоритм?

Спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 05.05.2011, 05:40
Аватар для poorking
prodigy
Отправить личное сообщение для poorking Посмотреть профиль Найти все сообщения от poorking
 
Регистрация: 01.11.2010
Сообщений: 503

O_O Здорово описал, а что сделать то хотел?
__________________
readOnly
Ответить с цитированием
  #3 (permalink)  
Старый 05.05.2011, 07:59
Аспирант
Отправить личное сообщение для ntro123 Посмотреть профиль Найти все сообщения от ntro123
 
Регистрация: 18.10.2009
Сообщений: 57

хотел чтобы визуально была видная прямая от объекта1 до объекта2, т.е. объект 1 не перетаскивается, объект2 беру мышку и таскаю по рабочей области и от одного объекта до другого протягивается прямая линия. Вот и думаю как это сделать с минимальными затратами по CPU у юзеров. и есть ли уже готовые варианты?

ПС. под объектами я имею ввиду <div id="obj1" style="width:200px; height:200px; background:#000; position:absolute;"></div> и <div id="obj2" style="width:200px; height:200px; background:#000; position:absolute;"></div>

Последний раз редактировалось ntro123, 05.05.2011 в 08:01.
Ответить с цитированием
  #4 (permalink)  
Старый 05.05.2011, 08:26
Аватар для poorking
prodigy
Отправить личное сообщение для poorking Посмотреть профиль Найти все сообщения от poorking
 
Регистрация: 01.11.2010
Сообщений: 503

если не в одном измерении таскать объект, то надо использовать canvas я думаю, как иначе изобразить не горизонтальную/не вертикальную линию?
__________________
readOnly
Ответить с цитированием
  #5 (permalink)  
Старый 05.05.2011, 09:10
Аватар для poorking
prodigy
Отправить личное сообщение для poorking Посмотреть профиль Найти все сообщения от poorking
 
Регистрация: 01.11.2010
Сообщений: 503

Для "наглядия".
<!DOCTYPE html>
<style type = "text/css">
	*{
		margin: 0px;
		padding: 0px;
	}
	html,body, .wrapper, #line{
		height: 100%;
		width: 100%;
	}
	.wrapper{
		position: relative;
	}
	
	#line{
		_border:1px solid red;
		display: block;
	}
	.guilty{
		position: absolute;
		width: 100px;
		height: 100px;
		cursor: pointer;
	}
	#one{
		background-color: red;
		top:50px;
		left:50px;
	}
	#two{
		top: 100px;
		left: 100px;
		background-color: blue;
	}
</style>
<div class = "wrapper">
	<canvas id = "line"></canvas>
	<div id = "one" class = "guilty"></div>
	<div id = "two" class = "guilty"></div>
</div>
<script type = "text/javascript">
function getOffset(elem) {
	if (elem.getBoundingClientRect) {
		return getOffsetRect(elem);
	} else {
		return getOffsetSum(elem);
	}
}
function getOffsetSum(elem) {
	var top = 0, left = 0;
	while(elem) {
		top = top + parseInt(elem.offsetTop);
		left = left + parseInt(elem.offsetLeft);
		elem = elem.offsetParent;
	}
	return {
		top: top,
		left: left
	}
}

function getOffsetRect(elem) {
	var box = elem.getBoundingClientRect();
	var body = document.body;
	var docElem = document.documentElement;
	var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
	var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
	var clientTop = docElem.clientTop || body.clientTop || 0;
	var clientLeft = docElem.clientLeft || body.clientLeft || 0;
	var top  = box.top +  scrollTop - clientTop;
	var left = box.left + scrollLeft - clientLeft;
	return {
		top: Math.round(top), 
		left: Math.round(left)
	}
}

window.onload = function(){
	var one = document.getElementById("one");
	var two = document.getElementById("two");
	var line = document.getElementById("line").getContext("2d");
	
	function addDrag(e){
		var target = e ? e.target : window.event.strElement;
		
		function drag(event){
			event || (event = window.event);
			
			var html = document.documentElement, body = document.body;
			
			if(event.pageX == null && event.clientX != null){
				
				event.pageX = event.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0);
				event.pageY = event.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0);
			}
			
			var oneOffset = getOffset(one);
			var twoOffset = getOffset(two);
			
			if(target === one){
				one.style.left = event.pageX - 50 + "px";
				one.style.top = event.pageY - 50 + "px";
			}else if(target === two){
				two.style.left = event.pageX - 50 + "px";
				two.style.top = event.pageY - 50 + "px";
			}
			
			var w = html.clientWidth, h = html.clientHeight, cw = line.canvas.width, ch = line.canvas.height;
			
			line.beginPath();
				line.clearRect(0,0, cw, ch);
				line.moveTo((oneOffset.left + 50)/w*cw, (oneOffset.top + 50)/h*ch);
				line.lineTo((twoOffset.left + 50)/w*cw, (twoOffset.top + 50)/h*ch);
				line.stroke();
			line.closePath();
			
		}
		
		document.onmousemove = drag;
	}
	
	function removeDrag(){
		this.onmousemove = null;
	}
	
	one.onmousedown = addDrag;
	two.onmousedown = addDrag;
	
	document.onmouseup = removeDrag;
	
}
</script>
__________________
readOnly
Ответить с цитированием
  #6 (permalink)  
Старый 09.05.2011, 08:41
Аспирант
Отправить личное сообщение для ntro123 Посмотреть профиль Найти все сообщения от ntro123
 
Регистрация: 18.10.2009
Сообщений: 57

спасибо, про100 я по другому хотел, вообщем решил забить на это т.к. оперативка и проц сильно грузились т.к. нужно было создавать много пустых дивов с пикселями и потом их по циклу прогонять.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Получение первого элемента объекта Kein Events/DOM/Window 6 02.06.2010 20:01
Менять аргументы объектов первого окна из второго, открытого явой окна Kypcop Общие вопросы Javascript 1 29.03.2010 21:44
JS-окна второго уровня sobol_noobz Events/DOM/Window 7 24.08.2009 10:28
Можно ли получить имя экземпляра объекта внутри самого объекта? Ichigeki Общие вопросы Javascript 9 14.11.2008 19:00
Не работает перебор свойств объекта BANick Общие вопросы Javascript 1 16.09.2008 22:46