Implementación de Paint en C# y OpenGL

UNIVERSIDAD DE LAS FUERZAS ARMADAS - ESPE
INFORME DE INVESTIGACIÓN / PRÁCTICA
PROFESOR GRUPO: NOMBRE DE LA ASIGNATURA

INVESTIGACIÓN
/PRÁCTICA:
Ing. Nancy Tres Personas implementación de Paint en COMPUTACIÓN GRÁFICA

Jacho C# y OpenGL
NOMBRES (ALUMNOS)
Pablo Alexander Guevara Fabara CI: 1004562813 FIRMA:
Kevin Hernan Mina Puruncajas CI: 1718524380 FIRMA:
Jaime Chevandier Pérez Ortiz CI: 1720170461 FIRMA:
1. INTRODUCCIÓN
El presente informe tratará sobre la implementación de un entorno gráfico a través de OpenGL y

a través de C#. Esta aplicación implementa funcionalidades del SFML para desarrollar un lienzo
digital simple o un SRGE (simple raster graphics editor). OpenGL nos ofrece ciertas librerías que
facilitan el desarrollo gráfico a través de códigos y comandos ya especificados, por otra parte, el
entorno C# nos ofrece un sencillo entendimiento a través de funciones básicas. Los paquetes de
programación general proporciona una biblioteca de funciones gráficas que se pueden utilizar en
lenguajes de programación como C#. En las funciones básicas de una biblioteca gráfica se
incluyen aquellas que especifican componentes de imágenes como líneas, polígonos, esferas,
manejo de colores y nos sirven para que nuestro entorno sea manejable y cómodo de entender.
Por ello, se ha optado por implementar esta SFML en estos dos entornos de programación para
facilitar la comprensión y mejorar habilidades necesarias que sirven de base para implementar
entornos gráficos mejores y potentes.
2. OBJETIVO (COMPETENCIA)
1. Realizar un programa que se base en los aspectos principales de un SFML aplicando los
métodos aprendidos en clases.
2. Desarrollar e implementar las funcionalidades de un entorno gráfico simple para la
creación de un lienzo digital.
3. Comprender la diferencia entre OpenGl y C# para tener una visión amplia del desarrollo
de entornos gráficos
3. FUNDAMENTO
● Manejo de funciones básicas de una biblioteca gráfica como puntos, vectores, colores en
C#
● Funciones primitivas de OpenGL.
● Conceptos básicos sobre el SFML.
● Aspectos básicos sobre programación orientada a objetos.
● Conceptos sobre posición, traslación y coordenadas en los ejes.
4. DESARROLLO DE LA INVESTIGACIÓN /PRÁCTICA (INDICAR LOS COMANDOS O

INVESTIGACIÓN UTILIZADOS)
Para Desarrollar la aplicación se debe tener en cuenta las enseñanzas por parte del docente y
exposiciones de los compañeros en el caso de C#.
Para OpenGL se utilizaron conocimientos en C++, librerías, métodos y primitivas de OpenGL,

además de creación de primitivas extra para desarrollar el menú de la interfaz de Painter,
además de los conocimientos impartidos por el docente y exposiciones de los compañeros en
cuanto a OpenGL se refiere.
Métodos nuevos Utilizados en el desarrollo de Paint en OpenGL
glutPostRedisplay
Marca el plano normal de la ventana actual que necesita volver a mostrarse. En

la siguiente iteración a través de glutMainLoop, se llamará a la devolución de
llamada de visualización de la ventana para volver a visualizar el plano normal
de la ventana.
glutSwapBuffers
Realiza un intercambio de búfer en la capa en uso para la ventana actual.

Específicamente, glutSwapBuffers promueve el contenido del búfer posterior de la capa
en uso de la ventana actual para convertirse en el contenido del búfer frontal.
glutAddMenuEntry
glutAddSubMenu
Son métodos para la manipulación de menús que ofrece freeglut, con los cuales se
desarrolló el menú de herramientas del Paint.
5. RESULTADOS Y CONCLUSIONES
● El aplicativo que se implementó es intuitivo, fácil de usar y nos permite desarrollar un

lienzo digital que sirve como entorno gráfico básico, creado con los conocimientos
aprendidos en la teoría.
● Existen varios métodos que nos facilitan la creación de lienzos digitales, como es el caso
de las bibliotecas gráficas, las cuales nos proporcionan componentes básicos como
líneas, figuras geométricas, colores, etc
● OpenGL es un API orientada a la computación gráfica, mientras que C# es un lenguaje
de programación multiparadigma. OpenGL es una librería que facilita el desarrollo
gráfico en 2D y 3D y C# es un lenguaje diseñado para la infraestructura de lenguaje
común.
6. CUESTIONARIO
1. ¿Qué método limpia el lienzo?

A. picCanvas.Refresh();
B. picCanvas.Refresh.
C. picCanvas.Borrar()
D. picCanvas.Borrar
2. ¿Qué palabra resevada de OpenGL se usa para crear triángulos?
a. GL_VERTEX3..
b. GL_TRIANGLES.
c. GL_DOUBLE..
3. ¿Qué evento permite que se obtengan datos al presionar con un clic en el lienzo?
a. MouseDown.
b. MouseUp
c. DragEnter
d. DragMouse
4. ¿Para qué sirve el comando CreateGraphics()?
a. Crea varias imágenes en el lienzo.
b. Sirve para inicializar el lienzo digital o el entorno gráfico en el que vamos a
trabajar
c. Inicializa el Pencil con el que vamos a dibujar el lienzo.
d. Crea un entorno gráfico listo para usarse.
5. ¿Qué es OpenGL?
a. Software CAD
b. Metodología de desarrollo de software
c. API gráfico
d. Paquete de sonidos
6. Seleccione el comando que se usa para limpiar el color en OpenGL
A. GL_COLOR_BUFFER_BIT
B. GL_BUFFER_BIT.
C. GL_LOOP.
D. GL_LINES.
E. GL_POINTS.
F. GL_QUADS.
7. De qué manera se inicializa un entorno gráfico?
A. mGraph = picCanvas.CreateGraphics();.
B. mGraph = CreateGraphics();.
C. mGraph : picCanvas.CreateGraphics();.
8. ¿Qué comando de OpenGL se utiliza para crear el espacio de trabajo?
a. GlutInit();
b. glutMainWindos();
c. glutCreateWindow();
d. Ninguna
9. ¿Cuál es el comando que no pertenece a OpenGL?
a. GL_POINTS
b. GL_LINE_STIPPLE
c. GL_LOOP.
d. GL_LINES
10. ¿Qué comando sirve para cambiar el tamaño de la ventana de trabajo en OpenGL?
a. glutInitwindowsize (width, heigh);

