Desenhando pontos e linhas com javascript puro (sem canvas)
Posted by micox at Janeiro 31st, 2008
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.
- “Porra 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.
