Académique Documents
Professionnel Documents
Culture Documents
2. Organizao ........................................................................................................................ 1
4. UI ........................................................................................................................................ 2
5. Aplicao ............................................................................................................................ 2
5.4. Algoritmo.js................................................................................................................. 6
Aplicao De Rasterizao De Recta Usando O Algoritmo DDA
1. Tecnologia Usada
1.1.Plataforma
WEB
1.3.Ferramenta de Desenho
Canvas
2. Organizao
ndex.html
Style.css
Plano_cartesiano.js
Algoritmo.js
1
4. UI
5. Aplicao
5.1.Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>RasterizaoDirecta</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<section id="data">
<label for="xi">x - inicial</label><input type="number" id="xi">
<label for="yi">y - inicial</label><input type="number" id="yi">
<label for="xf">x - final</label><input type="number" id="xf">
2
<label for="yf">y - final</label><input type="number" id="yf">
<button onclick="getCoord()">Calcula</button>
</section>
<canvas id="teste" width="500" height="500">
</canvas>
<!--Carregando o javascript por baixo para executar depois do DOM carregar-->
<!--Imprime o plano cartesiano-->
<scriptsrc="plano_cartesiano.js"></script>
<!--Algortimo de rasterizao da recta-->
<script src="recta.js"></script>
</body>
</html>
5.2.Style.css
*{
margin: 0px auto;
text-align:center;
}
body{
background:#CEDCEA;
width:;
}
canvas{
border: 1px dotted #000;
}
3
5.3.Plano_cartesiano.js
//Plano
function plano(){
varcanvas_teste = document.getElementById('teste');
var w = canvas_teste.width;
var h = canvas_teste.height;
varteste_context = canvas_teste.getContext('2d');
teste_context.fillStyle="#fff";
teste_context.fillRect(0,0,w,h);
}
//Malha
functiondraw_matrix(){
varcanvas_teste = document.getElementById('teste');
var w = canvas_teste.width;
var h = canvas_teste.height;
varteste_context =canvas_teste.getContext('2d');
teste_context.beginPath();
for (var x = 0.5; x <w;x+=20) {
teste_context.moveTo(x, 0);
teste_context.lineTo(x, h);
}
4
teste_context.strokeStyle = '#eee';
teste_context.stroke();
}
//Coordenadas
function coordenadas(){
varteste_canvas = document.getElementById('teste');
varteste_context = teste_canvas.getContext('2d');
teste_context.fillStyle="#000";
teste_context.font = "bold 10px sans-serif";
//X
var j = 24;
for(i=20;i<500;i+=20){
//fillText(texto,x,y)
teste_context.fillText(j--,0,i-10);
}
//Y
var j = 0;
for(i=10;i<500;i+=20){
//fillText(texto,x,y)
teste_context.fillText(j++,i+5,500);
}
calcula(xi,yi,xf,yf);
}
//imprimindo a recta
teste_context.lineTo((x*scale)+adjust,(y*scale)+adjust);
//Imprimindo o ponto
teste_context.fillStyle="#ff0000";
teste_context.font = "bold 50px sans-serif";
teste_context.fillText('.',(x*scale)+adjust-6,(y*scale)+adjust+4);
6
//Imprimindo os valores na consola do browser
console.log('('+x+','+y+')');
}
functioncalcula(xi,yi,xf,yf){
//Chamando o canvas
varteste_canvas = document.getElementById('teste');
varteste_context = teste_canvas.getContext('2d');
//Calculo da recta
vardy = yf- yi;
vardx = xf- xi;
var m = dy/dx;
var x=xi;
var y=yi;
console.log('xi = '+xi);
console.log('yi = '+yi);
console.log('xf = '+xf);
console.log('yf = '+yf);
console.log('x = '+x);
console.log('y = '+y);
console.log('m = '+m);
console.log('dx = '+dx);
7
console.log('dy = '+dy);
if(absolute(m)<=1){
while(x<xf){
if(dx>0){
x=x+1;
y=y+m;
}else if(dx<=0){
x=x-1;
y=y- m;
}
//imprimindo a recta
setPixel(x,y,scale,adjust)
8
}
}else if(absolute(m)>1){
while(y<yf){
if(dy>0){
y=y+1;
x=x+(1/m);
}else if(dy<=0){
y=y-1;
x=x-(1/m);
if(inicio){
teste_context.moveTo((x*scale)+adjust,(y*scale)+adjust);
setPixel(x,y,scale,adjust)
inicio = false;
}else{
setPixel(x,y,scale,adjust)
}
}
//Cor da recta
teste_context.strokeStyle='#000';
//Pintando a recta
teste_context.stroke();
}