Javascript-форум - Как отобразить угол в графике?

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Как отобразить угол в графике? (https://javascript.ru/forum/dom-window/1287-kak-otobrazit-ugol-v-grafike.html)

Как отобразить угол в графике?

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

Чтобы меняя значения угла, она отображалась в графическом виде.
То и есть плоскость 1 меняла угол.Ну и квадратик чтобы лежал на этой плоскости.
Сам java script незнаю, прошу помощь разобратся с задачей.

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

Gilman,
Повернуть элемент на угол средствами JavaScript невозможно. Так что либо придётся использовать сервер, либо сторонние клиентские решения, либо canvas в JavaScript. В любом случае требуются не начальные знания.

Цитата:

Сообщение от Snipe

А вообще можно взять gif с диаганально нарисованной линией (остальное прозрачно) и менять высоту/ширину картинки.

вариант плохой, так как при этом будет менятся толщина линии, что не является скорее всего приемлимым.
+1 за canvas. вариант наиболее приемлимый

Есть способ сделать наклонную линию на чистом HTML (для те кто в танке)
Ну и управлять наклоном из скрипта...

Поясните, для тех, кто в танке, как это делается. И как конкретно можно решить задачу, поставленную в первом сообщении, с помощью этого способа.

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

<!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>

не забудьте подвигать отрезок за точки (не успел доделать коректную обработку всех случаев, но для решения вопроса темы кода достаточно, требуется только небольшая доработка - добавление рассчета угла)...

вот решение по теме (анимация, блин):

Код:

<!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>

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

а у меня работает везде, причём это НЕ хак! И дополнительно никому ничего качать не надо (вы про пользователей забываете - они ничего качать не умеют - надо исходить их этого).

мой вариант - ЧИСТЫЙ HTML!!! Просто надо немного подумать головой и использовать все возможности на полную...

Скрипт нужен лишь только для интерактивного изменения угла... Да и как видите он простой как два пальца...

Пример, к сожалению посмотреть не могу, так как форум не хочет меня регистрировать ни под каким ником...

Я неправильно выразился. Не качать, а скопировать и подключить вот этот скрипт. Как видите, он совсем не большой. В варианте с canvas пользователю тоже не нужно скачивать/устанавливать плагинов. И, представьте себе, canvas это тоже часть html.

Если хорошо подумать головой, пользуясь только html элементами можно сделать очень многое. Но зачем выжимать из него все соки, если есть инструменты, в которых это реализуется и проще и понятнее?

Выложил на файлхостинг: http://slil.ru/26006830

На счет регистрации, действительно, мне тоже не удалось сейчас зарегистрировать аккаунт.
Я отписал админу, видимо глючит фильтр имен пользователей.

Цитата:

Сообщение от Гость

а у меня работает везде

IE6 не поддерживает border-color: transparent;

Это неважно, так как можно поставить #ffffff - ничего не поменяется...
Я транспарент просто для эксперимента поставил...

Если поставить #FFF, то верхний слой будет перекрывать нижний почти полностью, и никакой линии не получится. Вместо transparent можно использовать border-style: dotted.

Да, ты прав, пользователи ИЕ6 идут лесом :)

Цитата:

Сообщение от Андрей Параничев (Сообщение 3877)

Я неправильно выразился. Не качать, а скопировать и подключить вот этот скрипт.

Что-то я не смог подключить канву в ИЕ (iecanvas.htc качал...)

ZoNT,
Надо поставить на onload окна вызов ieCanvasInit(). Да, верно, я забыл про htc еще.

естественно вызов я сделал, но канва так и не пашет...