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

Gilman 08.06.2008 09:09

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

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

Snipe 08.06.2008 09:18

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

Андрей Параничев 08.06.2008 10:35

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

Gvozd 08.06.2008 11:59

Цитата:

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

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

Гость 24.07.2008 12:24

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

Андрей Параничев 24.07.2008 13:36

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

Гость 24.07.2008 13:52

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

<!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 14:30

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

Гость 24.07.2008 16:18

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

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


Андрей Параничев 24.07.2008 17:47

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


Часовой пояс GMT +3, время: 08:22.