Componente para mostrar información gráfica en Delphi. Presentación sobre el tema "Visualización de información gráfica en Delphi". Lista de componentes para mostrar información gráfica.

TRABAJO DE LABORATORIO

SUJETO: « Gráficos enDelfos– construcción de los más simples
formas geométricas"

Breve información de la teoría.

Delphi proporciona al desarrollador tres formas de mostrar gráficos:

    trazar mientras el programa se está ejecutando

    uso de gráficos creados previamente

    crear imágenes usando componentes gráficos

Para construir gráficos, se han creado clases especiales que proporcionan herramientas y métodos para dibujar: las herramientas se describen en tres clases: Tfont, Tpen, Tbrush; El área de dibujo y los métodos los proporciona la clase Tcanvas.

Clasefuente– especifica las características de la fuente utilizada para mostrar el texto en el lienzo. Las propiedades de la clase se describen en la sección "Propiedades básicas disponibles para la mayoría de los componentes".

ClaseTpen– especifica las características del bolígrafo (lápiz) con el que se dibujan las líneas.

Propiedades clase Tpen:

Color:Tcolor – color de línea (predeterminado – negro)

Ancho:entero – grosor de línea en píxeles;

Estilo = (psSolid, psDash, psDot, psdashDot, psClear): define el estilo de línea (sólida, discontinua, punteada, guion-punto, invisible)

Clasecepillo– establece las características del pincel que pinta la superficie de la imagen.

Propiedades clase cepillo:

Color:Tcolor – color del pincel (predeterminado – blanco)

Estilo– patrón de pincel, puede tomar los siguientes valores:

BsSolid – coloración sólida

BsClear – falta de sombreado

BsVertical – líneas verticales

BsBdiagonal – líneas diagonales derechas

BsDiagCross – celda oblicua

BsHorizontal – líneas horizontales

BsFdiagonal – líneas diagonales izquierdas

BsCross – jaula

Claselienzo– determina la superficie sobre la que se coloca la imagen creada y las herramientas con las que se crea la imagen: fuente, lápiz, pincel.

De forma predeterminada, toda el área de cliente del formulario se utiliza como área de trabajo (lienzo) (sin el encabezado, el menú principal y las líneas de desplazamiento del formulario), pero puede asignar áreas de trabajo más pequeñas dentro del formulario utilizando componentes. Caja de pinturas o Imagen. El origen de las coordenadas del lienzo es la esquina superior izquierda del área de trabajo, el ancho del área de trabajo está determinado por la propiedad Ancho del cliente, altura – propiedad Altura del cliente.

Propiedades clase lienzo:

Lienzo:Tcanvas – define el área de dibujo

Cepillar:Tbrush – pincel para rellenar formas cerradas

Fuente:Tfont – fuente para mostrar texto en el lienzo

Bolígrafo:Tpen – lápiz (bolígrafo) para dibujar

Bolígrafo:Tpoint – posición actual del cursor invisible en el lienzo

Comentario : Tipo de punto T – definido de la siguiente manera:

Tipo Punto = registro

Píxeles: Tcolor: establece los colores de los píxeles del lienzo, X, Y: coordenadas de píxeles. La propiedad Píxeles es cómoda de utilizar para trazar gráficos utilizando puntos del color seleccionado.

Métodos principales de la clase TCanvas

    procedimiento Mover a(x,y:entero); - mueve el lápiz sin trazar una línea hasta un punto con coordenadas (x, y).

    Procedimiento Línea a(x,y:entero); - dibuja una línea desde el punto actual hasta el punto con coordenadas (x, y).

Ejemplo : Dibuja una línea azul diagonal en la forma desde la esquina superior izquierda de la forma hasta la esquina inferior derecha.

Color.pluma:= clblue;

MoverA(0,0); LineTo(AnchoCliente, AlturaCliente);

    procedimiento Rectángulo(x1,y1,x2,y2:entero); - dibuja un rectángulo: x1,y1 – coordenadas de la esquina superior izquierda; x2, y2 son las coordenadas de la esquina inferior derecha.

Ejemplo : Dibuja un cuadrado sombreado en amarillo con un lado de 60 píxeles en el medio de la forma.

var Xc,Yc: número entero; //

Xc:=AnchoCliente div 2;

Xy:=AlturaCliente div 2;

Canvas.Brush.color:=clamarillo;

Lienzo.rectangle(xc-30,Yc-30,xc+30,Yc+30);

    procedimiento Elipse(x1,y1,x2,y2:entero); - dibuja una elipse inscrita en un rectángulo con las coordenadas especificadas.

Ejemplo : dibuja una elipse inscrita en el componente PaintBox.

PaintBox1.Canvas.Pen.Width:=4; //ancho de línea = 4 píxeles

PaintBox1.Canvas.Ellipse(0,0, PaintBox1. ClientWidth, PaintBox1. ClientHeight);

    procedimiento Polígono(); - dibuja un polígono cerrado especificado por una serie de coordenadas.

Ejemplo : dibuja un diamante relleno que conecta los puntos medios de los lados de la forma

var Xc,Yc: entero; // coordenadas del centro del área de cliente del formulario

Xc:=AnchoCliente div 2;

Xy:=AlturaCliente div 2;

Color.del.pincel.del.lienzo:=Rgb(275,140,70); // naranja color sombreado

Lienzo.Polígono();

fin;

    Procedimiento Arco(x1,y1,x2,y2,x3,y3,x4,y4:entero); - muestra el arco de una elipse delimitada por un rectángulo (x1, y1, x2, y2). El arco se muestra desde un punto con coordenadas (x3,y3) hasta un punto con coordenadas (x4,y4) contra agujas del reloj.

Ejemplo : dibuja un arco de elipse que conecta el centro del lado superior del componente
PaintBox con la mitad de su lado derecho.

Procedimiento Tform1.Button1Click(Remitente:Tobject);

var X3,y3,x4,y4: Entero;

Con PaintBox1 haz

Canvas.Pen.Color:= clWhite;

Ancho.del.lápiz.del.lienzo:= 3;