b. glutDisplayMode(width, heigh);
c. glutMainLoop(ancho,alto);
d. Ninguna de las anteriores
6. Referencias
[1] C. Delrieux, S. M. Castro, y A. Silvetti, «Enseñanza introductoria y avanzada en

computación gráfica», presentado en I Congreso Argentino de Ciencias de la
Computación, oct. 1995. Accedido: nov. 07, 2021. [En línea]. Disponible en:
http://sedici.unlp.edu.ar/handle/10915/24312
[2] D. Hearn, Computer Graphics, C Version. Pearson Education, 1997.
[3] R. L. Hidalgo Leon, C. R. Flor Roldan, y M. E. Yapur Auad, «Conversión de un
televisor en monitor de ekg con memoria», ene. 2006, Accedido: nov. 07, 2021. [En
línea]. Disponible en: http://www.dspace.espol.edu.ec/handle/123456789/3265
[4] «Arquitectura-de-Computadoras-Quiroga_Color-with-cover-page-v2.pdf». Accedido:
nov. 07, 2021. [En línea]. Disponible en:
https://d1wqtxts1xzle7.cloudfront.net/54604346/Arquitectura-de-Computadoras-Quir
oga_Color-with-cover-page-v2.pdf?Expires=1636344269&Signature=Y8g3jxE1bH5
YNC7OlOF1IU1FiGXLFdo7ItQWZhXWpRBVGUjFDiBAznjO5uhE1m-kS7pQLKBbA-t
~VXPWtLoi2bRi7LaMeMBpLU~4D~vtL0hJ1Dw8Om86s~ay3OOXkqiAZLh59G6QyP
6QYUgIN5Uv8ApIpSpCAJa7fLgyh0it1s80UECXCX2uguY~WsBuTapSIJCbR5sLQP
ZhXgzouHbYiOET-pz7bfIpXteKROqlVXlAS84W2X4Kh~kob4ydrXinIU5uTEor6~8poo
NFkCuTp3Wapxsfz6-Bn33FO~qcAEK1HjkqeSxB1KekB6ePXJC9hvhlDYsbykVCqyI
p1v~6lA__&Key-Pair-Id=APKAJLOHF5GGSLRBV4ZA
[5] «Dispositivos de salida». https://riunet.upv.es/handle/10251/13685 (accedido nov.
07, 2021).
Análisis e implementación
Pantalla principal
Utilización de algunas herramientas

