Javascript.RU

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

Как отобразить угол в графике?
Нужна помощь, для создания курсового проекта.
Суть задачи наглядно показать угол при котором не будет скатываться тот или иной материал.

Чтобы меняя значения угла, она отображалась в графическом виде.
То и есть плоскость 1 меняла угол.Ну и квадратик чтобы лежал на этой плоскости.
Сам java script незнаю, прошу помощь разобратся с задачей.
Ответить с цитированием
  #2 (permalink)  
Старый 08.06.2008, 10:18
Аватар для Snipe
Профессор
Отправить личное сообщение для Snipe Посмотреть профиль Найти все сообщения от Snipe
 
Регистрация: 06.05.2008
Сообщений: 765

Нахрена это в JavaScript делать?
А вообще можно взять gif с диаганально нарисованной линией (остальное прозрачно) и менять высоту/ширину картинки.
А чтоб по ней еще и квадратик ездил =/
В принципе можно тоже gif кой. А потом совместить всё %)

Последний раз редактировалось Snipe, 08.06.2008 в 10:22.
Ответить с цитированием
  #3 (permalink)  
Старый 08.06.2008, 11:35
Отправить личное сообщение для Андрей Параничев Посмотреть профиль Найти все сообщения от Андрей Параничев
 
Регистрация: 21.02.2008
Сообщений: 1,250

Gilman,
Повернуть элемент на угол средствами JavaScript невозможно. Так что либо придётся использовать сервер, либо сторонние клиентские решения, либо canvas в JavaScript. В любом случае требуются не начальные знания.
Ответить с цитированием
  #4 (permalink)  
Старый 08.06.2008, 12:59
Аватар для Gvozd
Матрос
Отправить личное сообщение для Gvozd Посмотреть профиль Найти все сообщения от Gvozd
 
Регистрация: 04.04.2008
Сообщений: 6,246

Сообщение от Snipe
А вообще можно взять gif с диаганально нарисованной линией (остальное прозрачно) и менять высоту/ширину картинки.
вариант плохой, так как при этом будет менятся толщина линии, что не является скорее всего приемлимым.
+1 за canvas. вариант наиболее приемлимый
Ответить с цитированием
  #5 (permalink)  
Старый 24.07.2008, 13:24
Гость
 
Сообщений: n/a

Есть способ сделать наклонную линию на чистом HTML (для те кто в танке)
Ну и управлять наклоном из скрипта...
Ответить с цитированием
  #6 (permalink)  
Старый 24.07.2008, 14:36
Отправить личное сообщение для Андрей Параничев Посмотреть профиль Найти все сообщения от Андрей Параничев
 
Регистрация: 21.02.2008
Сообщений: 1,250

Поясните, для тех, кто в танке, как это делается. И как конкретно можно решить задачу, поставленную в первом сообщении, с помощью этого способа.
Ответить с цитированием
  #7 (permalink)  
Старый 24.07.2008, 14:52
Гость
 
Сообщений: n/a

Доделать не успеваю - надо бежать в столовую...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>test</title>
<style>
	* {
		margin:0;
		padding:0;
	}
	#line {
		position: relative;
		top: 100px;
		left: 100px;
		width: 101px;
		height: 101px;
	}
	.line1, .line2 {
		position: absolute;
		width: 0px;
		height: 0px;
		font-size: 0px;
		border-right: 100px solid #000;
		border-left: 0px solid #000;
		border-top: 100px solid transparent;
	}
	.line2 {
		left: 1px;
		top: 1px;
		border-right-color: #fff;
		border-left-color: #fff;
		border-top-color: transparent;
	}
	.lb, .rt {
		position: absolute;
		width: 2px;
		height: 2px;
		font-size: 0px;
		background: #f00;
		border: 2px solid #000;
		z-index: 1;
		cursor: pointer;
	}
	.lb {
		left: 0px;
		bottom: 0px;
	}
	.rt {
		right: 0px;
		top: 0px;
	}
	#tra {position: absolute;}
</style>
</head>
<body>
<div id="tra"></div>
<div id="line"><div class="line1"></div><div class="line2"></div><div id="lb" class="lb"></div><div id="rt" class="rt"></div></div>
<script type="text/javascript">
function $(i){return document.getElementById(i)}
function trace(m){$('tra').innerHTML = m}

function Down(e){
	e = e || window.event;
	
	var type = this.className;
	
	var o = $('line');
	o.StartWidth = o.offsetWidth;
	o.StartHeight = o.offsetHeight;
	o.StartX = e.clientX;
	o.StartY = e.clientY;
	
	document.onmousemove = function(evt){
		evt = evt || window.event;
		switch(type) {
			case 'lb':	var w = o.StartWidth + o.StartX - evt.clientX;
						var h = o.StartHeight - o.StartY + evt.clientY;
				break;
			case 'rt':	var w = o.StartWidth - o.StartX + evt.clientX;
						var h = o.StartHeight + o.StartY - evt.clientY;
				break;
		}
		var left = width = false;
		if(h<0){
			h=-h;
			left = true;
		}
		if(w<0){
			w=-w;
			left = width = true;
		}
		
		trace('left = '+left+'<br>width = '+width+'<br>type = '+type+'<br>');
		
		if(left){
			o.firstChild.style.borderRightWidth = o.childNodes[1].style.borderRightWidth = '0px';
			o.firstChild.style.borderLeftWidth = o.childNodes[1].style.borderLeftWidth = o.style.width = w + 'px';
			o.childNodes[1].style.left = '-1px';
			if (width&&type=='rt') o.style.left = evt.clientX + 'px';
			if (!width&&type=='lb') o.style.top = evt.clientY + 'px';
			
		}
		else {
			o.firstChild.style.borderLeftWidth = o.childNodes[1].style.borderLeftWidth = '0px';
			o.firstChild.style.borderRightWidth = o.childNodes[1].style.borderRightWidth = o.style.width = w + 'px';
			o.childNodes[1].style.left = '1px';
			if (type=='rt') o.style.top = evt.clientY + 'px';
			else o.style.left = evt.clientX + 'px';
		}
		
		o.firstChild.style.borderTopWidth = o.childNodes[1].style.borderTopWidth = o.style.height = h + 'px';
	}
	document.onmouseup = function(){
		document.onmousemove = null;
		document.onmouseup = null;
	}
}