Canvas.rectangle(0, 0, PaintBox1.ClientWidth, PaintBox1.ClientHeight);

X3:= Ancho del cliente div 2;

X4:= Ancho del Cliente;

Y4:= AlturaCliente div 2;

Canvas.Pen.Color:= clGranate;

Canvas.ARC(0, 0, PaintBox1.ClientWidth, PaintBox1.ClientHeight, x3, y3, x4, y4);

Fin;

    procedimiento Acorde(x1,y1,x2,y2,x3,y3,x4,y4:entero); - dibuja una cuerda, una línea recta que conecta 2 puntos de la elipse: un punto con coordenadas (x3, y3) con un punto (x4, y4).

Ejemplo : Sustituya el método Chord en el ejemplo dado por el método ARC y obtenga el siguiente resultado.

    procedimiento Tarta(x1,y1,x2,y2,x3,y3,x4,y4:entero); - dibuja un segmento de elipse que conecta el centro de la elipse con las coordenadas (x3,y3) y (x4,y4).

Ejemplo : En el ejemplo dado para el método ARC, imagine el método PIE y obtenga este resultado.

    procedimiento Salida de texto(x,y:entero;Texto:cadena); - genera la cadena pasada en el parámetro Texto a un rectángulo cuya esquina superior izquierda está especificada coordenadas x,y. Las características de la fuente las establece la herramienta Fuente.

Ejemplo : escriba el nombre del gráfico trazado en la parte inferior del formulario.

Altura.de.fuente.del.lienzo:=20 ; //altura del carácter 20 píxeles

Color.de.fuente.del.lienzo:=clblue;

Canvas.TextOut(10, ClientHeight-24, 'gráfico de la función SIN(X)');

Componentes gráficos

Delphi ofrece una serie de componentes listos para usar que le permiten mejorar interfaz de usuario. Estos componentes se encuentran en la página. Adicional Y Sistema paletas de componentes.

ComponenteImagen(Claseimagen) – creado para mostrar imágenes gráficas almacenadas en archivos externos con extensiones:

    Ico(icono, pictograma);

    Bmp (mapa de bits, mapa de bits);

    Wmf, .emf (metarchivo);

    Jpg, .jpeg (imagen comprimida JPEG).

Básico propiedades :

Tamaño automático:booleano: cuando se establece en verdadero, el componente ajusta sus dimensiones al tamaño de la imagen cargada; el valor predeterminado es falso.

Estirar:booleano: si es verdadero, el valor cargado ocupa toda el área del componente; el valor predeterminado es falso.

Lienzo:Tcanvas: se utiliza para dibujar dentro del componente durante la ejecución del programa.

Imagen:Tpicture: define la imagen colocada en el componente.

Básico métodos clase Imagen:

Procedimiento Carga del archivo(Nombre de archivo:cadena); - carga una imagen de un archivo llamado Nombre de archivo en el componente.

Procedimiento Guardar en archivo(Nombre de archivo:cadena); -guarda la imagen del componente en un archivo llamado Nombre de archivo.

ComponenteCaja de pinturas - define un área de dibujo rectangular. La propiedad principal es Lienzo, todos los métodos de la clase Tcanvas están disponibles, no tiene propiedades independientes.

Ejemplo : dibuja una elipse amarilla inscrita en el componente PaintBox1.

Procedimiento Tform1Button1Click(remitente:Tobject);

Con PaintBox1.Canvas hacer

Pincel.Color:=clamarillo;

Elipse(0,0,PaintBox1.ClientWidth, PaintBox1.ClientHeight);

fin;

ComponenteBitBtn botón de trama

El botón BitBtn, a diferencia del estándar, puede, además del título (Caption), contener una imagen especificada por la propiedad Glifo. Hay un conjunto de botones BitBtn estándar, con propiedades predefinidas (con una imagen, inscripción y propósito específicos): el tipo de botón estándar se selecciona a través de la propiedad Amable. Tipo=(bkPersonalizado, bkAbortar, bkCancelar, bkCerrar…)

Tarea número 1

Cree una aplicación que contenga dos componentes de Imagen y 4 botones en el formulario principal ("Cargar imagen", "Construir una figura geométrica", "Cambiar color", "Salir") y le permita:

a) cargue la imagen gráfica seleccionada por el usuario en el componente Imagen1 para que la imagen ocupe toda el área del componente Imagen.

b) debajo del componente Imagen1, muestre la inscripción “Esta es una imagen de un archivo.

(para cualquier medida del tamaño y posición del componenteImagen1 inscripción debe
ubicado estrictamente debajo del componente).

c) dibujar una figura geométrica dentro del componente Imagen2: un segmento de elipse relleno que conecta el centro del componente Imagen con el centro de los lados inferior y derecho del componente Imagen.

(para cualquier cambio en el tamaño y posición del componenteImagen2 la figura debe estar construida correctamente, es decir según las especificaciones del componenteImagen2)

d) cambiar el color de la línea de una figura dibujada en Imagen2 a petición del usuario utilizando el componente ColorDialog.

Tarea número 2

Cree una aplicación que le permita colocar aleatoriamente varias etiquetas (por ejemplo, la palabra "¡Hurra!") en un componente de Imagen. Para implementar esto, utilice el generador de números aleatorios Randomize y la función Random.

El usuario debe ingresar las dimensiones del componente Imagen, la palabra que se muestra en la Imagen y el número de palabras.

Tarea número 3

Cree una aplicación que le permita seleccionar el nombre de una forma geométrica de un ListBox y dibujar la forma seleccionada en el componente Imagen. El color de la forma se selecciona en el componente RadioGroup.

Tarea número 4

Divida el componente PaintBox1 en 4 partes iguales, pinte cada parte de un color diferente, por ejemplo: azul, amarillo, verde, rojo.

Al lado de cada esquina de PaintBox1, escriba las coordenadas de esa esquina (relativas al origen del formulario en el que se encuentra el componente PaintBox1).

Tarea número 5

CON

seleccione el tipo de forma que se dibujará del componente Radiogroup1, el color de relleno del componente Radiogroup2 y dibuje la forma seleccionada en el componente Imagen.