Cambio de estilos y tamaño
Guardar Imagen
Código fuente:
frmPaint.cs
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
using System.Drawing.Imaging;
using System.Reflection;
namespace Painter
{
public partial class frmPaint : Form
{
private int typeGraph;
private int cont=0;
private bool MouseIsDown;
//Objetos
private clsLine objLine = new clsLine();
private clsRectangle objRectangle = new clsRectangle();
private clsTriangle objTriangle = new clsTriangle();
private clsEllipse objEllipse = new clsEllipse();
private clsPencil objPencil = new clsPencil();
public frmPaint()
{
InitializeComponent();
}
private void picCanvas_MouseDown(object sender, MouseEventArgs e)
{
MouseIsDown = true;
txtPosX.Text = e.X.ToString();
txtPosY.Text = e.Y.ToString();
if (typeGraph == 1)
{
objLine.ReadPositions(txtPosX, txtPosY);
cont++;
if(cont == 2)
{
objLine.DrawListLine(picCanvas);
cont = 0;
}
}
else if (typeGraph == 2)
{
//Pos Inicial Rectangulo
objRectangle.SelectSize(picCanvas);
txtPosY.Text = objRectangle.FinalY(e.Y).ToString();
objRectangle.ReadStartPosition(txtPosX, txtPosY);
}
{
//Pos Inicial Triangulo
objTriangle.SelectSize(picCanvas);
txtPosY.Text = objTriangle.FinalY(e.Y).ToString();
objTriangle.ReadStartPosition(txtPosX, txtPosY);
}
{
//Pos Inicial Circle
objEllipse.SelectSize(picCanvas);
txtPosY.Text = objEllipse.FinalY(e.Y).ToString();
objEllipse.ReadStartPosition(txtPosX, txtPosY);
private void picCanvas_MouseMove(object sender, MouseEventArgs e)

{
if (typeGraph != 2)
{
}
else
{
//Pos Rectangulo desde que Inicia el Movimiento
objRectangle.SelectSize(picCanvas);
}
if(typeGraph == 5)
{
if (MouseIsDown)
{
objPencil.ReadPosition(txtPosX, txtPosY);
objPencil.DrawPencil(picCanvas, txtPosX, txtPosY);
}
}
if (typeGraph == 6)
{
if (MouseIsDown)
{
objPencil.ReadPosition(txtPosX, txtPosY);
objPencil.DrawErazer(picCanvas, txtPosX, txtPosY);
}
}
}
private void picCanvas_MouseUp(object sender, MouseEventArgs e)

{
MouseIsDown = false;
if (typeGraph == 2)
{
//Dibujar Rectangle en Pos Final
txtPosY.Text=objRectangle.FinalY(e.Y).ToString();
objRectangle.ReadEndPosition(txtPosX,txtPosY);
objRectangle.DrawRectangle(picCanvas);
}
else if(typeGraph == 3)
{
//Dibujar triangulo
objTriangle.ReadEndPosition(txtPosX, txtPosY);
objTriangle.DrawTriangle(picCanvas);
}
{
//Dibujar Elipse
txtPosY.Text = objEllipse.FinalY(e.Y).ToString();
objEllipse.ReadEndPosition(txtPosX, txtPosY);
objEllipse.DrawEllipse(picCanvas);
}
{
//Dibujar con Lapiz
objPencil.ClearPoint();
//objPencil.ReadPosition(txtPosX, txtPosY);
private void btnRed_Click_1(object sender, EventArgs e)

{
Button picColor = (Button)sender;
objLine.SelectColor(picColor);
objRectangle.SelectColor(picColor);
objTriangle.SelectColor(picColor);
objEllipse.SelectColor(picColor);
objPencil.SelectColor(picColor);
}
private void btnLine_Click(object sender, EventArgs e)
{
typeGraph = 1;
picCanvas.Cursor = Cursors.Cross;
}
private void button4_Click(object sender, EventArgs e)
{
typeGraph = 2;
}
private void btnTriangle_Click(object sender, EventArgs e)

{
typeGraph = 3;
}
private void btnCircle_Click(object sender, EventArgs e)

{
typeGraph = 4;
}
private void btnPencil_Click(object sender, EventArgs e)

{
typeGraph = 5;
picCanvas.Cursor = Cursors.UpArrow;
}
private void btnErazer_Click(object sender, EventArgs e)

{
typeGraph = 6;
picCanvas.Cursor = Cursors.SizeAll;
}
private void btnRefill_Click(object sender, EventArgs e)

{
typeGraph = 7;
}
private void btnSave_Click(object sender, EventArgs e)

{
//Crear una instancia Bitmap con el Alto y Ancho del picCanvas
Bitmap bitmap = new Bitmap(picCanvas.Width, picCanvas.Height);
//Representar un mapa de bits especificado
picCanvas.DrawToBitmap(bitmap, new Rectangle(0, 0,
picCanvas.Width, picCanvas.Height));
//Pedir al usuario seleccionar una ubicacion para guardar la

imagen
SaveFileDialog saveFile = new SaveFileDialog();
//Establecer una cadena de filtros o extensiones del nombre
del archivo
saveFile.Filter = "Archivos de imagen (*.jpg; *.jpeg; *.gif;
*.bmp; *.png)|*.jpg; *.jpeg; *.gif; *.bmp; *.png";
//Validar si se a ingresado el nombre del archivo de imagen
if (saveFile.ShowDialog() == DialogResult.OK)
{
//Obtener el texto que contiene el nombre del archivo
string fileName = saveFile.FileName;
try
{
//Guarda la imagen con el nombre ingresado y la
extensión predefinida .jpeg
bitmap.Save(fileName, ImageFormat.Jpeg);
MessageBox.Show("Imagen guardada correctamente");
}
catch (Exception ex)
{
MessageBox.Show(ex.ToString());
}
}
}
private void cmbStyle_SelectedIndexChanged(object sender,

EventArgs e)
{
int opcion = cmbStyle.SelectedIndex;
objPencil.ChangeStylePen(opcion);
objLine.ChangeStylePen(opcion);
objEllipse.ChangeStylePen(opcion);
objRectangle.ChangeStylePen(opcion);
objTriangle.ChangeStylePen(opcion);
private void numSize_ValueChanged(object sender, EventArgs e)

{
int scale = Convert.ToInt32(numSize.Value);
objPencil.SelectScale(scale);
objLine.SelectScale(scale);
objEllipse.SelectScale(scale);
objRectangle.SelectScale(scale);
objTriangle.SelectScale(scale);
private void btnClear_Click(object sender, EventArgs e)

{
picCanvas.Refresh();
txtPosX.Text = "";
txtPosY.Text = "";
}
}
clsPencil.cs
using System;
using System.Linq;
using System.Text;
using System.Drawing.Drawing2D;
namespace Painter
{
internal class clsPencil
{
private Graphics mGraph;
private Pen mPen, mErazer, mPenFill1, mPenFill;
private int mScale, mScale1=8;
private Point mPointStart;
private Point mPointEnd;
private List<PointF> points = new List<PointF>();
public clsPencil()
{
mPointStart.X = mPointStart.Y = -1;
mPointEnd.X = mPointEnd.Y = -1;
mScale = 2;
mPen = new Pen(Color.Black, mScale);
mErazer = new Pen(Color.White, mScale1);
mPenFill = new Pen(Color.Black);
mPenFill1 = new Pen(Color.White);
}
//Leer Posición
public void ReadPosition(TextBox posX, TextBox posY)

{
mPointStart.X = int.Parse(posX.Text);
mPointStart.Y = int.Parse(posY.Text);
}
public void SelectColor(Button picColor)

{
mPen.Color = picColor.BackColor;
points.Clear();
}
public void DrawPencil(PictureBox picCanvas, TextBox txtPosX,
TextBox txtPosY)
{
mPointEnd.X = int.Parse(txtPosX.Text);
mPointEnd.Y = int.Parse(txtPosY.Text);
PointF puntoi = new PointF(mPointEnd.X, mPointEnd.Y);

points.Add(new PointF(mPointEnd.X, mPointEnd.Y));
mGraph = picCanvas.CreateGraphics();
if (points.Count != 1)
{
mGraph.DrawLines(mPen, points.ToArray());
//points.Clear();
}
}
public void DrawErazer(PictureBox picCanvas, TextBox posX, TextBox
posY)
{
mGraph.DrawEllipse(mErazer, mPointStart.X, mPointStart.Y,

mPen.Width, mPen.Width);
mGraph.FillEllipse(mPenFill1.Brush, mPointStart.X,
mPointStart.Y, mPenFill.Width, mPenFill.Width);
public void ClearPoint()

{
points.Clear();
}
public void ChangeStylePen(int type)

{
if (type == 0)
{
mPen.DashStyle = DashStyle.Solid;
}
else if (type == 1)
{
mPen.DashStyle = DashStyle.Dash;
}
else if (type == 2)
{
mPen.DashStyle = DashStyle.Dot;
}
else if (type == 3)
{
mPen.DashStyle = DashStyle.DashDot;
}
else if (type == 4)
{
mPen.DashStyle = DashStyle.DashDotDot;
}
public void SelectScale(int scale)

{
mPen.Width = scale;
}
}
}
clsLine.cs
using System;
using System.Linq;
using System.Text;
namespace Painter
{
internal class clsLine
{
//Atributos
private Pen mPen;
private int mScale;
List<Point> listPoints = new List<Point>();
//Constructor
public clsLine()
{
mPointStart.X=mPointStart.Y=-1;
mPointEnd.X=mPointEnd.Y=-1;
mScale = 2;
}
//Metodos
//Dibujar Linea desde Lista de Puntos
public void DrawLine(PictureBox picCanvas)
{
//dibuja la linea
mGraph.DrawLine(mPen, mPointStart.X, mPointStart.Y,
mPointEnd.X, mPointEnd.Y);
}
//Dibujar Linea
public void DrawListLine(PictureBox picCanvas)
{
mGraph.DrawLine(mPen, listPoints[0], listPoints[1]);
listPoints.Clear();
}
//Leer Posiciones
public void ReadPositions(TextBox txtPosX,TextBox txtPosY)
{
if (mPointStart.X == -1)
{
mPointStart.X = int.Parse(txtPosX.Text);
mPointStart.Y = int.Parse(txtPosY.Text);
listPoints.Add(new Point(mPointStart.X, mPointStart.Y));
}
else if (mPointEnd.X == -1)
{
mPointEnd.X = int.Parse(txtPosX.Text);
mPointEnd.Y = int.Parse(txtPosY.Text);
listPoints.Add(new Point(mPointEnd.X, mPointEnd.Y));
}
}
//Seleccionar Color
{
}
//Seleccionar escala
{
mPen.Width = scale;
}
//Seleccionar estilo
{
if (type == 0)
{
}
else if (type == 1)
{
}
else if (type == 2)
{
}
else if (type == 3)
{
}
else if (type == 4)
{
}
}
}
clsRectangle.cs
using System;
using System.Linq;
using System.Text;
namespace Painter
{
internal class clsRectangle
{
//Atributos
private Pen mPen;
private int mScale,MaxHeight;
private int recWidth, recHeight;
public clsRectangle()
{
mScale = 2;
}
//Transformacion a coordenadas logicas

public int InicioY(float y)
{
return (int)(MaxHeight-Math.Round(y));
}
public float FinalY(int y)
{
return (MaxHeight - y);
}
//Leer Posición
public void ReadStartPosition(TextBox txtPosX, TextBox txtPosY)
{
}
public void ReadEndPosition(TextBox posX, TextBox posY)
{
mPointEnd.X = int.Parse(posX.Text);
mPointEnd.Y = int.Parse(posY.Text);
CalculateDimension();
}
public void CalculateDimension()
{
recWidth = mPointEnd.X - mPointStart.X;
recHeight = mPointEnd.Y - mPointStart.Y;

}
//Tamaño del Dibujo
public void SelectSize(PictureBox picCanvas)
{
MaxHeight = picCanvas.Height - 1;
}
//Dibujar Rectangulo
public void DrawRectangle(PictureBox picCanvas)
{
if (recWidth > 0 && recHeight > 0)

{
mGraph.DrawRectangle(mPen, mPointStart.X,
InicioY(mPointEnd.Y), recWidth, recHeight);
}
if (recWidth < 0 && recHeight > 0)
{
InicioY(mPointEnd.Y), recWidth * -1, recHeight);
}
if (recWidth < 0 && recHeight < 0)
{
mGraph.DrawRectangle(mPen, mPointEnd.X,
InicioY(mPointStart.Y), recWidth * -1, recHeight * -1);
}
if (recWidth > 0 && recHeight < 0)
{
InicioY(mPointStart.Y), recWidth, recHeight * -1);
}
}
//Seleccionar Color
{
}

{
mPen.Width = scale;
}
{
if (type == 0)
{
}
else if (type == 1)
{
}
else if (type == 2)
{
}
else if (type == 3)
{
}
else if (type == 4)
{
}
}
}
clsEllipse.cs
using System;
using System.Linq;
using System.Text;
namespace Painter
{
internal class clsEllipse
{
//Atributos
private Pen mPen;
private int mScale, MaxHeight;
private int elipWidth, elipHeight;
public clsEllipse()
{
mScale = 2;
}
{
return (int)(MaxHeight - Math.Round(y));
}
{
}
//Leer Posición
{
}
{
}
{
elipWidth = mPointEnd.X - mPointStart.X;
elipHeight = mPointEnd.Y - mPointStart.Y;
}
{
}
{
}
//Dibujar Elipse
public void DrawEllipse(PictureBox picCanvas)
{
//Crear el lienzo del dibujo
//Dibujar el rectangulo
if (elipWidth > 0 && elipHeight > 0)
{
mGraph.DrawEllipse(mPen, mPointStart.X,
FinalY(mPointEnd.Y), elipWidth, elipHeight);
}
if (elipWidth < 0 && elipHeight > 0)
{
FinalY(mPointEnd.Y), elipWidth * -1, elipHeight);
}
if (elipWidth < 0 && elipHeight < 0)
{
mGraph.DrawEllipse(mPen, mPointEnd.X,
FinalY(mPointStart.Y), elipWidth * -1, elipHeight * -1);
}
if (elipWidth > 0 && elipHeight < 0)
{
FinalY(mPointStart.Y), elipWidth, elipHeight * -1);
}
}

{
mPen.Width = scale;
}
{
if (type == 0)
{
}
else if (type == 1)
{
}
else if (type == 2)
{
}
else if (type == 3)
{
}
else if (type == 4)
{
}
}
}
clsTriangle.cs
using System;
using System.Linq;
using System.Text;
namespace Painter
{
internal class clsTriangle
{
//Atributos
private Pen mPen;
private int mScale, MaxHeight;
private int triWidth, triHeight;
public clsTriangle()
{
mScale = 2;
}
{
return (int)(MaxHeight - Math.Round(y));
}
{
}
//Leer Posición
{
}
{
}
{
triWidth = mPointEnd.X - mPointStart.X;
triHeight = mPointEnd.Y - mPointStart.Y;
}
{
}
{
}
//Dibujar Trinagulo
public void DrawTriangle(PictureBox picCanvas)
{
//Crear el lienzo del dibujo
if (triWidth < 0 && triHeight > 0)

{
mGraph.DrawLine(mPen, mPointStart.X, InicioY(mPointEnd.Y),
mPointStart.X + triWidth, InicioY(mPointEnd.Y));
mGraph.DrawLine(mPen, mPointStart.X + triWidth,
InicioY(mPointEnd.Y), (mPointStart.X - triWidth) / 2,
(InicioY(mPointEnd.Y) + triHeight));
mGraph.DrawLine(mPen, (mPointStart.X - triWidth) / 2,
(InicioY(mPointEnd.Y) + triHeight), mPointStart.X, InicioY(mPointEnd.Y));
}
else if (triWidth > 0 && triHeight < 0)

{
mGraph.DrawLine(mPen, mPointStart.X, InicioY(mPointEnd.Y),
mPointStart.X + triWidth, InicioY(mPointEnd.Y));
mGraph.DrawLine(mPen, mPointStart.X + triWidth,
InicioY(mPointEnd.Y), (mPointStart.X + triWidth) / 2,
(InicioY(mPointEnd.Y) + triHeight));
mGraph.DrawLine(mPen, (mPointStart.X + triWidth) / 2,
(InicioY(mPointEnd.Y) + triHeight), mPointStart.X, InicioY(mPointEnd.Y));
}
}
{
mPen.Width = scale;
}
{
if (type == 0)
{
}
else if (type == 1)
{
}
else if (type == 2)
{
}
else if (type == 3)
{
}
else if (type == 4)
{
}
}
}
OpenGL
Programa ejecutandoese

Codigo Fuente
main.cpp
#include<windows.h>
/*Libreria del OpenGL*/
#include<GL/glut.h>
#include<Windows.h>
#include <gl/glut.h>
#include <iostream>
#include <cmath>
using namespace std;
// Ocultar consola C++

#pragma comment (linker,"/subsystem:\"windows\"
/entry:\"mainCRTStartup\"")
// Numero Maximo de Primitivas

const int MAX = 500;
// Window width and height

int window_w;
int window_h;
int Ymax, Xmin;
bool dragging = false;
// Estructura para el color RGB

struct Color
{
float r = 0.0;
float g = 0.0;
float b = 0.0;
};
// Estructura de las figuras

struct Shape
{
string type;
float startX, startY;
float endX, endY;
float pointSize;
float lineWidth;
bool isFilled = false;
bool isActivated = false;
Color color;
};
Color color;
Shape figureList[MAX];
int typeFigure = 0;
// Lista de los modos para poder dibujar

enum DRAW_MODE
{
NONE, POINT_MODE, LINE_MODE,
W_TRIANGLE_MODE, F_TRIANGLE_MODE, W_RECTANGLE_MODE,
F_RECTANGLE_MODE, W_CIRCLE_MODE, F_CIRCLE_MODE
};
// Menu para el right click

enum RIGHT_CLICK_MENU
{
CLEAR, EXIT
};
// Color menu
enum COLOR_CODE
{
RED, GREEN, BLUE, CYAN, MAGENTA, YELLOW, WHITE, BLACK
};
DRAW_MODE mode = NONE;
float point_size = 1.0;

float line_width = 1.0;
const float PI = 3.142;
// Manejo del inicio para el entorno grafico

void handleStartDraw(float x, float y)
{
if (mode == NONE)
{
return;
}
else
{
// Empezar dibujando
dragging = true;
// AElegir forma actual

figureList[typeFigure].isActivated = true;
if (mode == POINT_MODE) // Opcion para el Punto

{
figureList[typeFigure].type = "Point";
}
if (mode == LINE_MODE) // opcion para la linea
{
figureList[typeFigure].type = "Line";
}
if (mode == W_TRIANGLE_MODE || mode == F_TRIANGLE_MODE) //
opcion para el triangulo
{
if (mode == F_TRIANGLE_MODE) // Triangulo Relleno
{
figureList[typeFigure].isFilled = true;
}
else // contorno triangulo
{
figureList[typeFigure].isFilled = false;
}
figureList[typeFigure].type = "Triangle";
}
if (mode == W_RECTANGLE_MODE || mode == F_RECTANGLE_MODE) //
opcion para el rectangulo
{
if (mode == F_RECTANGLE_MODE) // Rectangulo relleno
{
}
else // contorno rectangulo

{
}
figureList[typeFigure].type = "Rectangle";
}
if (mode == W_CIRCLE_MODE || mode == F_CIRCLE_MODE) // opcion
para el circulo
{
if (mode == F_CIRCLE_MODE) // Circulo relleno
{
}
else // circunferencia, contorno
{
}
figureList[typeFigure].type = "Circle";
}
// Asignar las coordenada spara la figura

figureList[typeFigure].startX = x;
figureList[typeFigure].startY = y;
figureList[typeFigure].endX = x;
figureList[typeFigure].endY = y;
// Asignar el tamaño y el grosor de las figuras

figureList[typeFigure].pointSize = point_size;
figureList[typeFigure].lineWidth = line_width;
// Asignar el color a las figuras

figureList[typeFigure].color.r = color.r;
figureList[typeFigure].color.g = color.g;
figureList[typeFigure].color.b = color.b;
typeFigure++;
}
}
// Manejo del proceso de dibujo

void handleContinueDraw(float x, float y)
{
if (!dragging)
{
return;
}
// Obtener posiciones actuales para X y Y

int current = typeFigure - 1;
figureList[current].endX = x;
figureList[current].endY = y;
glutPostRedisplay();
}
// Manejo del dibujo final

void handleFinishDraw(float x, float y)
{
if (!dragging)
{
return;
}
// Dibujado final
dragging = false;
// Obtener la posición actual de todas las coordenadas

if (figureList[current].startX == figureList[current].endX &&

figureList[current].startX == figureList[current].endY)
{
typeFigure--;
}
}
// Borrar todos los primivites en el área de dibujo

void clearPrimitives()
{
// Resetear el contador de figura a cero
typeFigure = 0;
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
glFlush();
}
// Color menu
void colorMenu(int code)
{
if (code == RED) // Rojo
{
color.r = 1.0;
color.g = 0.0;
color.b = 0.0;
}
else if (code == GREEN) // Verde
{
color.r = 0.0;
color.g = 1.0;
color.b = 0.0;
}
else if (code == BLUE) // Azul
{
color.r = 0.0;
color.g = 0.0;
color.b = 1.0;
}
else if (code == CYAN) // Cian
{
color.r = 0.0;
color.g = 1.0;
color.b = 1.0;
}
else if (code == MAGENTA) // Magenta
{
color.r = 1.0;
color.g = 0.0;
color.b = 1.0;
}
else if (code == YELLOW) // Amarillo
{
color.r = 1.0;
color.g = 1.0;
color.b = 0.0;
}
else if (code == WHITE) // Blanco
{
color.r = 1.0;
color.g = 1.0;
color.b = 1.0;
}
else if (code == BLACK) // Negro
{
color.r = 0.0;
color.g = 0.0;
color.b = 0.0;
}
// Cambiar color de la figura actual

if (figureList[current].isActivated)
{
figureList[current].color.r = color.r;
figureList[current].color.g = color.g;
figureList[current].color.b = color.b;
}
}
// Menu del tamaño del punto

void pointSizeMenu(int size)
{
if (size == 1.0) // 1.0
{
point_size = 1.0;
}
else if (size == 2.0) // 2.0
{
point_size = 2.0;
}
else if (size == 3.0) // 3.0
{
point_size = 3.0;
}
else if (size == 4.0) // 4.0
{
point_size = 4.0;
}
else if (size == 5.0) // 5.0
{
point_size = 5.0;
}
else if (size == 6.0) // 6.0
{
point_size = 6.0;
}
}
// Menu del grosor de la linea

void lineWidthMenu(int width)
{
if (width == 1.0) // 1.0

{
line_width = 1.0;
}
else if (width == 2.0) // 2.0
{
line_width = 2.0;
}
else if (width == 3.0) // 3.0
{
line_width = 3.0;
}
else if (width == 4.0) // 4.0
{
line_width = 4.0;
}
else if (width == 5.0) // 5.0
{
line_width = 5.0;
}
else if (width == 6.0) // 6.0
{
line_width = 6.0;
}
// Cambiar el grosor de la linea de la figura actual

if (figureList[current].isActivated)
{
figureList[current].lineWidth = line_width;
}
}
// Click derecho menu

void rightClickMenu(int option)
{
switch (option)
{
case CLEAR: // Limpia todo el lienzo
clearPrimitives();
break;
case EXIT: // Sale de la aplicacion y cierra el programa

exit(0);
}
}
// Crear click derecho menu

void createMouseMenu()
{
int c_menu, ps_menu, lw_menu;
// Crear color sub-menu

c_menu = glutCreateMenu(colorMenu);
glutAddMenuEntry("Rojo", RED);
glutAddMenuEntry("Verde", GREEN);
glutAddMenuEntry("Azul", BLUE);
glutAddMenuEntry("Cian", CYAN);
glutAddMenuEntry("Magenta", MAGENTA);
glutAddMenuEntry("Amarillo", YELLOW);
glutAddMenuEntry("Blanco", WHITE);
glutAddMenuEntry("Negro", BLACK);
// Create point size sub-menu

ps_menu = glutCreateMenu(pointSizeMenu);
glutAddMenuEntry("1.0", 1.0);
// Create point size sub-menu

lw_menu = glutCreateMenu(lineWidthMenu);
// Create main menu

glutCreateMenu(rightClickMenu);
glutAddSubMenu("Tamaño del Punto", ps_menu);
glutAddSubMenu("Grosor de la Línea", lw_menu);
glutAddSubMenu("Color de la Figura", c_menu);
glutAddMenuEntry("Limpiar Lienzo", CLEAR);
glutAddMenuEntry("Salir", EXIT);
glutAttachMenu(GLUT_RIGHT_BUTTON);
}
// Seleccione el modo de dibujo haciendo clic con el mouse

void selectFigure(int x, int y, int modifiers)
{
if (y > window_h - 50) // Opcion punto
{
mode = POINT_MODE;
}
else if (y > window_h - 100) // opcion linea
{
mode = LINE_MODE;
}
else if (y > window_h - 150) // Opcion contorno del triangulo
{
mode = W_TRIANGLE_MODE;
}
else if (y > window_h - 200) // Opcion triangulo relleno
{
mode = F_TRIANGLE_MODE;
}
else if (y > window_h - 250) // opcion contorno de rectangulo
{
mode = W_RECTANGLE_MODE;
}
else if (y > window_h - 300) // opcion rectangulo relleno
{
mode = F_RECTANGLE_MODE;
}
else if (y > window_h - 350) // opcion contorno del circulo
{
mode = W_CIRCLE_MODE;
}
else if (y > window_h - 400) // opcion circulo relleno
{
mode = F_CIRCLE_MODE;
}
}
// Dibujar contorno alrededor del modo seleccionado

void drawSelected()
{
if (mode == NONE)
{
return;
}
if (mode == POINT_MODE) // opcion punto
{
glColor3f(1.0, 1.0, 1.0);
glBegin(GL_LINE_LOOP);
glVertex2i(2, window_h - 2);
glEnd();
}
else if (mode == LINE_MODE) // opcion linea
{
glColor3f(1.0, 1.0, 1.0);
glEnd();
}
else if (mode == W_TRIANGLE_MODE) // opcion contorno triangulo
{
glColor3f(1.0, 1.0, 1.0);
glEnd();
}
else if (mode == F_TRIANGLE_MODE) // opcion triangulo relleno
{
glColor3f(1.0, 1.0, 1.0);
glEnd();
}
else if (mode == W_RECTANGLE_MODE) // opcion contorno de rectangulo
{
glColor3f(1.0, 1.0, 1.0);
glEnd();
}
else if (mode == F_RECTANGLE_MODE) // opcion rectangulo relleno
{
glColor3f(1.0, 1.0, 1.0);
glEnd();
}
else if (mode == W_CIRCLE_MODE) // opcion contorno de circulo
{
glColor3f(1.0, 1.0, 1.0);
glEnd();
}
else if (mode == F_CIRCLE_MODE) // opcion circulo relleno
{
glColor3f(1.0, 1.0, 1.0);
glEnd();
}
}
// Dibujar los iconos del menu

void drawMenuIcon()
{
// Dibujar icono del punto
glColor3f(0.0, 0.0, 0.0);
glPointSize(4);
glBegin(GL_POINTS);
glEnd();
// Dibujar icono de linea

glColor3f(0.0, 0.0, 0.0);
glBegin(GL_LINES);
glEnd();
// Dibujar icono de triangulo

glColor3f(0.0, 0.0, 0.0);
glEnd();
// dibujar icono triangulo relleno

glColor3f(0.0, 0.0, 0.0);
glBegin(GL_TRIANGLES);
glEnd();
// dibujar icono rectangulo contorno

glColor3f(0.0, 0.0, 0.0);
glEnd();
// dibujar icono rectangulo relleno

glColor3f(0.0, 0.0, 0.0);
glBegin(GL_QUADS);
glEnd();
int segment = 300;

float twoPI = PI * 2.0;
float radius = 15.0;
// Dibujar icono circulo contorno

glColor3f(0.0, 0.0, 0.0);
for (int i = 0; i < segment; i++)

{
glVertex2f(25 + (radius * cos(i * twoPI / segment)),
(window_h - 325) + (radius * sin(i * twoPI /
segment)));
}
glEnd();
// dibujar icono circulo relleno

glColor3f(0.0, 0.0, 0.0);
glBegin(GL_TRIANGLE_FAN);
for (int i = 0; i < segment; i++)

{
glVertex2f(25 + (radius * cos(i * twoPI / segment)),
(window_h - 375) + (radius * sin(i * twoPI /
segment)));
}
glEnd();
// Dibujar cuadro de estado de color

glColor3f(color.r, color.g, color.b);
glBegin(GL_QUADS);
glEnd();
}
// Dibujar el menu Paint

void drawPaintMenu()
{
// Dibujar menu bar
glColor3f(0, 0, 0);
glRectf(0, 0, 50, window_h);
glColor3f(0.0, 0.0, 0.0);

glLineWidth(2.0);
glBegin(GL_LINES);
// Dibujar linea de debajo

glVertex2i(1, 1);
glVertex2i(50, 1);
// Draw left line

glVertex2i(1, 1);
glVertex2i(1, window_h);
// dibujar linea izquierda

glVertex2i(50, 1);
glVertex2i(50, window_h);
// dibujar linea superior

int distance = 50;
// Dibujar 9 lineas para cada icono

for (int i = 1; i <= 9; i++)
{
glVertex2i(1, window_h - distance);
glVertex2i(50, window_h - distance);
distance = distance + 50;

}
glEnd();
}
// Dibujar interfaz de menu

void drawInterface()
{
// Dibujar paint menu
drawPaintMenu();
// Dibujar contorno alrededor del modo seleccionado

drawSelected();
// dibujar menu iconos

drawMenuIcon();
}
// Dibujar todas las primitivas en el área de dibujo

void drawPrimitives()
{
for (int i = 0; i < typeFigure; i++)
{
// Establecer el color de las primitivas según el color
seleccionado
glColor3f(figureList[i].color.r, figureList[i].color.g,
figureList[i].color.b);
if (figureList[i].type == "Point") // Point

{
// Dibujar punto
glPointSize(figureList[i].pointSize);
glBegin(GL_POINTS);
glVertex2f(figureList[i].startX,
figureList[i].startY);
glEnd();
}
if (figureList[i].type == "Line") // Line
{
// Dibujar linea
glLineWidth(figureList[i].lineWidth);
glBegin(GL_LINES);
glVertex2f(figureList[i].endX, figureList[i].endY);
glEnd();
}
if (figureList[i].type == "Triangle") // Triangulo

{
if (figureList[i].isFilled) // Rellenado
{
glBegin(GL_TRIANGLES);
}
else // Contorno
{
}
// Dibujar triangulo
glVertex2f(((figureList[i].endX -
figureList[i].startX) / 2) +
figureList[i].startX, figureList[i].endY);
glVertex2f(figureList[i].endX, figureList[i].startY);
glEnd();
}
if (figureList[i].type == "Rectangle") // Rectangulo
{
{
glBegin(GL_QUADS);
}
else // Contorno
{
}
// Dibujar rectangulo
glVertex2f(figureList[i].endX, figureList[i].startY);
glVertex2f(figureList[i].endX, figureList[i].endY);
glVertex2f(figureList[i].startX, figureList[i].endY);
glEnd();
}
if (figureList[i].type == "Circle") // Circulo
{
{
glBegin(GL_TRIANGLE_FAN);
}
else // Contorno
{
}
// Calcular la mitad de ancho y alto

float halfWidth = (figureList[i].endX -
figureList[i].startX) / 2;
float halfHeight = (figureList[i].endY -
figureList[i].startY) / 2;
// Calcular centr X y Y
float centerX = figureList[i].startX + halfWidth;
float centerY = figureList[i].startY + halfHeight;
// Dibujar circulo
for (int j = 0; j < 360; j++)
{
float angle = j * PI / 180.0;
float x = centerX + (cos(angle) * halfWidth);
float y = centerY + (sin(angle) * halfHeight);
glVertex2f(x, y);
}
glEnd();
}
// Crear marco alrededor de primitivas al dibujar

if (figureList[i].isActivated)
{
glColor3f(1.0, 1.0, 1.0);
glLineWidth(1.0);
glEnable(GL_LINE_STIPPLE);
glLineStipple(1.0, 0xF0F0);
// Marco de línea
if (figureList[i].type == "Line")
{
glVertex2f(figureList[i].endX,
figureList[i].endY);
}
// Triangulo/Rectangulo/Circulo MArco
if (figureList[i].type == "Triangle" ||
figureList[i].type == "Rectangle" ||
figureList[i].type == "Circle")
{
}
glEnd();
glDisable(GL_LINE_STIPPLE);
}
}
}
// Inicializar el área de menú y el área de dibujo

void initArea(float x1, float x2, float y1, float y2)
{
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluOrtho2D(x1, x2, y1, y2);
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
// Inicializar la configuración de OpenGL / GLUT

void init()
{
glClearColor(0.0, 0.0, 0.0, 0.0);
glColor3f(1.0, 1.0, 1.0);
glLoadIdentity();
gluOrtho2D(0, window_w, 0, window_h);
}
// Mostrar devolución de llamada

void display()
{
glClearColor(0.5, 0.5, 0.5, 0.5);
glViewport(50, 0, window_w - 50, window_h);
// Initialize drawing area

initArea(0, 1, 0, 1);
drawPrimitives();
glViewport(0, 0, 50, window_h);
// Inicializar paint menu area

initArea(0, 51, 0, window_h);
drawInterface();
glutSwapBuffers();
}
void reshape(int w, int h)

{
// Ajustar el recorte
glLoadIdentity();
glOrtho(0, w, 0, h, -1.0, 1.0);
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
// Ajustar la ventana gráfica y borrar

glViewport(0, 0, w, h);
glClearColor(0.8, 0.8, 0.8, 0.8);
display();
glFlush();
// Establecer un nuevo valor de ancho y alto de ventana

window_w = w;
window_h = h;
}
// Mouse click llamada

void mouse(int button, int state, int x, int y)
{
if (button == GLUT_LEFT_BUTTON)
{
if (x < 50 && state == GLUT_DOWN)
{
// Seleccionar opcion de dibujado
selectFigure(x, window_h - y, glutGetModifiers());
}
float wx, wy;
wx = (float)(x - 50) / (window_w - 50);

wy = (float)(window_h - y) / window_h;
if (state == GLUT_DOWN)
{
// Desactivar forma anterior
figureList[typeFigure - 1].isActivated = false;
// Manejar inicio dibujar

handleStartDraw(wx, wy);
}
else
{
// Manejar Fin dibujar
handleFinishDraw(wx, wy);
}
}
}
// Mouse movimiento callback

void motion(int x, int y)
{
if (dragging)
{
float wx, wy;
wx = (float)(x - 50) / (window_w - 50);

wy = (float)(window_h - y) / window_h;
// Manejar continuar dibujar

handleContinueDraw(wx, wy);
}
}
// Principal
int main(int argc, char** argv)
{
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB | GLUT_DEPTH);
glutInitWindowSize(800, 600); // asignar ancho de la ventana

glutInitWindowPosition(150, 50); // Asignar la posicion de la
ventana
glutCreateWindow("Paint Computación Gráfica 8927 - Grupo 2");
init();
// Crear click derecho mouse menu

createMouseMenu();
// Callback functions
glutDisplayFunc(display);
glutReshapeFunc(reshape);
glutMouseFunc(mouse);
glutMotionFunc(motion);
glutMainLoop();
return 0;
}

Implementación de Paint en C# y OpenGL

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Implementación de Paint en C# y OpenGL

Cargado por

Copyright:

Formatos disponibles

UNIVERSIDAD DE LAS FUERZAS ARMADAS - ESPE

INFORME DE INVESTIGACIÓN / PRÁCTICA

PROFESOR GRUPO: NOMBRE DE LA ASIGNATURA

Ing. Nancy Tres Personas implementación de Paint en COMPUTACIÓN GRÁFICA

Pablo Alexander Guevara Fabara CI: 1004562813 FIRMA:

Kevin Hernan Mina Puruncajas CI: 1718524380 FIRMA:

Jaime Chevandier Pérez Ortiz CI: 1720170461 FIRMA:

El presente informe tratará sobre la implementación de un entorno gráfico a través de OpenGL y

INFORME DE INVESTIGACIÓN / PRÁCTICA

INFORME DE INVESTIGACIÓN / PRÁCTICA

4. DESARROLLO DE LA INVESTIGACIÓN /PRÁCTICA (INDICAR LOS COMANDOS O

Para OpenGL se utilizaron conocimientos en C++, librerías, métodos y primitivas de OpenGL,

Métodos nuevos Utilizados en el desarrollo de Paint en OpenGL

Marca el plano normal de la ventana actual que necesita volver a mostrarse. En

Realiza un intercambio de búfer en la capa en uso para la ventana actual.

● El aplicativo que se implementó es intuitivo, fácil de usar y nos permite desarrollar un

INFORME DE INVESTIGACIÓN / PRÁCTICA

1. ¿Qué método limpia el lienzo?

INFORME DE INVESTIGACIÓN / PRÁCTICA

a. glutInitwindowsize (width, heigh);

[1] C. Delrieux, S. M. Castro, y A. Silvetti, «Enseñanza introductoria y avanzada en

INFORME DE INVESTIGACIÓN / PRÁCTICA

Utilización de algunas herramientas

INFORME DE INVESTIGACIÓN / PRÁCTICA

Cambio de estilos y tamaño

INFORME DE INVESTIGACIÓN / PRÁCTICA

INFORME DE INVESTIGACIÓN / PRÁCTICA

private void picCanvas_MouseMove(object sender, MouseEventArgs e)

private void picCanvas_MouseUp(object sender, MouseEventArgs e)

INFORME DE INVESTIGACIÓN / PRÁCTICA

private void btnRed_Click_1(object sender, EventArgs e)

private void btnTriangle_Click(object sender, EventArgs e)

private void btnCircle_Click(object sender, EventArgs e)

private void btnPencil_Click(object sender, EventArgs e)

private void btnErazer_Click(object sender, EventArgs e)

INFORME DE INVESTIGACIÓN / PRÁCTICA

private void btnRefill_Click(object sender, EventArgs e)

private void btnSave_Click(object sender, EventArgs e)

//Pedir al usuario seleccionar una ubicacion para guardar la

private void cmbStyle_SelectedIndexChanged(object sender,

private void numSize_ValueChanged(object sender, EventArgs e)

INFORME DE INVESTIGACIÓN / PRÁCTICA

private void btnClear_Click(object sender, EventArgs e)

public void ReadPosition(TextBox posX, TextBox posY)

public void SelectColor(Button picColor)

INFORME DE INVESTIGACIÓN / PRÁCTICA

PointF puntoi = new PointF(mPointEnd.X, mPointEnd.Y);

mGraph.DrawEllipse(mErazer, mPointStart.X, mPointStart.Y,

public void ClearPoint()

public void ChangeStylePen(int type)

INFORME DE INVESTIGACIÓN / PRÁCTICA

public void SelectScale(int scale)

List<Point> listPoints = new List<Point>();

INFORME DE INVESTIGACIÓN / PRÁCTICA

INFORME DE INVESTIGACIÓN / PRÁCTICA

//Transformacion a coordenadas logicas

INFORME DE INVESTIGACIÓN / PRÁCTICA

recHeight = mPointEnd.Y - mPointStart.Y;

if (recWidth > 0 && recHeight > 0)

public void SelectScale(int scale)

INFORME DE INVESTIGACIÓN / PRÁCTICA

INFORME DE INVESTIGACIÓN / PRÁCTICA