Manual de Practicas

INGENIERA EN SISTEMAS COMPUTACIONALES
Materia: GRAFICACION
MTI. Juan Salvador Rodriguez Aguirre
Manual de Practicas
https://cursos.javanianos.com/moodle
soporte_macrosat@hotmail.com soporte@javanianos.com
19 de agosto de 2017 1
MANUAL DE PRACTICAS DE GRAFICACION EN C#
Practica No. 1 . Disear la Clase Graficacin y utilizar un bitmap con un PictureBox para
dibujar un Punto y una lnea.
Existen muchas formas distintas de manejar grficos utilizando C#, en esta ocasin
crearemos una clase que llamaremos Graficacion en donde manejaremos 1 PictureBox por
referencia.
Podremos crear mltiples PictureBox en nuestra forma y cada una tendr un objeto Bitmap
asignado, y crearemos un objeto de nuestra clase Graficacin por cada PictureBox cuyo
Bitmap queramos manipular.
Por lo pronto crearemos 2 mtodos en nuestra clase Form1(Se le puede cambiar el
nombre):
Punto: Dibujar un pixel en la pantalla de dimensin 11 en el lugar que le indiquemos.
(Recibir 2 enteros que representarn la posicin X y Y del pixel en el Bitmap, y un objeto
Color para determinar el color del pixel que queremos dibujar).
Lnea: Este mtodo dibujar una lnea en el Bitmap utilizando el mtodo Analizador
Diferencial Digital o DDA por sus siglas en ingls. (Recibir las posiciones X y Y iniciales y
finales).
Empezamos creando una nueva clase y llamndola Graficacion(o Form1 por defecto) con
lo siguiente:
2 propiedades: 1 objeto de la clase Graphics que ser del que utilizaremos las funciones
bsicas para graficar en el Bitmap que estemos manejando.
1 Constructor: Recibir la referencia de un PictureBox.
Dentro de la clase creamos 2 objetos Graphics y PictureBox, adems definimos el