Tarea número 6

Cree una aplicación que permita al usuario establecer las dimensiones del componente PaintBox1 (en píxeles).

Divida el componente PaintBox1 en 2 partes iguales, dentro de cada parte dibuje una elipse, rellena con el color seleccionado por el usuario en ColorDialog.

Tarea número 7

CON Crea una aplicación que te permita:

seleccione el nombre de una forma geométrica del ListBox y dibuje la forma seleccionada en el componente Imagen. La forma debe rellenarse con el color seleccionado por el usuario en el componente ColorDialog si se selecciona Sí en el componente RadioGroup.

Tarea número 8

Cree una aplicación que permita al usuario establecer las dimensiones del componente PaintBox1 (en píxeles).

Divida el componente PaintBox1 en 4 partes iguales, dentro de cada parte dibuje una forma geométrica diferente (elipse, rombo, triángulo y rectángulo). El color de cada forma lo selecciona el usuario en ColorGrid.

Tarea número 9

seleccione el nombre de la forma geométrica del ListBox
formas (elipse, rombo, rectángulo) y dibujar
la forma seleccionada en el componente Imagen. Ubicación
formas en el componente Imagen (I cuarto, II cuarto,

III o IV trimestre) y se selecciona el color de la figura
de los componentes de RadioGroup.

Tarea número 10

Cree una aplicación que permita al usuario establecer las dimensiones del componente PaintBox1 (en píxeles).

Asegúrese de que el tamaño del lado no pueda ser texto, no pueda ser un número negativo y no pueda exceder el tamaño del formulario más pequeño.

Divida el componente PaintBox1 en 4 partes iguales, dentro de cada parte dibuje una forma geométrica seleccionada por el usuario en el Combobox (elipse, rombo, triángulo y rectángulo). El color de la figura lo selecciona el usuario en ColorBox.

Tarea número 11

Crea una aplicación que te permita:

seleccione del componente Radiogroup la posición del dibujo

en el componente Imagen del triángulo rectángulo, establezca
el color del sombreado o del contorno de la figura, dependiendo de
habilitando los botones de casilla de verificación. Seleccione el color mediante
Componente ColorGrid.

Tarea número 12

Cree una aplicación que permita al usuario establecer las dimensiones del componente PaintBox1 (en píxeles).

Asegúrese de que el tamaño del lado no pueda ser texto, no pueda ser un número negativo y no pueda exceder el tamaño del formulario más pequeño.

Divida el componente PaintBox1 en 2 partes iguales, dentro de una de las partes dibuje una forma geométrica seleccionada por el usuario en el Combobox (elipse, rombo, triángulo y rectángulo). El color de la figura lo selecciona el usuario en ColorBox.

Por ejemplo, puede cambiar el color del formulario de la siguiente manera:

formulario1.Color:= ColorBox1.Colors;

Tarea número 13

Crea una aplicación que te permita:

a) dibujar un cuadrado en el medio de la forma (el tamaño del lado del cuadrado lo ingresa el usuario). Asegúrese de que el tamaño del lado no pueda ser texto, no pueda ser un número negativo y no pueda exceder el tamaño del formulario más pequeño.

b) divida el cuadrado en una o dos diagonales, dependiendo de la inclusión de los botones de casilla de verificación, y pinte cada triángulo resultante de un color diferente. La elección del color la hace el usuario.

Tarea número 14

Cree una aplicación que permita al usuario establecer las dimensiones del componente PaintBox1 (en píxeles).

Asegúrese de que el tamaño del lado no pueda ser texto, no pueda ser un número negativo y no pueda exceder el tamaño del formulario más pequeño.

Divida el componente PaintBox1 en 2 partes iguales, dentro de una parte dibuje un rombo y dentro de la otra parte dibuje cualquier triángulo. El color de la figura lo selecciona el usuario en ColorBox.

Por ejemplo, puede cambiar el color del formulario de la siguiente manera:

formulario1.Color:= ColorBox1.Colors;

Tarea número 15

Crea una aplicación que te permita:

a) establecer las dimensiones del componente Imagen horizontal y verticalmente para que sean iguales al número ingresado por el usuario desde el teclado;

(siempre que el tamaño del lado no pueda ser texto, no pueda ser un número negativo y no pueda exceder el tamaño del formulario más pequeño)

b) dividir el componente Imagen en 4 cuadrados iguales con dos líneas azules;

c) dentro de cada cuadrado resultante, dibuje un círculo inscrito en él (permita al usuario elegir el color de los círculos a través del cuadro de diálogo de selección de color).

Tarea número 16

Cree una aplicación que permita al usuario establecer las dimensiones del componente PaintBox1 (en píxeles).

Asegúrese de que el tamaño del lado no pueda ser texto, no pueda ser un número negativo y no pueda exceder el tamaño del formulario más pequeño.

Divida el componente PaintBox1 en 9 partes iguales y pinte cada rectángulo de tablero de ajedrez resultante. El color de relleno lo selecciona el usuario en ColorBox.

Por ejemplo, puede cambiar el color del formulario de la siguiente manera:

formulario1.Color:= ColorBox1.Colors;

Tarea número 17

Coloque dos componentes de Imagen y cuatro botones en el formulario: Color de línea, Color de relleno, Aceptar y Salir; y el componente Editar.

Cuando hace clic en el botón Aceptar, se dibuja un cuadrado con el lado X en la Imagen1 y un triángulo rectángulo con catetos iguales, cada uno de los cuales tiene una longitud X, en la Imagen2.

El vértice del triángulo coincide con el origen de Imagen2. Uno de los vértices del cuadrado coincide con el origen de Imagen1.

El botón Aceptar estará disponible solo cuando haya seleccionado un color de línea y un color de relleno para dibujar la forma.

X – selecciona aleatoriamente, usando Funciones aleatorias y el componente Editar debería mostrar el valor de X.

Tarea número 18

Cree una aplicación que permita al usuario establecer las dimensiones del componente PaintBox1 (en píxeles).

