Desenhando Pontos E Linhas Com Javascript Puro (sem Canvas)

[micox 2]

Fonte: http://elmicox.blogspot.com/2008/01/desenh...linhas-com.html

 

Bem, infelizmente javascript não tem muitas capacidades de gerar gráficos, linhas, pontos, círculos, etc a não ser com CANVAS (infelizmente não bem suportado por todos os navegadores) ou por POG.

 

Fazer usando o canvas não teria graça hehe, então fui pro que eu gosto: a velha gambiarra.

 

Bom, gerar o ponto é fácil:

 

<style>
.ponto {  background-color: #0000FF; position: absolute; overflow: hidden;}
</style>
<script>
//global que guarda a largura da linha. Quanto maior, mais rápido o processamento.
window['larguraPonto']=2;
function geraPonto(x, y, nome, elempai) {
	//by Micox - www.elmicox.com - 31/01/08
	var pixel = document.createElement('div');
	pixel.id = nome;
	pixel.className = 'ponto';
	pixel.style.width = pixel.style.height = window['larguraPonto'] + 'px'
	pixel.style.left = x + 'px';
	pixel.style.top = y + 'px';
	return elempai.appendChild(pixel);
}
//chamando a função e gerando uma reta vertical
window.onload = function(){
 geraPonto(10,4,'ponto1',document.body)
 geraPonto(10,6,'ponto2',document.body)
 geraPonto(10,8,'ponto3',document.body)
 geraPonto(10,10,'ponto4',document.body)
 geraPonto(10,12,'ponto4',document.body)
 geraPonto(10,14,'ponto4',document.body)
 }
</script>

Perceba que eu coloquei algumas características do ponto via CSS e a definição da largura do ponto em uma variável global. Quanto MENOR for o valor da largura do ponto, logicamente irá demorar mais a plotagem do ponto.

 

Agora pra gerar uma linha inteira terei que usar meus exímios e velhos conhecimentos de matemática geométrica aprendidos no ensino médio hauehea (Vê se eu lembro disso. Lógico que colei do David Betz e dei umas adaptadas).

 

function geraLinha(x1, y1, x2, y2, nome, elempai) {
	//by Micox - www.elmicox.com - 31/01/08 - adaptado de http://www.davidbetz.net/graphics/
	var longPixel = document.createElement('div');
	if(elempai.constructor==String){ elempai = document.getElementById(elempai);}

	if(typeof(window['MicoxLinhas'])=='undefined'){
		window['MicoxLinhas'] = Array(); //este cidadão global irá guardar todas as linhas
	}
	window['MicoxLinhas'][nome] = Array()

	var steep = Math.abs(y2 - y1) > Math.abs(x2 - x1);
	if (steep) {
		var t = y1;
		y1 = x1; x1 = t;
		t = y2; y2 = x2;
		x2 = t;	}

	var deltaX = Math.abs(x2 - x1);
	var deltaY = Math.abs(y2 - y1);
	var error = 0;
	var deltaErr = deltaY;
	var xStep, yStep, modulo;
	var x = x1, y = y1;

	if (x1 < x2) {
		xStep = window['larguraPonto'];
		modulo = +1;
	}else {
		xStep = -window['larguraPonto'];
		modulo = -1;
	}

	if(y1 < y2) { yStep = window['larguraPonto']; }
	else { yStep = -window['larguraPonto']; }

	var nomeP = nome + x + '-' + y;

	if(steep) { window['MicoxLinhas'][nome][x] = geraPonto(y, x, nomeP, elempai);	}
	else { window['MicoxLinhas'][nome][x] = geraPonto(x, y, nomeP, elempai);	}

	var fim = modulo * x2;

	while( modulo * x < fim) {
		x = x + xStep;
		error = error + deltaErr;
		if(2 * error >= deltaX) {
			y = y + yStep;
			error = error - deltaX;
		}
		nomeP = nome + x + '-' + y;
		if(steep) { window['MicoxLinhas'][nome][x] = geraPonto(y, x, nomeP, elempai);	}
		else { window['MicoxLinhas'][nome][x] = geraPonto(x, y, nomeP, elempai);	}
	}
	return window['MicoxLinhas'][nome];
}

//brincando de desenhar
window.onload = function(){
 geraLinha(20,120,30,100,'minhaLinha1',document.body)
 geraLinha(30,100,60,100,'minhaLinha2',document.body)
 geraLinha(60,100,90,80,'minhaLinha3',document.body)
 geraLinha(90,80,130,80,'minhaLinha4',document.body)
 geraLinha(130,80,160,100,'minhaLinha5',document.body)
 geraLinha(160,100,210,105,'minhaLinha6',document.body)
 geraLinha(210,105,220,120,'minhaLinha7',document.body)
 geraLinha(220,120,20,120,'minhaLinha8',document.body)
 //agora só faltam as rodas haehaheuhaeu
}

Pronto, agora só falta fazer funções pra elipses e curvas hauheuhae. Não tô afim de brincar disso hoje não. Algum dia eu ou alguém faz uma função pra isso.

 

Percebam, senhores, que coloquei a opção de nomes nas linhas e pontos e coloquei elas dentro de um pai qualquer. Pra quê? Ué, pra poder apagar e mover as ditas cujas.

 

As funções de apagar:

function removePonto(nomeOuRef){
	//recebe o ID do ponto ou a referencia ao objeto HTML
	if(nomeOuRef.constructor==String){	nomeOuRef = document.getElementById(nome);	}
	nomeOuRef.parentNode.removeChild(nomeOuRef)
	try { delete nomeOuRef; } catch(e) { nomeOuRef = null }
}
function removeLinha(nomeOuRef){
	//recebe o ID da reta ou a referencia ao objeto array
	if(nomeOuRef.constructor==String){ nomeOuRef = window[nomeOuRef]; }
	for(var i in nomeOuRef){
		removePonto(nomeOuRef[i])
		try { delete nomeOuRef[i]; } catch(e) { nomeOuRef[i] = null }
	}
	try { delete nomeOuRef; } catch(e) { nomeOuRef = null }
}

As funções de mover nem precisava colocar aqui pois é aquele básico esquema de mover Divs:

 

function move(quem){
 //by Micox - www.elmicox.com - 30/01/08
 if(quem.constructor==String){ quem = document.getElementById(quem); }
 //movendo
 window['move'+quem.id] = setInterval( function(){
   quem.style.left = (quem.offsetLeft + 5) + 'px'
  }, 50);
}
function para(quem){
 //by Micox - www.elmicox.com - 30/01/08
 if(quem.constructor==String){ quem = document.getElementById(quem); }
 if(typeof(window['move'+quem.id])=='number'){
  clearInterval(window['move'+quem.id])
 }
}

Agora veja um exemplo completo e meu opalão se movimentando aqui.

 

- “p**** mico, que mané você heim? Não é mais fácil abrir um programa de imagens qualquer e desenhar diboas?”

 

- Sim meu caro cidadão, porém, digamos que você queira fazer um fluxograma em javascript (aqui você vê o fluxograma finalizado).

E aí? Nunca se sabe quando vamos precisar de algo, como diria George Boole.

 

Té a próxima, malucada.

Meus "ganha pão": Resultado! Concursos - Dietas e Regimes - Dicas Orkut MSN e Fotos - Shopping - Concurso Ministério da Fazenda

[nknk 3]

interessante

 

mas esse opalão não quer frear

[William Bruno 1501]

Seria interessante que ao criar o opalão, ele fosse criado no começo da página neh?! (canto esquerdo).

Porque o apagar, apenas esconde ele da tela, deixando o opalão ir infinitamente, criando uma tenebrosa rolagem horizontal.

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> e lá vai o opala >>>