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 (мне лень было её искать).