Divida el componente PaintBox1 en 4 partes iguales; dentro de la parte seleccionada por el usuario, se debe construir un círculo relleno, cuyo tamaño lo establece el usuario. El usuario selecciona el color de relleno en ColorBox.

Por ejemplo, puede cambiar el color del formulario de la siguiente manera:

formulario1.Color:= ColorBox1.Colors;

Para mostrar información gráfica, la biblioteca Delphi proporciona componentes, cuya lista se muestra en la tabla. 6.

Tabla 6

Componentes para mostrar información gráfica.

Componente Página Descripción
Imagen Adicional Se utiliza para mostrar gráficos.
PaintBox (ventana para dibujar) Sistema Se utiliza para crear un área en el formulario en la que puedes dibujar.
DrawGrid (tabla de dibujos) Adicional Se utiliza para mostrar datos que no son de texto en filas y columnas.
Cuadro (cuadros y gráficos) Adicional El componente pertenece a la familia de componentes TeeChart, que se utilizan para crear cuadros y gráficos.
Chartfx (tablas y gráficos) ActiveX Editor de cuadros y gráficos
FIBook (páginas de Excel) ActiveX Componente de procesamiento y entrada de información numérica.
VtChart (gráficos) ActiveX Ventana de diagramación

Además, puede mostrar e ingresar información gráfica en la superficie de cualquier componente de ventana que tenga la propiedad Lienzo- lienzo.

Tablas de imágenes: componentes DrawGrid y StringGrid

Componente dibujarcuadrícula Se utiliza para crear una tabla en la aplicación que puede contener imágenes gráficas. Este componente es similar al componente Cuadrícula de cuerdas ya que este último se deriva de Dibujar cuadrícula. Por lo tanto en dibujarcuadrícula todas las propiedades, métodos y eventos del componente están presentes Cuadrícula de cuerdas excepto aquellos relacionados con el texto, es decir. excepto propiedades Células, Cols, Filas, Objetos. Desde este punto de vista, el componente Cuadrícula de cuerdas tiene capacidades significativamente mayores que dibujarcuadrícula ya que puede almacenar tanto imágenes como textos en celdas. Y si quieres ingresar texto en algunas celdas dibujarcuadrícula entonces necesitarás usar métodos para mostrar texto en un esquema, lo cual no es muy conveniente.

Componentes DrawGrid y StringGrid tener un esquema Lienzo, en el que puedes publicar imágenes.

Hay un método Rectificado celular, que devuelve el área del lienzo asignada para una celda determinada. Este método se define como

función CellRect(ACol, ARow: Longint): TRect;

Dónde ACol y ARow- índices de columnas y filas a partir de 0, en cuya intersección se encuentra la celda. El área devuelta por esta función es el área del lienzo en la que se puede dibujar la imagen deseada. Por ejemplo, el operador

DrawGridl.Canvas.CopyRect(DrawGridl.CellRect(1,1),

BitMap.Canvas,Rect(0,0,BitMap.Height,BitMap.Width));

método de copias CopiarRect a la celda (1,1) de la tabla dibujarcuadrícula imagen del componente Mapa de bits. Esta celda es la segunda desde la izquierda y la segunda desde arriba en la tabla, ya que los índices comienzan en 0. Tenga en cuenta que si la celda es más pequeña que el tamaño de la imagen copiada, solo aparecerá la parte superior izquierda de la imagen en la célula.

Imagen en el lienzo del componente. DrawGrid y StringGrid, Al igual que en el lienzo de cualquier componente, está sujeto a borrado cuando la ventana de la aplicación se superpone con otras ventanas o, por ejemplo, cuando la aplicación se minimiza.

Una forma conveniente de ingresar imágenes en celdas. dibujarcuadrícula es utilizar un controlador de eventos OnDrawCell. Estos eventos ocurren para cada celda de la tabla en el momento en que se vuelve a dibujar. El encabezado del controlador se ve así:

procedimiento TForml.DrawGridlDrawCell(Remitente: TObject;

ACol, ARow: Entero; Rectificado: TRect; Estado: TGridDrawState)

Parámetro Estado indica el estado de la celda. Es un conjunto que puede contener los siguientes elementos: gdSeleccionado- celda seleccionada, gdEnfocado- la celda que está enfocada, gdFijo- una celda en un área fija de la mesa. Parámetro Estado se puede utilizar para mostrar celdas de manera diferente en diferentes estados.

Componente de forma

Componente de forma Sólo puede clasificarse condicionalmente como un medio para mostrar información gráfica, ya que simplemente representa varias formas geométricas, adecuadamente sombreadas. La propiedad principal de este componente es Forma(formulario), que puede tomar los siguientes valores:

StRectangle – rectángulo;

StSquare – cuadrado;

StRoundRect: rectángulo con esquinas redondeadas;

StRouhdSquare: cuadrado con esquinas redondeadas;

StEllipse – elipse;

StCircle - círculo.

Otra propiedad esencial del componente es Cepillar(cepillar). Esta propiedad es un objeto de tipo cepillo, tener una serie de subpropiedades, en particular el color (Pincel.Color) y estilo (Estilo.de.pincel) llenando la figura. Puede ver el relleno de algunos valores de estilo en la Fig. 3.2. La tercera propiedad específica del componente. Forma- Bolígrafo(bolígrafo) que define el estilo de línea.

Componente de gráfico

Ahora veamos el componente. Cuadro. Este componente le permite crear varios cuadros y gráficos que se ven muy impresionantes. Componente Cuadro tiene muchas propiedades, métodos, eventos, de modo que si los consideráramos todos, tendríamos que dedicarle un capítulo completo. Por tanto, nos limitaremos a considerar únicamente las características principales. Cuadro. Puede encontrar el resto en la ayuda integrada de Delphi, o simplemente probarlos experimentando con los diagramas.