$('lb').onmousedown = Down;
$('rt').onmousedown = Down;
</script>
</body>
</html>

Последний раз редактировалось Андрей Параничев, 24.07.2008 в 15:44. Причина: Пользуйтесь, пожалуйста, bb-кодами для оформления листингов кода с теле сообщения.
Ответить с цитированием
  #8 (permalink)  
Старый 24.07.2008, 15:30
Гость
 
Сообщений: n/a

не забудьте подвигать отрезок за точки (не успел доделать коректную обработку всех случаев, но для решения вопроса темы кода достаточно, требуется только небольшая доработка - добавление рассчета угла)...
Ответить с цитированием
  #9 (permalink)  
Старый 24.07.2008, 17:18
Гость
 
Сообщений: n/a

вот решение по теме (анимация, блин):
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>test</title>
<style>
	* {
		margin:0;
		padding:0;
	}
	.LineHolder {
		position: absolute;
	}
	.line1, .line2 {
		position: absolute;
		width: 0px;
		height: 0px;
		font-size: 0px;
		border-right: 0px solid #000;
		border-left: 0px solid #000;
		border-top: 0px solid transparent;
	}
	.line2 {
		left: 1px;
		top: 1px;
		border-right-color: #fff;
		border-left-color: #fff;
		border-top-color: transparent;
	}
</style>
</head>
<body>
<script type="text/javascript">
var Line = {
	Create: function(x1,y1,x2,y2,parent){
		var c = function(n){var r = document.createElement('DIV'); r.className = n; return r}
		var a = function(e,o){return e.appendChild(o)}
		this.Div = a(parent,c('LineHolder'));
		this.Line1 = a(this.Div,c('line1'));
		this.Line2 = a(this.Div,c('line2'));
		
		this.Move(x1,y1,x2,y2);
	},
	Move: function(x1,y1,x2,y2){
		this.Div.style.left = (x1<x2 ? x1 : x2) + 'px';
		this.Div.style.top = (y1<y2 ? y1 : y2) + 'px';
		this.Div.style.width = Math.abs(x1-x2) + 'px';
		this.Line1.style.borderTopWidth = this.Line2.style.borderTopWidth = this.Div.style.height = Math.abs(y1-y2) + 'px';
		
		if (x1<x2) {
			if (y1<y2) {
				this.Line1.style.borderLeftWidth = this.Line2.style.borderLeftWidth = x2 - x1 + 'px';
				this.Line1.style.borderRightWidth = this.Line2.style.borderRightWidth = '0px';
				this.Line2.style.left = '-1px';
			}
			else {
				this.Line1.style.borderRightWidth = this.Line2.style.borderRightWidth = x2 - x1 + 'px';
				this.Line1.style.borderLeftWidth = this.Line2.style.borderLeftWidth = '0px';
				this.Line2.style.left = '1px';
			}
		}
		else {
			if (y1<y2) {
				this.Line1.style.borderRightWidth = this.Line2.style.borderRightWidth = x1 - x2 + 'px';
				this.Line1.style.borderLeftWidth = this.Line2.style.borderLeftWidth = '0px';
				this.Line2.style.left = '1px';
			}
			else {
				this.Line1.style.borderLeftWidth = this.Line2.style.borderLeftWidth = x1 - x2 + 'px';
				this.Line1.style.borderRightWidth = this.Line2.style.borderRightWidth = '0px';
				this.Line2.style.left = '-1px';
			}
		}
	}
}

var x = 0, y = 200, dx = 200, dy = 300, r = 200;

Line.Create(dx,dy,x+dx,y,document.body);

setInterval(function(){
	x += 3;
	if (x>r) x=0;
	y = dy - Math.sqrt(r*r - x*x);
	Line.Move(dx,dy,x+dx,y);
},30);
</script>
</body>
</html>
Ответить с цитированием
  #10 (permalink)  
Старый 24.07.2008, 18:47
Отправить личное сообщение для Андрей Параничев Посмотреть профиль Найти все сообщения от Андрей Параничев
 
Регистрация: 21.02.2008
Сообщений: 1,250

Ваш вариант интересный, но больше смахивает на "хак", чем на рациональное решение. По мне, лучше использовать для решения задач те инструменты, которые были под эти задачи созданы. Вот пример частичного решения задачи на canvas. Работает в FireFox 1.5+, Opera 9+ и в IE, при подключении библиотеки iecanvas (мне лень было её искать).
Вложения:
Тип файла: zip Упаковать.zip (7.5 Кб, 15 просмотров)
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Подскажите как отобразить текст. potkin Общие вопросы Javascript 17 26.10.2017 15:09
форма как в ExtJS 2 magistr_bender Общие вопросы Javascript 0 11.09.2008 16:01
как отобразить в окне значения счетчика во время выполнения цикла FOR Алекс97 Общие вопросы Javascript 5 06.09.2008 10:36
Раскрывающееся меню, как переставить на другую сторону? Resager Events/DOM/Window 8 22.08.2008 21:56
Как распознать текст? monach79 Общие вопросы Javascript 12 21.07.2008 13:22