constructor
Graphics g;
PictureBox picturebox;
public Form1(ref PictureBox picturebox){

this.picturebox = picturebox;
this.g = Graphics.FromImage(picturebox.Image);
}
Creamos el mtodo Punto:
public void Punto(int x, int y, Color color) {

g.DrawRectangle(new Pen(color), x, y, 1, 1);
picturebox.Refresh();
MTI. Juan Salvador Rodrguez Aguirre
Este mtodo recibe la posicin X y Y en el Bitmap que estamos manipulando y el color en

el que se dibujar un pixel.
Creamos una forma con un PictureBox y un botn para probar el mtodo:
En el cdigo de nuestra forma:
Agregamos un objeto de nuestra clase. (graficador1)

En el constructor creamos un nuevo Bitmap y se lo asignamos a pictureBox1
mediante su propiedad Image.
En el constructor lo inicializamos con la referencia de pictureBox1
Form1 graficador1;
public Form1()
{
InitializeComponent();
pictureBox1.Image = new Bitmap(pictureBox1.Width, pictureBox1.Height);
graficador1 = new Form1(ref pictureBox1);
El cdigo del botn ser:

private void button1_Click(object sender, EventArgs e)
{
graficador1.Punto(5, 5, Color.Black);
Por lo tanto dibujar un pixel negro en la posicin (5, 5) del Bitmap del PictureBox como se
muestra a continuacin:
Ahora creamos el mtodo Lnea (Que utilizar el mtodo pixel). En nuestra clase
agregamos:
private void Linea(int xa, int ya, int xb, int yb)
{
int dx = xb - xa, dy = yb - ya, steps, k;
float xIncrement, yIncrement, x = xa, y = ya;
if (Math.Abs(dx) > Math.Abs(dy)) steps = Math.Abs(dx);
else steps = Math.Abs(dy);
xIncrement = dx / (float)steps;
yIncrement = dy / (float)steps;
Punto(Convert.ToInt32(Math.Round(x)),Convert.ToInt32(Math.Round(y)),Color.Black);
for (k = 0; k < steps; k++)
{
x += xIncrement;
y += yIncrement;
Punto(Convert.ToInt32(Math.Round(x)),
Convert.ToInt32(Math.Round(y)), Color.Black);
}
}
Luego agregamos un botn a nuestra forma y le agregamos el siguiente cdigo:

{
graficador1.Linea(10, 10, 50, 50);
}
Y al darle click nos deber mostrar una lnea que va desde el punto (10, 10) hasta el punto
(50, 50), de esta forma:
Para probar la Aplicacin deber ir al men Depurar y hacer clic en iniciar

depuracin
Resea el trabajo realizado (Explicar la ejecucin de la prctica)
Practica No. 2 . Crear un proyecto tipo Windows Form y emplear el mtodo DrawLine
que permite trazar una lnea.
Ir a la ventana de cdigo despus de la clase crear los objetos Graphics y Pen:
public partial class Form1 : Form
{
System.Drawing.Graphics g;
Pen Lapiz;
Se insertar un botn1 para probar la ejecucin del mtodo. En la propiedad text del
botn colocar: Lnea Horizontal
button1.Text = "Lnea Horizontal";
Una vez insertado el botn hacer doble clic para agregar el siguiente cdigo:

{
g = this.CreateGraphics();
Lapiz = new Pen(Color.Blue, 1);
// Columna 20 Fila 100 hasta columna 300 Fila 100
g.DrawLine(Lapiz, 20, 100, 300, 100);
}
Se insertar un botn2 para probar la ejecucin del mtodo. En la propiedad text del
botn colocar: Lnea Horizontal
button1.Text = "Lnea Vertical";
Una vez insertado el botn hacer doble clic para agregar el siguiente cdigo:

{
// Columna 20 Fila 100 hasta columna 200 Fila 300
g.DrawLine(Lapiz, 20, 100, 20, 300);
}
Para probar la Aplicacin deber ir al men Depurar y hacer clic en iniciar depuracin
Practica No. 3 . De acuerdo con la prctica anterior, deber crear un cuadrado empleando
el mtodo DrawLine y usuando un botn.
El botn en su propiedad text deber tener:
button1.Text = "Cuadrado con Lneas";
Describir los pasos para llegar a la siguiente salida
Practica No. 4 . Personalizar Lneas,

En esta prctica se usarn algunas propiedades del objeto Pen para personalizar lneas
Crear un proyecto e insertar un boton con el text = StyleLine
Hacer doble clic sobre el boton y agregar el siguiente cdigo
Lapiz.DashStyle = System.Drawing.Drawing2D.DashStyle.Dot;
g.DrawLine(Lapiz, 20, 20, 100, 100);
Nota: Recordar que se debe tener creado el objeto g de la clase Graphics, as como el objeto Lpiz
de la clase Pen dentro del mbito de la clase del proyecto.
Agregar un botn nuevo para el siguiente cdigo:

Lapiz.StartCap = System.Drawing.Drawing2D.LineCap.Triangle;
Lapiz.EndCap = System.Drawing.Drawing2D.LineCap.ArrowAnchor;
g.DrawLine(Lapiz, 20, 100, 100, 100);
Practica No. 5 . En esta prctica se aprender a crear un polgono empleando el mtodo

DrawPolygon de la clase Graphics.
Para crear un polgono se necesita la clase Point que se usar como un arreglo, tambin
usaremos la clase Pen para dibujar y por ltimo se usara un control PictureBox para
incrustar el Poligono.
En el formulario Insertamos un PictureBox y un botn
En el botn agregamos el siguiente cdigo:
System.Drawing.Graphics g;
Pen Lapiz;
System.Drawing.Point[] p = new System.Drawing.Point[6];
Lapiz = new Pen(Color.Black, 3);
p[0].X = 0;
p[0].Y = 0;
p[1].X = 53;
p[1].Y = 111;
p[2].X = 114;
p[2].Y = 86;
p[3].X = 34;
p[3].Y = 34;
p[4].X = 165;
p[4].Y = 7;
g = pictureBox1.CreateGraphics();
g.DrawPolygon(Lapiz, p);
Practica No. 6 . En esta prctica se aprender a rellenar formas (Poligono) utilizando la

clase Brush indirectamente.
Crear el objeto Graphics, definir el color, definir la traza de la figura a rellenar y por ltimo
mostrar la figura.
En el formulario Insertamos un PictureBox y un botn
En el botn agregamos el siguiente cdigo:
Graphics g = this.CreateGraphics();
Brush Lapiz = new SolidBrush(Color.Red);
Point[] puntos = new Point[]{

new Point(0,0),
new Point(53,111),
new Point(114,86),
new Point(34,34),
new Point(165,7)
};
g.FillPolygon(Lapiz, puntos);
Practica No. 7 . Disear un Poligono relleno de color rojo y un circulo

En un Windows Forms se deberan agregar 3 controles:
1. PictureBox
2. Boton 1 con la propiedad text = FillPolygon
3. Boton 2 con la propiedad text = Circulo
Al hacer clic deber mostrar la figura correspondiente y al cambiar sin sobreponer las
figuras
Cdigo del botn FillPolygon

Brush Lapiz = new SolidBrush(Color.Red);
Point[] puntos = new Point[]{

new Point(0,0),
new Point(53,111),
new Point(114,86),
new Point(34,34),
new Point(165,7)
};
g.FillPolygon(Lapiz, puntos);
Nota: Crear el objeto g despus de la clase del proyecto

{
Graphics g;
Cdigo del botn Circulo
Pen p = new Pen(Color.Chocolate, 2);
g.DrawEllipse(p, 0, 0, 100, 100);
Y para hacer el efecto de borrar las figuras para dibujar la otra se usa el evento Leave o
puede usar cualquier evento que se adapte a sus necesidades.
Para seleccionar los eventos primero se debe seleccionar el control y hacer doble clic en el
evento:
Cdigo de los botones en el evento Leave

private void button1_Leave(object sender, EventArgs e)
{
pictureBox1.Image = null;
}
private void button2_Leave(object sender, EventArgs e)

{
pictureBox1.Image = null;
}
Practica No. 8 . Disear un Grafico que asemeje a la figura del PACMAN.
Practica No. 9 . Disear un Grafico que simule 2 semforos empleando Hilos(Threads).

Cada semforo deber contener 3 crculos con los colores de relleno Rojo, Amarillo,
Verde.
Nota: No usar imgenes.
Practica No. 10 . Proyecto Final. Deber desarrollar un juego o algn elemento grfico
que tenga algn uso Pedaggico, Matemtico, Social o Simule algn Entorno real
(Escenario, Radar, Reloj Analgico, Mtodo de ordenamiento de nmeros, etc).
Practica No. 11 . Traslacin. Disee un cuadrado que permita desplazarse desde el centro
del formulario hacia arriba, abajo, izquierda, derecha.
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
//using System.IO;
namespace Rotacion_2D
{
{
Graphics g;
int ex = 1;
int ey = 1;
int dx = 0;
int dy = 0;
PointF[] pt = {
new Point(-25,-25),
new Point(25,-25),
new Point(25,25),
new Point(-25,25),
new Point(-25,-25)
};
//Creamos el bitmap para rotar
Bitmap bmp;
public Form1()
{
InitializeComponent();
}
private void ptboxDibujo_Paint(object sender, PaintEventArgs e)

{
g = e.Graphics;
Pen p = new Pen(Color.Blue, 3);
Rectangle rec = new Rectangle(50 + dx, 50 + dy, 50 * ex, 50 * ey);
//g.DrawRectangle(pen, rec);
g.DrawLine(p,0,ptboxDibujo.Height/2,
ptboxDibujo.Width,ptboxDibujo.Height/2);
g.DrawLine(p,ptboxDibujo.Width / 2, 0, ptboxDibujo.Width /
2,ptboxDibujo.Height);
e.Graphics.TranslateTransform(ptboxDibujo.Width / 2, ptboxDibujo.Height
/ 2);
g.DrawLines(p, pt);
}
private void Form1_KeyDown(object sender, KeyEventArgs e)

{
switch (e.KeyCode) {
case Keys.W:
//dy -= 5;
pt = Traslacion(pt, 0, -2);
ptboxDibujo.Refresh();
break;
case Keys.S:
//dy += 5;
pt = Traslacion(pt, 0, 2);
break;
case Keys.A:
//izquierda
//dx -= 5;
pt = Traslacion(pt, -2, 0);
break;
case Keys.D:
// derecha
//dx += 5;
pt = Traslacion(pt, 2, 0);
break;
}
}
PointF[] Traslacion(PointF[] pt, int dx, int dy) {

for(int i=0; i<pt.Length; i++){
pt[i] = new PointF(pt[i].X + dx, pt[i].Y + dy);
}
return pt;
}
private void Form1_Load(object sender, EventArgs e)

{
//try
//{
// bmp = (Bitmap)Bitmap.FromFile(@"C:\Users\Len\Documents\Visual
Studio 2010\Projects\Rotacion_2D\pborrar.png");
// ptboxDibujo.SizeMode = PictureBoxSizeMode.StretchImage;
// ptboxDibujo.Image = bmp;
//}
//catch (FileNotFoundException) {
// MessageBox.Show("Error fichero no encontrado ");
//}
private void btnRotar_Click(object sender, EventArgs e)

{
//if (bmp != null) {
// bmp.RotateFlip(RotateFlipType.Rotate180FlipY);
// ptboxDibujo.Image = bmp;
//}
}
}
}
Practica No. 12 Disear un cubo en 3D con WPF en Visual Studio 2010 en Perspectiva
empleando PerspectiveCamera. Pintndolo de color Rojo.
Cargue Visual Studio y cree un proyecto tipo Windows Presentation Foundation con el nombre
Cubo3D
Despus de escribir el nombre del proyecto se mostrar la siguiente ventana:
Reemplazar todo el cdigo XAML con el siguiente
<Window x:Class="_3Dimensiones.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Cubo en 3D" Height="350" Width="525">
<Grid>
<Viewport3D>
<Viewport3D.Camera>
<PerspectiveCamera Position="-40,40,40" LookDirection="40,-40,-40 "
UpDirection="0,0,1" />
</Viewport3D.Camera>
<ModelVisual3D>
<ModelVisual3D.Content>
<Model3DGroup>
<DirectionalLight Color="White" Direction="-1,-1,-3" />
<GeometryModel3D>
<GeometryModel3D.Geometry>
<MeshGeometry3D Positions="0,0,0 10,0,0 10,10,0 0,10,0 0,0,10
10,0,10 10,10,10 0,10,10"
TriangleIndices="0 1 3 1 2 3 0 4 3 4 7 3 4 6 7 4 5 6
0 4 1 1 4 5 1 2 6 6 5 1 2 3 7 7 6 2"/>
</GeometryModel3D.Geometry>
<GeometryModel3D.Material>
<DiffuseMaterial Brush="Green"/>
</GeometryModel3D.Material>
</GeometryModel3D>
</Model3DGroup>
</ModelVisual3D.Content>
</ModelVisual3D>
</Viewport3D>
</Grid>
</Window>
Se tendr la siguiente salida despus de copiar el cdigo (sin ejecutar aun). Bastar cambiar las
etiquetas Title, PerspectiveCamera en la propiedad position o cualquier otra para observar los
cambios
Ejecutar la aplicacin y observar que error genera. Para solucionar el error solo se deber ir al
fichero MainWindow.xaml.cs y comentar la lnea de InitializeComponent();dentro del mtodo
MainWindow() como se muetra a continuacin:
Despus de comentar la lnea ejecutar el proyecto y se tendr la salida que se muestra a

continuacin:
Practica No. 13 Disear un Dodecaedro empleando tecnologa de Desarrollo Web para Front End.
Para disear se debern generar los siguientes ficheros:
Index.html
Efecto.css
Fichero index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="efectos.css" />
<title>Dodecaedro</title>
</head>
<body>
<div class="view">
<div class="plane main">
<div class="circle"></div>
</div>
</div>
</body>
</html>
Fichero efecto.css
html, body {
background: #222;
overflow: hidden;
width: 100%;
height: 100%;
}
.view {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-perspective: 400;
perspective: 400;
}
.plane {
width: 120px;
height: 120px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.plane.main {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
-webkit-transform: rotateX(60deg) rotateZ(-30deg);
transform: rotateX(60deg) rotateZ(-30deg);
-webkit-animation: rotate 20s infinite linear;
animation: rotate 20s infinite linear;
}
.plane.main .circle {
width: 120px;
height: 120px;
position: absolute;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
border-radius: 100%;
box-sizing: border-box;
box-shadow: 0 0 60px DarkGreen, inset 0 0 60px DarkGreen;

}
.plane.main .circle::before, .plane.main .circle::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 10%;
height: 10%;
border-radius: 100%;
background: DarkGreen;
box-sizing: border-box;
box-shadow: 0 0 60px 2px DarkGreen;
}
.plane.main .circle::before {
-webkit-transform: translateZ(-90px);
transform: translateZ(-90px);
}
.plane.main .circle::after {
-webkit-transform: translateZ(90px);
transform: translateZ(90px);
}
.plane.main .circle:nth-child(1) {
-webkit-transform: rotateZ(72deg) rotateX(63.435deg);
transform: rotateZ(72deg) rotateX(63.435deg);
}
}
}
}
}
@-webkit-keyframes rotate {
0% {
-webkit-transform: rotateX(0) rotateY(0) rotateZ(0);
transform: rotateX(0) rotateY(0) rotateZ(0);
}
100% {
-webkit-transform: rotateX(360deg) rotateY(360deg)
rotateZ(360deg);
transform: rotateX(360deg) rotateY(360deg)
rotateZ(360deg);
}
}
@keyframes rotate {
0% {
-webkit-transform: rotateX(0) rotateY(0) rotateZ(0);
transform: rotateX(0) rotateY(0) rotateZ(0);
}
100% {
-webkit-transform: rotateX(360deg) rotateY(360deg)
rotateZ(360deg);
transform: rotateX(360deg) rotateY(360deg)
rotateZ(360deg);
}
}
Para probarlo ejecutarlo en el navegador y verificar su funcionamiento al menos en 3 distintos

navegadores
Actividades a complementar:
Se deber cambiar el fondo

Se deber cambiar el color a rojo de la figura
Aumentar el plano de giro de 120 a 240
Imprimir la salida y la seccin donde se cambiaron los valores

Manual de Practicas

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Manual de Practicas

Uploaded by

Copyright:

Available Formats

INGENIERA EN SISTEMAS COMPUTACIONALES

Dentro de la clase creamos 2 objetos Graphics y PictureBox, adems definimos el

public Form1(ref PictureBox picturebox){

Creamos el mtodo Punto:

public void Punto(int x, int y, Color color) {

Este mtodo recibe la posicin X y Y en el Bitmap que estamos manipulando y el color en

Creamos una forma con un PictureBox y un botn para probar el mtodo:

En el cdigo de nuestra forma:

Agregamos un objeto de nuestra clase. (graficador1)

El cdigo del botn ser:

Luego agregamos un botn a nuestra forma y le agregamos el siguiente cdigo:

Para probar la Aplicacin deber ir al men Depurar y hacer clic en iniciar

Resea el trabajo realizado (Explicar la ejecucin de la prctica)

private void button1_Click(object sender, EventArgs e)

private void button1_Click(object sender, EventArgs e)

Resea el trabajo realizado (Explicar la ejecucin de la prctica)

Describir los pasos para llegar a la siguiente salida

Resea el trabajo realizado (Explicar la ejecucin de la prctica)

Practica No. 4 . Personalizar Lneas,

Agregar un botn nuevo para el siguiente cdigo:

Resea el trabajo realizado (Explicar la ejecucin de la prctica)

Practica No. 5 . En esta prctica se aprender a crear un polgono empleando el mtodo

Resea el trabajo realizado (Explicar la ejecucin de la prctica)

Practica No. 6 . En esta prctica se aprender a rellenar formas (Poligono) utilizando la

Point[] puntos = new Point[]{

Resea el trabajo realizado (Explicar la ejecucin de la prctica)

Practica No. 7 . Disear un Poligono relleno de color rojo y un circulo

Cdigo del botn FillPolygon

Brush Lapiz = new SolidBrush(Color.Red);

Point[] puntos = new Point[]{

Nota: Crear el objeto g despus de la clase del proyecto

Cdigo del botn Circulo

Pen p = new Pen(Color.Chocolate, 2);

Cdigo de los botones en el evento Leave

private void button2_Leave(object sender, EventArgs e)

Resea el trabajo realizado (Explicar la ejecucin de la prctica)

Practica No. 8 . Disear un Grafico que asemeje a la figura del PACMAN.

Resea el trabajo realizado (Explicar la ejecucin de la prctica)

Practica No. 9 . Disear un Grafico que simule 2 semforos empleando Hilos(Threads).

Nota: No usar imgenes.

Resea el trabajo realizado (Explicar la ejecucin de la prctica)

Resea el trabajo realizado (Explicar la ejecucin de la prctica)

private void ptboxDibujo_Paint(object sender, PaintEventArgs e)

private void Form1_KeyDown(object sender, KeyEventArgs e)

PointF[] Traslacion(PointF[] pt, int dx, int dy) {

private void Form1_Load(object sender, EventArgs e)

private void btnRotar_Click(object sender, EventArgs e)

Resea el trabajo realizado (Explicar la ejecucin de la prctica)

Despus de escribir el nombre del proyecto se mostrar la siguiente ventana:

Reemplazar todo el cdigo XAML con el siguiente

Despus de comentar la lnea ejecutar el proyecto y se tendr la salida que se muestra a

Resea el trabajo realizado (Explicar la ejecucin de la prctica)

Para disear se debern generar los siguientes ficheros:

box-shadow: 0 0 60px DarkGreen, inset 0 0 60px DarkGreen;

Para probarlo ejecutarlo en el navegador y verificar su funcionamiento al menos en 3 distintos

Se deber cambiar el fondo

Imprimir la salida y la seccin donde se cambiaron los valores

Resea el trabajo realizado (Explicar la ejecucin de la prctica)

You might also like