Componente Cuadro es un contenedor de objetos Serie- herederos de la clase Serie TChart. Cada uno de estos objetos representa una serie de datos caracterizados por un determinado estilo de visualización: un gráfico o diagrama particular. Cada componente Cuadro Puede incluir varios episodios. Si desea mostrar un gráfico, cada serie corresponderá a una curva en el gráfico. Si desea mostrar gráficos, para algunos tipos de gráficos puede superponer varias series diferentes una encima de otra, para otros (como los gráficos circulares) probablemente se verá feo. Sin embargo, incluso en este caso, puede configurar para un componente Cuadro varias series de datos idénticos con diferentes tipos diagramas. Luego, al activar uno de ellos en cada momento, puede brindarle al usuario la opción de elegir el tipo de gráfico que muestra los datos que le interesan.

Coloque uno o dos componentes. Cuadro en el formulario y observe las propiedades que se abren en el Inspector de objetos. A continuación se ofrecen algunas explicaciones de algunos de ellos.

AllowPanning: determina la capacidad del usuario para desplazarse por la parte observada del gráfico durante la ejecución presionando el botón derecho del mouse. Valores posibles: pmNinguno: el desplazamiento está prohibido, pmHori/ontal, pm Vertical o pmBoth: el desplazamiento está permitido, respectivamente, solo en dirección horizontal, solo en dirección vertical o en ambas direcciones.

AhowZoom: permite al usuario cambiar el zoom de la imagen en tiempo de ejecución recortando fragmentos de un cuadro o gráfico con el cursor del mouse. Si el marco de un fragmento se dibuja hacia la derecha y hacia abajo, entonces este fragmento se estira para cubrir todo el campo del gráfico. Y si el marco se dibuja hacia arriba y hacia la izquierda, se restaura la escala original.

Título: define el título del diagrama.

Pie: define el título debajo del diagrama. Ninguno por defecto. El texto de la firma está determinado por la subpropiedad Texto.

Marco: define el marco alrededor del diagrama.

Junto a muchas de las propiedades enumeradas en el Inspector de objetos hay botones con elipses que le permiten llamar a una u otra página del Editor de gráficos, una ventana de varias páginas que le permite configurar todas las propiedades de los gráficos. También se puede acceder al Editor de diagramas haciendo doble clic en el componente Cuadro o haciendo clic derecho sobre él y seleccionando el comando Editar gráfico en el menú emergente.

Haga doble clic en el componente superior Cuadro. Se le dirigirá a la ventana del Editor de gráficos en la página Gráfico, que tiene varias pestañas. En primer lugar, le interesará la pestaña Serie. Haga clic en el botón Agregar: agregue una serie. Serás llevado a una ventana donde podrás seleccionar el tipo de cuadro o gráfico. En este caso, seleccione Circular: un gráfico circular. Usando la pestaña Títulos, puede configurar el título del gráfico, la pestaña Leyenda le permite establecer parámetros para mostrar la leyenda del gráfico (lista de símbolos) o eliminarla de la pantalla por completo, la pestaña Panel determina la apariencia del panel en donde se muestra el gráfico, la pestaña 3D le brinda la oportunidad de cambiar la apariencia de su gráfico: inclinación, desplazamiento, grosor, etc.

Cuando está trabajando en el Editor de gráficos y ha seleccionado un tipo de gráfico, los componentes Cuadro Su formulario muestra su apariencia con los datos condicionales ingresados ​​en él. Por lo tanto, puede ver inmediatamente el resultado de aplicar varias opciones a su aplicación, lo cual es muy conveniente.

La página Serie, que también tiene varias pestañas, le brinda la posibilidad de seleccionar opciones de visualización adicionales para la serie. En particular, para un gráfico circular, en la pestaña Formato, es útil habilitar la opción Circular circular, que garantizará que el gráfico se muestre como un círculo en cualquier tamaño del componente Gráfico. En la pestaña Marcas, los botones del grupo Estilo determinan lo que se escribirá en las etiquetas relacionadas con segmentos individuales del gráfico: Valor - valor, Porcentaje - porcentajes, Etiqueta - nombres de datos, etc.

Puede, si lo desea, agregar otra serie idéntica a este componente de Gráfico haciendo clic en el botón Clonar en la pestaña Serie de la página Gráfico, y luego para esto series nuevas Haga clic en el botón Cambiar y seleccione un tipo de gráfico diferente, por ejemplo, Barra.

Salga del Editor de gráficos, seleccione el componente de gráfico inferior en su aplicación y repita la configuración de sus propiedades usando el Editor de gráficos. En este caso, deberá especificar dos series si desea mostrar dos curvas en el gráfico y seleccionar el tipo de gráfico de líneas. Porque el estamos hablando acerca de En cuanto a los gráficos, puede utilizar las pestañas Eje y Paredes para especificar las características de las coordenadas de los ejes y los bordes tridimensionales del gráfico.

Eso es todo por el diseño. apariencia finaliza la aplicación. Todo lo que queda es escribir el código que especifica los datos que desea mostrar. Para la aplicación de prueba, establezcamos solo algunos datos constantes en el gráfico circular y algunas funciones en los gráficos.

Para establecer los valores mostrados, debe utilizar métodos de serie. Centrémonos sólo en tres métodos principales.

Método Claro borra una serie de datos ingresados ​​previamente.

Método Agregar:

Agregar(Const AValue:Double; Const ALabel:String; AColor:TColor),

le permite agregar un nuevo punto al diagrama. Parámetro Un valor corresponde al valor añadido, parámetro Una etiqueta- una etiqueta que se mostrará en el diagrama y en la leyenda, Un color- color. Parámetro Una etiqueta- opcional, se puede dejar vacío: ‘ ’. Método AgregarXY:

AddXY(Const AXValue, AYValue: Doble; Const ALabel: Cadena; AColor: TColor)

le permite agregar un nuevo punto al gráfico de la función. Opciones Valor AX Y Valor AY Corresponden al argumento y a la función. Opciones ALabel y AColor lo mismo que en el método Agregar.

Por tanto, el procedimiento para cargar datos en nuestro ejemplo podría verse así:

Al constante=155; A2=251; A3=203; A4=404; var i:palabra; comenzar

Con la serie comienza

Add(Al,"Taller l",clYellow);

Agregar(A2,"Taller 2",clBlue);

Agregar(A3,"Taller 3",clRed);

Agregar(A4,"Taller 4",clPúrpura); fin;

