Aplicação de Rasterização de Recta Usando o Algoritmo DDA

Table of Contents
1.
Tecnologia Usada................................................................................................................1
1.1.
Plataforma....................................................................................................................1
1.2.
Linguagens de formatao e programao..................................................................1
1.3.
Ferramenta de Desenho...............................................................................................1
2.
Organizao........................................................................................................................1
3.
Recursos necessrios para Execuo..................................................................................1
4.
UI........................................................................................................................................2
5.
Aplicao............................................................................................................................3
5.1.
Index.html....................................................................................................................3
5.2.
Style.css.......................................................................................................................4
5.3.
Plano_cartesiano.js......................................................................................................5
5.4.
Algoritmo.js.................................................................................................................7
Aplicao De Rasterizao De Recta Usando O Algoritmo DDA
1. Tecnologia Usada
1.1.
Plataforma
WEB
1.2.
Linguagens de formatao e programao
HTML 5
Javascript
1.3.
Ferramenta de Desenho
Canvas
2. Organizao
ndex.html
Style.css
Plano_cartesiano.js
Algoritmo.js
3. Recursos necessrios para Execuo
Browser com suporte do HTML 5 e Javascript, (testado com Firefox);
Console de depurao de Javascript (opcional para visualizar os valores das
coordenadas);
1
4. UI
5. Aplicao
3
5.1.
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rasterizao Directa</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">
<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>


<script src="plano_cartesiano.js"></script>

<script src="recta.js"></script>
</body>
</html>
5.2.
Style.css
4
*{
margin: 0px auto;
text-align:center;
}
body{
background:#CEDCEA;
width:;
}
canvas{
border: 1px dotted #000;
}
5.3.
Plano_cartesiano.js
//Plano
function plano(){
var canvas_teste = document.getElementById('teste');
var w = canvas_teste.width;
var h = canvas_teste.height;
var teste_context = canvas_teste.getContext('2d');
teste_context.fillStyle="#fff";
teste_context.fillRect(0,0,w,h);
}
//Malha
function draw_matrix(){
var canvas_teste = document.getElementById('teste');
var w = canvas_teste.width;
var h = canvas_teste.height;
var teste_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);
}
for (var y = 0.5; y < h; y+=20) {
teste_context.moveTo(0, y);
teste_context.lineTo(w, y);
}
teste_context.closePath();
teste_context.strokeStyle = '#eee';
teste_context.stroke();
6
}
//Coordenadas
function coordenadas(){
var teste_canvas = document.getElementById('teste');
var teste_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);
}
}
//Definindo a base branca
plano();
//Desenhando a grelha
draw_matrix();
//desenhando os eixos
coordenadas();
5.4.
Algoritmo.js
function getCoord(){
var xi = parseInt(document.getElementById('xi').value);
var yi = parseInt(document.getElementById('yi').value);
var xf = parseInt(document.getElementById('xf').value);
var yf = parseInt(document.getElementById('yf').value);
alert('Coordenadas inseridas: '+xi+','+yi+','+xf+','+yf);
calcula(xi,yi,xf,yf);
}
//para calcular o modulo
function absolute(number){
if(number<0){
return (number*(-1));
}else{
return number;
}
}
//Para imprimir o ponto e a recta
function setPixel(x,y,scale,adjust){
//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);
//Imprimindo os valores na consola do browser
8
console.log('('+x+','+y+')');
}
function calcula(xi,yi,xf,yf){
//Chamando o canvas
teste_context.setTransform(1, 0, 0, -1, 0, 500);
//Ajustando as coordenadas para a escala da grade do canvas
var scale=20;
var adjust=20;
//Calculo da recta
var dy = yf-yi;
var dx = 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);
console.log('dy = '+dy);
//Para controlar a coordenada inicial

var inicio = true;
//inicializando o caminho da recta
teste_context.beginPath();
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;
}
//verficando o ponto inicial
if(inicio){
//informando o ponto inicial
teste_context.moveTo((x*scale)+adjust,(y*scale)+adjust);
//imprimindo a recta
setPixel(x,y,scale,adjust)
//informando que o ponto inicial ja foi declarado
inicio = false;
}else{
}
}
}else if(absolute(m)>1){
10
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);
inicio = false;
}else{
}
}
}
//Cor da recta
teste_context.strokeStyle='#000';
//Pintando a recta
teste_context.stroke();
}
11

Aplicação de Rasterização de Recta Usando o Algoritmo DDA

Transféré par

Informations du document

Description originale:

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Aplicação de Rasterização de Recta Usando o Algoritmo DDA

Transféré par

Droits d'auteur :

Formats disponibles

Table of Contents

Linguagens de formatao e programao..................................................................1

Recursos necessrios para Execuo..................................................................................1

Aplicao De Rasterizao De Recta Usando O Algoritmo DDA

Linguagens de formatao e programao

//Para controlar a coordenada inicial

Vous aimerez peut-être aussi