Serie2.Claro; SerieS.Claro; para i:=0 a 100 comience

Serie2.AddXY(0,02*Pi*i,sin(0,02*Pi*i)

SerieS.AddXY(0.02*Pi*i,cos(0.02*Pi*i) final;

ClRed); ,clAzul);

Operadores Claro son necesarios si va a actualizar datos mientras la aplicación se está ejecutando.

Con esto concluye nuestra introducción al componente. Cuadro. Es cierto que hemos considerado sólo una pequeña parte de sus capacidades.


“Visualización de información gráfica en Delphi” Esquema del tema: 1.C S pppp ooooo ssss ooooo bbbb yyyy in in in yyyy vvvv ooooo dddd aaaa yy g rrrrr aaaa ffff iii hhhh eee ssss kkkk ooooo yyyy nnnn ffff ooooo rrrrr mmmm ahh h tskst iiiiii iiiiii en iv en D D D D eeee llll pppp hhhh iiii O O tttt ooo bbbb rrrrr aaaa zhzhzh eee nnnn iiii eee k k k aaaa rrrrr tttt iiii nnnnn ooooo kkkk O O tttt ooooo bbbb rrrrr aaa zhzhzh eee nnnnn iiiiii eee g g y g eee ooooo mmmm eee ttt rrrr iiii hhchh eee ssss kkkk iiii xxxxx ffff iiii yyyy uuuu rrrrr P Pooooo ssss ttt rrrrr ooooo eee nnnn iiii eee yy g g rrrrr aaaa ffff iiii kkkk ooooo vvvv i i i and d d d d iiiiii aaaa yyyy rrrrr aaaa mmmm mmmm....


1. Métodos para mostrar información gráfica. En Delphi, hay varias formas de mostrar información gráfica: salida de imágenes preparadas previamente (imagen, componentes de forma); P Construcción de gráficos y diagramas (componente de gráfico, etc.); F Formación de imágenes mediante programación (objeto Canvas).


2.Mostrar 2.Mostrar imágenes. La visualización de imágenes utilizando el componente Imagen la examinamos en LLC DDDDD DDDD LLC Yiyy y y y ZZZZ P P P P PRRRDDDDDDDDDDDDD IIII XXXX T T T T T T T T T T TOTEMMM .... Aquí consideraremos un ejemplo de implementación animación más simple cambiando periódicamente la imagen mostrada en los componentes de Imagen. PPPP EDURRRREEEE AAAA TTTT IIII n N N n AAAAAA PP PRRR IIII MMMMEEEE RRRRR...






3.Display 3.Visualización de formas geométricas. Y a partir de varios componentes de Shape puedes crear dibujos sencillos. P Al cambiar mediante programación la posición (.Izquierda,.Arriba), el tamaño (.Ancho,.Alto) y el color (Pincel.Color) de los componentes de Forma en un dibujo, puede implementar elementos de la animación más simple. R R R R aaaa ssssssss mmmm ooooh tttt rrrrr eee tttt yee p p p p rrrrr iii mmmm eee rrrrr....


4.Construcción 4.Construcción de gráficas y diagramas. Los diagramas están diseñados para una representación más visual de conjuntos de datos numéricos, su visualización y análisis visual. PPPP rrrrr iiii mmmm eee rrrrr.... Para crear gráficos en Delphi existen varios componentes, uno de ellos es el componente Gráfico (sección TeeChart Std).










Gráficos y diagramas. Los datos que se mostrarán generalmente se pasan al gráfico mediante programación, por ejemplo: Series1.Clear; (borrar serie) para i:=1 a N hacer Series1.addxy(i, A[i], clGreen); Valor del eje X Valor del eje Y Etiqueta del eje X Color de datos en el gráfico PP aaaa sssssssssss mmmm ooooo tttt rrrrr eee tttt yee p p p p prrrr iiii mmmm eee rrrrr p p p poooo ssss ttt rrrrr ooooo eee nnnn iiiiii yayyy yyyy rrrrr aaa un ffff iii kkkk aaaa f f f f uuuu nnnn kkkk tsstst iiiiii y y y y = = = = S S S S iiii nnnn ((((xxxx))))


Siguiente: Trabajo de laboratorio ““““ OOOO tttt ooooo bbbb rrrrr aaaa zhzhzh eee nnnn iiii eee k k k k aaaa rrrrr tttt iiii nnnn ooooo kkkk i i i i yyyy eee ooooo mmmm eee tttt rrrrr iiii hchchh eee ssss kkkk iiii xxxx ffff iiii yyyy uuuu rrrrr, y y y xxxx a a a a a nnnn iiii mmmm aaaa tsstst iiii yayayaya """"...Tarea: 1) Desarrollar una aplicación para realizar animaciones simples cambiando periódicamente la imagen mostrada en los componentes de Imagen. (El número de imágenes es al menos tres, elige las imágenes tú mismo).




Siguiente: Trabajo de laboratorio ““““ PPPP oooo ssss tttt rrrrr ooooo eee nnnn iiii eee yy g rrrrr aaaa ffff iiii kkkk ooooo vvvv i i i i d d d iiii aaaa yyyy rrrrr aaaa mmmm mmmm """". ..Tarea: 1)M modificar la aplicación de trabajo de laboratorio 9 (Mostrar datos en una tabla). Agregue la capacidad de mostrar algunos datos de una tabla en un histograma o gráfico circular. 2) Construya una gráfica de la función dada.

Biblioteca de componentes visuales (VCL) Delphi nos proporciona los siguientes componentes visuales para mostrar información gráfica: Image (imagen), PaintBox (ventana para dibujar), DrawGrid (tabla de imágenes), Chart (tablas y gráficos), Animate (salida de videoclips). ), así como Formulario. Estos componentes tienen una propiedad Canvas (analizada anteriormente) que brinda acceso a cada píxel. Por supuesto, no es necesario dibujar píxel a píxel para trabajar con gráficos en Delphi; el sistema Delphi proporciona potentes herramientas para trabajar con gráficos.

Echemos un vistazo más de cerca a los componentes anteriores:

Componente de imagen

Es un objeto de la clase TImage. Se utiliza para mostrar imágenes leídas de archivos gráficos. De forma predeterminada, muestra imágenes presentadas en formato *.bmp en la superficie del formulario. Para generar imágenes en formato jpg, debe incluir el módulo JPEG en la directiva de usos. Ubicado en la pestaña Adicional de la Paleta de componentes.

Después de colocar el componente Imagen en el formulario, éste toma la forma de un área rectangular seleccionada.

Figura 9: Componente de imagen en el formulario

Para abrir un cuadro de diálogo para seleccionar la imagen deseada, debe hacer lo siguiente usando el Inspector de objetos. Para hacer esto, busque la propiedad Imagen y haga clic en los tres puntos a la izquierda de ella. Se abre la ventana del Editor de imágenes y en ella selecciona Cargar; en la ventana que se abre, selecciona el archivo de imagen.

Esto también se puede hacer mediante programación llamando al método LoadFromFile de la propiedad Picture:

Imagen1.Imagen.LoadFromFile("nombre_pic.jpeg");

donde name_pic.jpeg es el nombre del archivo.

Tabla 8 - Propiedades básicas del componente Imagen

Propiedad

Descripción

Imagen mostrada en el campo del componente.

Dimensiones de los componentes. Si estas dimensiones son más pequeñas que el tamaño de la ilustración y las propiedades Estirar, Tamaño automático y Proporcional están establecidas en Falso, entonces se muestra parte de la imagen.

Le permite escalar imágenes automáticamente sin distorsión. Para realizar el escalado, la propiedad AutoSize debe establecerse en False

Le permite escalar (reducir o estirar) automáticamente una imagen para que se ajuste al tamaño del componente Imagen. Si el tamaño del componente no es proporcional al tamaño de la imagen, la imagen se distorsionará.

Le permite cambiar automáticamente el tamaño de un componente para que se ajuste al tamaño de la imagen.

Le permite determinar la posición horizontal de la imagen en el campo del componente Imagen si el ancho de la imagen es menor que el ancho del componente.

Superficie para mostrar gráficos.

Especifica un color de fondo de imagen transparente

Ejemplo 1: escriba un programa para ver imágenes utilizando el componente Imagen. El programa debe tener las siguientes capacidades:

  • · ver imágenes en la carpeta;
  • · ver la imagen en tamaño completo o en el formato más adecuado para el tamaño de la ventana;
  • · administrar archivos de imágenes, así como imprimir, guardar, eliminar y editar imágenes;
  • · si es necesario, abra la imagen en un programa de edición;

Figura 10 - Ventana del programa antes de que comience

Creando un proyecto:

  • 1. Cree una carpeta para los archivos del programa e inicie el entorno de desarrollo integrado Delphi.
  • 2. Agregue componentes al formulario:

En primer lugar colocaremos en el formulario el componente Imagen, componente principal con el que tendremos que trabajar. Además de esto, necesitaremos los siguientes componentes:

  • · ScrollBox Es necesario cuando en modo de tamaño completo la imagen va más allá de la Imagen. Asignamos el valor alClient a su propiedad Aling para que sus dimensiones cambien proporcionalmente con el tamaño de la ventana. Y coloque el componente Imagen sobre él;
  • · También agregaremos componentes de diálogo SavePictureDialog y OpenPictureDialog, diseñados para guardar y abrir imágenes. Necesitamos el primero para copiar la imagen al directorio seleccionado, el segundo para abrir el cuadro de diálogo de apertura. archivo gráfico. Están ubicados en la página Diálogos de la Paleta de componentes. Desde esta página también necesitamos el componente PrintDialog, que debemos llamar al cuadro de diálogo para seleccionar una impresora para imprimir.
  • · Agrega MainMenu para agregar un menú principal al programa y XPManifest para un diseño más colorido
  • · También necesitamos almacenar los nombres de las imágenes ubicadas en algún lugar del directorio de trabajo. El componente ListBox es conveniente para estos propósitos; se puede ocultar al procesar el evento Crear de Form1.
  • · Para colocar botones de navegación y trabajar cómodamente con ellos, agregaremos un panel Velo, en el que colocaremos estos botones (Imagen anterior, Imagen siguiente, Tamaño real, Ajustar al tamaño, Eliminar, Copiar a, Imprimir, Editar). Para ellos se selecciona SpeedButton como componente.
  • · Añade un temporizador para capturar las pulsaciones de las teclas "Izquierda" (imagen anterior), "Derecha" (imagen siguiente) y la tecla "Supr" (eliminando imagen).
  • · Y un componente más: ProgressBar, que muestra el proceso de carga de archivos grandes *.Jpg.
  • 3. Escriba el código para procesar el evento de clic del botón (Imagen anterior, Imagen siguiente, Tamaño real, Ajustar al tamaño, Eliminar, Copiar a, Imprimir, Editar). Escriba código para procesar el evento de hacer clic en los elementos del menú MainMenu (Salir, Abrir, Cerrar, Crear).
  • 4. Establezca la configuración inicial para crear el formulario. Haga doble clic en espacio libre forme y escriba el código de procedimiento procedimiento TForm1.FormCreate(Sender:TObject), consulte el código del módulo en el Apéndice 1.
  • 5. Escribir procedimientos del siguiente tipo:

procedimiento FindFileInFolder(ruta, ext: cadena);

Este procedimiento escanea la carpeta de ruta en busca de archivos usando la máscara ext.

La lista completa del código del módulo del programa se encuentra en el Apéndice 1 (Listado de programas 3).

  • 1. Enumere las capacidades del componente Imagen.
  • 2. ¿De qué clase es objeto el componente Imagen?
  • 3. 3. ¿Qué tipo de archivo admite el componente Imagen de forma predeterminada?
  • 4. 4. Enumere las propiedades principales del componente Imagen.
  • 5. 5. ¿Qué propiedad almacena la imagen del componente Imagen?

Descripción de la presentación por diapositivas individuales:

1 diapositiva

Descripción de la diapositiva:

2 diapositivas

Descripción de la diapositiva:

Entorno visual Programación Delphi, al igual que Windows, admite GUI usuario (GDI – Interfaz gráfica Delphi). En Delphi, hay dos formas de mostrar información gráfica: mostrar imágenes preparadas previamente; dibujo del programa.

3 diapositivas

Descripción de la diapositiva:

El primer método se basa en el uso de los componentes Imagen y Forma. Puede utilizar una imagen ya preparada (icono) o crearla usted mismo utilizando el Editor de imágenes. La segunda forma es generar imágenes mediante programación utilizando el objeto Canvas.

4 diapositivas

Descripción de la diapositiva:

Delphi tiene a su disposición objeto especial, que tiene el estilo de propiedad de Canvas. Está disponible sólo mientras la aplicación se está ejecutando, por lo que sólo se puede controlar desde el programa escribiendo código requerido en lenguaje Objeto Pascal. Si un objeto tiene la propiedad Lienzo, puedes dibujar en su superficie. Los candidatos más adecuados para este rol son el formulario en sí y el componente especial PaintBox.

5 diapositiva

Descripción de la diapositiva:

Propiedades del objeto Canvas: Pluma: propiedad para dibujar líneas y bordes de formas geométricas. El lápiz sigue los comandos del cursor gráfico y, a su vez, tiene sus propias propiedades anidadas: Color – determina el color de la línea (negro por defecto); Modo – estilo de dibujo (tiene muchos significados que no se dan aquí); Estilo – estilo de línea, que puede tomar los siguientes valores: ðsSolid – sólido (predeterminado); рsDosh – discontinuo; psDot – punteado; рsDoshDot – línea de puntos (y otras propiedades); Ancho: grosor de la línea (predeterminado 1 píxel);

6 diapositiva

Descripción de la diapositiva:

Pincel: una propiedad para rellenar formas con las siguientes propiedades anidadas: Color: color del pincel (blanco por defecto); Estilo – patrón de pincel, que puede tomar los siguientes valores: bsClear – coloración sólida; bsHorizontal – líneas horizontales; bsVertical – líneas verticales; bsFDiagonal – líneas diagonales izquierdas; bsBDiagonal – líneas diagonales derechas; bsCross – celda; bsDiagCross – celda oblicua;

7 diapositiva

Descripción de la diapositiva:

Fuente: propiedad para mostrar texto que tiene las siguientes propiedades anidadas: Color: color del carácter; Alto: alto de la fuente en píxeles; Nombre – nombre de la fuente; Tamaño – tamaño de fuente; Estilo – estilo de fuente, que puede tomar los siguientes valores: fsBold – negrita; fsItalic – cursiva; fsUnderline – subrayado; fsStrikeOut – tachado;

8 diapositivas

Descripción de la diapositiva:

PenPos (Posición del lápiz): ​​propiedad para almacenar la posición actual del dibujo (define la posición del lápiz en el área de dibujo en este momento tiempo); Píxeles: una propiedad de matriz para escribir y leer las coordenadas de puntos individuales del área de dibujo (“lienzo”).

Diapositiva 9

Descripción de la diapositiva:

Métodos del objeto Canvas MoveTo(x,y: integer): mueve el lápiz desde la posición actual a un punto con las coordenadas x, y especificadas sin dibujar una línea; LineTo(x.y: entero): mueve el lápiz desde la posición actual a un punto con las coordenadas x, y dadas, dibujando una línea; Arco(x1, y1, x2, y2, x3, y3, x4, y4: entero): dibuja el arco de una elipse inscrita en un rectángulo con coordenadas (x1, y1) y (x2, y2). El arco está determinado por los radios de la elipse que pasa por los puntos (x3,y3) y (x4,y4);

10 diapositivas

Descripción de la diapositiva:

Chord(x1, y1, x2, y2, x3, y3, x4, y4: entero): dibuja una cuerda de una elipse según la descripción dada para el método Arc; Elipse(x1, y1, x2, y2: entero): dibuja una elipse inscrita en un rectángulo con la esquina superior izquierda en el punto (x1, y1) y la esquina inferior derecha en el punto (x2, y2); FillRect(Rect (x1, y1, x2, y2: entero)) – rellena el rectángulo con el color especificado en el Pincel actual. Utiliza la función Rect, que representa un rectángulo en las coordenadas dadas;

11 diapositiva

Descripción de la diapositiva:

FloodFill(x,y: entero; Color: TColor; FillStyle: TFillStyle) – rellenar con el color actual especificado en la propiedad Pincel: con FillStyle=fsBorder – un área cerrada desde el punto con coordenadas x, y hasta el borde definido por Color; con FillStyle=fsSurface – esa porción de la superficie que tiene el color Color; Pie(x1, y1, x2, y2, x3, y3, x4, y4: entero): dibuja un sector de una elipse inscrita en un rectángulo con coordenadas (x1, y1) y (x2, y2). El sector está definido por dos radios de elipse que pasan por los puntos (x3, y3) y (x4, y4);

12 diapositivas

Descripción de la diapositiva:

Polilínea (Puntos: matriz de TPoint): dibuja una polilínea, conectando secuencialmente los puntos de la matriz de Puntos; Polígono (Puntos: matriz de TPoint): dibuja polígonos conectando puntos secuencialmente en la matriz de Puntos. Se diferencia del método Polilínea en que conecta automáticamente el final de la polilínea con su inicio; Rectángulo (x1, y1, x2, y2: entero): dibuja un rectángulo con la esquina superior izquierda en el punto (x1, y1) y la esquina inferior derecha en el punto (x2, y2);

Diapositiva 13

Descripción de la diapositiva:

Retresh – el método se llama cuando es necesario volver a dibujar la imagen; RoundRect (x1, y1, x2, y2, x3, y3: entero): dibuja un rectángulo con esquinas redondeadas. Las esquinas se dibujan como cuartos de una elipse con un ancho de x3 y una altura de y3; TextOut (x, y:integer, Text:String): genera el texto especificado en el parámetro Texto. El texto cabe en un rectángulo cuya esquina superior izquierda tiene coordenadas x, y.




Arriba