Crear una aplicación de dibujo similar a MS Paint con Tkinter

1. INTRODUCCIÓN: Hola, me alegro de verte de vuelta. Una vez más, estoy de vuelta con un nuevo proyecto relacionado con la aplicación Kinder GY Y hoy en este proyecto, vamos a construir la app Advanced drawing Canvas. Entonces, sin perder el tiempo, permítame mostrarle la demostración de lo que hoy vamos a construir en este proyecto. Como puedes ver en tu pantalla, tenemos ventana. Ahora, en esta ventana, tenemos un lienzo. Si trato de dibujar algo, ya ves, podemos dibujarlo. Podemos dibujar cualquier forma con la mano libre, necesitamos presionar el botón del mouse y arrastrar el mouse. Si quieres cambiar el tamaño del pincel, sí, puedes. Si quieres reducirlo, solo si lo hago uno y trato de trazar una línea, puedes ver el grosor de este pincel, y si quieres aumentarlo, sí, también puedes. Si lo hago estaño y trato de trazar una línea, se puede ver. Puedes dibujar forma en mano libre, puedes cambiar el tamaño del pincel. Además si quieres cambiar el color del pincel, sí, puedes. Desde aquí, puedes cambiar el color a cualquier color. Supongamos que si pizarra verde uno, e intento dibujar la forma, se puede ver el resultado. Nuestro programa es permitirnos cambiar el color, además nos permiten dibujar mano libre. Además, si quieres dibujar línea, simplemente haz clic en el botón Línea y podrás dibujar cualquier línea con cualquier grosor. Si cambias el tamaño del pincel, se reducirá el grosor de esta línea. De la misma manera, puedes dibujar cualquier rectángulo. También puedes dibujar círculo. Además, nuestro programa te permite borrar alguna porción si seleccionas el botón de borrar, y si mueves el mouse alrededor de él, y si cambias el tamaño del pincel y mueves el mouse alrededor de él, puedes verlo eliminar las líneas de Pincel. Actúa como goma de borrar. Solo ven botón claro. Si quieres despejar la ventana de una vez, solo tienes que pulsar sobre borrar. Se despejará toda la ventana. Y por fin tenemos botón de ajuste. Entonces para dibujar algo, supongamos que dibujo una línea y quiero establecer esta imagen, entonces hay que pasar el botón set. Se abrirá una ventana Sabas, y desde aquí, se puede configurar el archivo como formato PNG, como si lo hago Entonces si hago nuestro nombre de archivo Demo dos y luego configuro el archivo, establece el archivo en esa carpeta en esa carpeta en particular, también después de establecer el archivo, envía unas masas exitosas, guardar acertadas. Con eso se muestra la ubicación del archivo guardado. Esto es lo que vamos a ser hoy en este proyecto. Es bastante avanzado el dibujo de Canvas porque tenemos controles. Tenemos controles sobre el tamaño del cepillo. Tenemos controles sobre color, mano libre, podemos dibujar líneas, podemos dibujar rectángulos, circuitos, tenemos goma de borrar para borrar También tenemos botón de lágrima para despejar todo el campo a vez y también podemos guardar la imagen del lienzo. Esto es exactamente lo que pagamos hoy en este proyecto. Sin perder el tiempo, saltemos al editor de código de visult studio 2. Creación de la composición de esta aplicación: Entonces finalmente, en los cuchillos Min son coordinadora de estudio. Al principio, necesitamos importar los módulos importantes como kinter, hoser de color, diálogo de archivo, caja de líos y módulo de almohada Entonces al principio, voy a Importar Kiner como TK. Después de eso, desde Kinter voy a ingresar archivo selector de color y cuadro de líos Así que aquí, voy a escribir desde Kinterimport, selector de color, diálogo de archivos y cuadro Después de eso, para capturar la captura de pantalla completa, desde el módulo Pillow, voy a importar captura de imágenes. Aquí voy a escribir desde PIL Import image grab. Después de importar el módulo necesario, voy a crear la ventana principal. Al principio, voy a crear un objeto usando la clase TK y nuestro nombre de objeto es root. Entonces voy a agregar un título a esta clase de empate. Él escribe, título de punto raíz, Dibujo avanzado Lienzo. Entonces voy a salvar la geometría. Voy a escribir od dot Geometría 900 por 650 pixel. Este es nuestro tamaño de ventana. A continuación, voy a establecer un color de fondo a toda nuestra ventana tipo root dot config, fondo, este color grick claro Entonces voy a ejecutar la aplicación usando Min Loop. Aquí voy a escribir root dot main loop, y voy a configurar este archivo. Aquí creamos nuestra ventana básica simple. Además, definimos la geometría, 900 650 píxeles. Después de crear la ventana principal, necesitamos configurar la interfaz de usuario. Aquí estoy tecleando una configuración de interfaz de usuario única y de comando. Y voy a definir un lienzo. Primero, voy a definir un lienzo. Aquí voy a escribir nuestro nombre variable canvas, Canvas igual a pkt Canvas y colocamos el lienzo dentro de la ventana raíz, nuestro lienzo color de fondo es blanco puro, y definimos con 850 y altura 500 Entonces utilizo este estilo de borde elevado de borde y uso borde con dos píxeles. Entonces tenemos que empacar este lienzo. Aquí voy a escribir método Canvas dot PAC de las Ss y YxS aquí asignamos diez pixel tying Después de eso, en este Canvas, voy a asignar algunos eventos de enlace del mouse como botón un botón un movimiento, liberación de botón, etcétera Aquí, voy a escribir un solo comando en eventos de enlace y primero mu tipo Canvas método de enlace de punto Canvas, bind. Entonces dentro de los buses redondos, aquí, dentro de los códigos dobles, voy a escribir nuestro efecto de encuadernación rápida Botón uno, y va a activar una función, y nuestro nombre de función es start, underscoe, draw, start, draw Y como saben, aquí no definimos la función, por lo que necesitamos crear la función. Entonces aquí, estoy tecleando una sola y funciones de comando, y arriba en eso aquí voy a definir la función start draw, algún tipo DF y nuestro nombre de función es start, underscoe Y como saben, es una función basada en eventos, así que voy a pasar el eVetF ahora dentro de esta función, aquí, voy a escribir pass. Eso es. A continuación, voy a usar otra encuadernación de ratón. Así t, Lona punto bind. Esta vez nuestra etiqueta de evento es B one motion. Como saben, se refiere al evento del mouse que se activa cuando el usuario mueve el mouse mientras mantiene presionado el botón de elevación. Quiero decir el botón uno. Si hago clic en el botón uno y empiezo a mover mi cursar dentro del área del lienzo, va a dibujar de acuerdo a la posición del mouse Ya sabes que el botón uno significa clic tardío. Nuevamente, necesitamos definir ese dibujo de función en nuestra sección de funciones. Entonces aquí, voy a probar Dave nuestro nombre de función es dibujar. Además, es una función basada en eventos, algún tipo de evento. Entonces dentro de la función por ahora tipo Imo, pasar. Eso es. Nuestra siguiente acción es para liberación de botones, Así tipo, Canvas dot bind, botón soltar uno. Encuadernación de punto de lona, botón de liberación uno. Es malo si solto mi garrapata de vuelta en nuestra lona, entonces va a dejar de dibujar. Así que tenemos que definir la función de stop draw. Entonces copio el nombre de la función, y nuevamente, soy tipo. Dave, el nombre de nuestra función es stop draw. Es un evento basado en funciones para pasar evento. Y aquí, voy a escribir pass dentro de él, y voy a configurar este archivo. Estas son las principales e importantes encuadernaciones de ratón que necesitamos para trazar la línea de lo contrario, cualquier forma en nuestro lienzo. Ahora, vamos a configurar el archivo y ejecutar el código en nuestro terminal y ver cómo se veía. Por ahora, se ve así. Tenemos un área de lienzo donde vamos a dibujar nuestras formas o líneas, lo que sea. Entonces tenemos un espacio. En ese espacio, voy a poner todos los botones necesarios, como botón de pantalón de color, botón mano de tarifa, rectángulo de línea, círculo, cursor, borrador de círculo, claro, y botón de guardar Con eso, necesitamos un conjunto de deslizadores para seleccionar el tamaño del pincel. Básicamente, vamos a crear primero una herramienta wor. Para eso, voy a tomar un marco para la torre. Volvamos al abrigo y aquí, voy a definir un marco. Aquí voy a definir el marco Tolar. Entonces primero, voy a crear la barra de herramientas de herramientas igual al método de marco de punto de barra de herramientas. Dicho igual a t punto clase de marco y colocamos el marco dentro de la ventana raíz. Dijimos color de fondo, este color de fondo exactamente al fondo de la ventana. Entonces tenemos que empacar esta barra de herramientas. Entonces aquí, voy a escribir el método polar dot pack, llenamos esta barra de herramientas en XX y agregamos algo de relleno en xs. Entonces uno por uno, voy a crear botones para esta barra de herramientas, que voy a poner dentro de esta barra de herramientas. Voy a escribir el single y comando y aquí, voy a escribir el botón T dt, clase botón TK, y dentro de los vestidos redondos, voy a colocar el botón dentro de la barra de herramientas. Barra de herramientas, y por ahora, voy a decirlo botón texto, texto, igual a nuestro primer texto es para elegir el color. Entonces aquí, voy a escribir. Entonces este botón es para el color. Entonces aquí, voy a atar color con este icono. Y por ahora, no voy a usar la palabra clave command porque vamos a hacer eso cuando paso a paso, voy a crear estas funciones. Entonces por ahora, no voy a usar el parámetro command. Entonces coma, voy a poner el fondo. G, fondo, y voy a decir fondo dentro de los códigos Dule. Este color. Este color azul claro. Entonces voy a decir por tierra para FG, tipo FGF cuatro tierra, voy a usar blanco Entonces en lugar del doble código estoy tipo color blanco. Después de esa coma, la siguiente opción voy a usar W. voy a definir con botón con, luego luego voy a empacar este botón Entonces aquí voy a escribir punto PAC Método. Empaca dentro de la desnudez. Primero, voy a definir el sitio lateral. Voy a colocarlo en lado izquierdo izquierdo, y voy a agregar algo de relleno en X xs, eso es todo. Voy a establecer este archivo. Aquí creo un solo botón. la misma manera, necesitamos crear múltiples botones para la opción de barra de herramientas múltiples. Entonces voy a duplicar esta sección y nuestro siguiente botón es para estilo de mano libre. Aquí voy a cambiar el texto del botón y el logo y lo voy a poner a mano alzada Entonces voy a cambiar el color de fondo de este botón. Entonces voy a cambiar el color de fondo aquí voy a reemplazar el color con este código de color, este color grisáceo, y no necesito este primer plano, así que voy a quitar la misma manera, agrego otro botón para línea para dibujar la línea. Si selecciono este botón, nos va a permitir trazar línea recta. Y si seleccionamos mano libre, entonces nos va a permitir dibujar cualquier cosa. Podemos trazar línea recta curva lo que sea. Después creo otro botón para rectángulo. Nos va a permitir dibujar forma de rectángulo. Después de eso, creo otro botón para círculo. A continuación, se crea un botón para borrador. Si seleccionamos ese botón, entonces somos capaces de eliminar cualquier cosa que dibujemos en nuestro lienzo. Después de eso, creo otro botón para auto. Si presiono ese botón, va a limpiar toda el área del lienzo. En una sola camarilla. Para configurar el archivo de dibujo, voy a crear el último botón para Guardar. Aquí defino otro botón para guardar con el icono Guardar. Aquí definimos total ocho botón para color para mano libre, para línea, para rectángulo, para círculo para borrador, rasgar y guardar y alineamos todo el botón en el lado izquierdo Como puedes ver cuando empaco este botón, definimos el lado igual a APT. Va a alinear el botón al lado izquierdo de la barra de herramientas. Ahora, fijemos el archivo y ejecutemos el código en nuestra terminal. Después de configurar este archivo, si ejecuto este código en nuestro terminal, ahora puedes notar que tenemos los botones. Tenemos botón de color, tenemos botón de mano libre, línea, rectángulo, círculo, goma de borrar, muelles Entonces después de eso, necesitamos crear un control deslizante. Necesitamos crear un control deslizante para establecer el tamaño de latón. Podemos definir el tamaño del pincel. Si quieres un cepillo grueso, entonces puedes deslizar hacia arriba el deslizador y establecer tu propio tamaño de latón. Pero no voy a hacer eso en este tutorial. Ya se ha vuelto demasiado largo, así que voy a hacerlo en el siguiente tutorial. Muchas gracias. Estén atentos para nuestro próximo tutorial. 3. Agregar el deslizador de tamaño del pincel en la parte inferior: Hola, chicos. Me alegro de verte de vuelta. Esta es la segunda parte de este tutorial, y en esa sección, vamos a crear un slider, y voy a agregar el slider abajo de esta ventana. Vamos a crear ese deslizador para definir el tamaño del latón. Entonces primero, voy a escribir un sencillo en comando, escala de talla de sujetador. Y para crear este slider, vamos a tomar un frame. Entonces aquí, voy a escribir size frame igual a T dot frame class, y lo colocamos en una ventana raíz y el color dground es gris claro Después de eso, después de eso, voy a empacar este marco de tamaño. A continuación, voy a tomar una etiqueta, y voy a definir el texto. Stick it out label, y coloco esta etiqueta dentro este marco y nuestro texto de etiqueta es de tamaño latón. Ahora, definamos el control deslizante después de eso. Aquí voy a escribir, pincel, subrayado, deslizador. Deslizador de pincel igual a la clase de escala de puntos T. Entonces dentro de los bruss redondos voy a pasar el marco de tamaño Al principio, voy a poner este deslizador en el frame size size frame, luego apo coma en nuestro parámetro firme a partir de subrayado, voy a configurarlo uno Voy a iniciarlo desde uno. Y luego voy a ampliar hasta dos parámetros, voy a configurarlo 20. A continuación, necesitamos definir la orientación y quiero deslizador horizontal. Además, voy a definir la longitud de este deslizador, tipo longitud 200. Por ahora, no voy a poner el comando porque uno por uno, voy a definir esa función más adelante. En esa sección, solo trato de enfocarme en el diseño de UI. Después de eso, voy a establecer un valor a nuestro control deslizante y nuestro valor predeterminado es tres. Escribo latón slider dot set y dentro de las rondas dentro del método set, paso tres valor. Entonces nuestro tamaño predeterminado de Pincel es tres. Después golpeamos para empacar el control deslizante. Así que aquí están tus slider dot Pack método y lo presiono en el lado de profundidad. También, defino algunos emparejamientos en Xxs diez píxeles. Y voy a poner este archivo. Para configurar este archivo, enumere el código en ningún terminal y vea cómo se ve nuestro diseño de interfaz de usuario. Entonces, para ejecutar este código sin terminal, ahora puedes ver así es como se ven nuestros botones, nuestro marco y nuestro deslizador. Ahora voy a definir algunas variables globales, y todas estas son variables globales importantes. Entonces en la parte superior, antes de las funciones, antes de la sección de funciones, aquí, voy a definir algunas variables globales. Escribo un solo comando variables globales. Al principio, voy a definir el color rosa predeterminado, y lo voy a poner en negro. Tipo color rosa, igual al negro. Después de eso, voy a definir el tamaño del latón. Entonces tipo, tamaño de latón igual a tres. Tamaño de latón define y ancho de trazo, y por defecto, quiero seleccionar la herramienta actual a mano alzada Así podemos dibujar cualquier forma usando nuestro ratón. Entonces, para escribir la melodía actual igual a mano libre. Después de eso, voy a definir otras dos variables a la vez, X xs e Y xs. Quiero decir empezar huevos y empezar Y. Así que decir que inicia huevos y empieza Y igual a monja y ninguno Dije tanto el Valuun porque porque esta variable va a recordar donde nuestro ratón fue elogiado A continuación, voy a definir otra variable global, que es la revisión de formas. Revisión de forma igual a ninguna. Esta variable almacenó temporalmente la forma de vista previa mientras se arrastraba Mientras arrastramos nuestro cursor en nuestro marco, entonces va a recordar pero la forma temporalmente. Esto es para este tutorial. En el siguiente tutorial, vamos a trabajar en las funciones. Gracias por ver este video, mantente atento para nuestro próximo tutorial. 4. Construir la función para dibujar: Me alegro de verlos de vuelta, chicos. Esta es otra parte de este tutorial, y en esa sección, vamos a centrarnos en las funciones, la función básica que nos permite dibujar en nuestro lienzo. Como pueden ver aquí aplico algún método bind en nuestro lienzo, como el botón uno, luego el botón uno movimiento, y el botón suelte uno. Al principio, necesitamos trabajar en este método, iniciar, dibujar. Llamó a la función. Llamé cuando se pulsa el botón del ratón sobre el lienzo. Entonces, si hago clic en este lienzo, va a ejecutar una función, y nuestro nombre de función es start draw. También va a registrar las coordenadas iniciales para el dibujo. Entonces en esta función, primero, voy a usar la palabra clave global Global, y voy a hacer estas dos variables globales, iniciar a y comenzar Y. Por defecto, dije el Voluun y aquí voy a hacerla variable global A continuación, necesitamos asignar el valor exacto de posición del cursor que obtenemos del método bind. Quiero decir, evento y evento Y. Así que aquí están type, start X coma, start Y, start Y igual a su type event X y event Y. Usando la palabra clave global, sobrescribimos el valor de la variable con el evento XNOY X y el valor del evento Pero antes de comenzar a trabajar en la función de dibujo, la función de dibujar, necesito trabajar en la herramienta set, selector de color, y cambiar la función brushiz Al principio, voy a trabajar en la función set tool. Por defecto, como pueden ver, aquí utilizo herramienta actual, mano libre, pero necesitamos crear una función que nos va a permitir apretar entre cualquier herramienta como mano libre, rectángulo, círculo, goma de borrar, lo que sea Entonces aquí voy a definir otra función y voy a dar propina a Dave set tool. Luego dentro de esta función, voy a resplandor la variable de herramienta actual, herramienta actual, y luego digo herramienta actual igual a herramienta. Entonces, sea cual sea el valor que pasemos en esa función, se va a establecer como herramienta actual. Supongamos, Supongamos botones en nuestros botones, quiero configurar estos botones aquí llamo SetolFunction, y configuro la herramienta de acuerdo con el Para lágrima, quiero establecer para goma de borrar, quiero poner borrador etcétera. Entonces según el botón, setol función va a configurar las herramientas Ahora voy a llamar a la función settle en nuestros botones. Entonces saltemos al botón. Y para la mano libre, como para el botón de mano libre, quiero llamar a mano libre. Aquí usa la función Lambda one liner. Como sabes para llamar a esta función en ese botón, necesitamos usar el parámetro de comando. Después de definir el texto aquí voy a usar el comando Hemlotype Comando, comando igual a dos, y voy a usar una función lineal Lambda porque necesitamos establecer argumento con esa función. Por eso voy a usar la función Lambda. Algún tipo Lambda y quiero llamar set tool function, set tool. Éste. Entonces dentro de las vidas dentro de los códigos dobles, voy a escribir mano libre. Copia texto a mano libre, y voy a pegarlo aquí. Y voy a hacer lo mismo por la lima. Aquí copio el comando y lo pego aquí, entonces voy a sustituir la mano libre por lima. Entonces hago lo mismo por el rectángulo, también para el circulo y para el borrador En nuestros cinco botones, línea de mano libre, rectángulo, círculo y borrador, utilizamos la función set tool lo que pase en esa función, va a configurarla herramienta actual. Como sabes, por defecto, nuestra herramienta actual es a mano alzada Entonces si el usuario presiona este botón, el botón de línea, entonces va a establecer la línea de valor carental Ahora, vamos a trabajar en el evento del sorteo. Como saben, esta función se llama cada vez que el ratón mueve mientras el botón lebed se mantiene presionado. Porque en nuestro evento, usamos B one motion, y como ustedes saben, nuestro incluso nos da información sobre la posición actual de nuestro mouse, como y YxS de nuestro cursor Ahora, dentro de esta función, necesitamos hacer globales nuestras variables importantes, como inicio X, inicio Y y vista previa de forma. Hacemos que esta variable sea global. Y ahora voy a establecer siguiente voy a establecer condición I en esta función en esta función de dibujo. Aquí, voy a escribir I herramienta actual en mano libre y borrar significa si alguna de las condiciones es verdadera, entonces dentro de esta condición IP, por defecto, como ustedes saben, seleccionamos a mano alzada y necesitamos hacer esta letra minúscula, libre y también línea en letra pequeña, De lo contrario, va a tirar flecha porque para otros argumentos, usamos letra minúscula. Por eso utilizo letra minúscula para estas dos variables. Si nuestro Carintulin mano libre de lo contrario borrador, entonces dentro de esta condición primero, voy a Color, color, voy a establecer color blanco. Dentro de las canchas de la puerta, dije el color. Ahora podrías tener porción. ¿Por qué uso el color blanco? Porque ya dije color predeterminado negro, entonces ¿por qué uso el blanco? Como pueden ver, aquí veo una condición si nuestra herramienta actual en mano libre de lo contrario borrador Si es una goma de borrar, entonces necesitamos quitar la línea Tenemos que quitar nuestro dibujo. Para eso, necesitamos pintura de color blanco porque nuestro color de fondo de lienzo es blanco, color borrador sumergido con Por eso dije el color blanco y con eso, si herramienta actual igual a igual a borrador, si herramienta actual igual a igual a borrador, dolor Esto aunque va a definir I herramienta actual es goma de borrar, luego usar color blanco, Ls usar color dolor Como saben, por defecto decimos el pin de color negro. Por defecto, va a dibujar las formas en color negro. A continuación, necesitamos usar Canvas dot CreateineFunction Entonces en la siguiente línea voy a escribir, Canvas, Canvas punto crear línea, subrayado línea Crear línea es el método invald de la introducción. Luego dentro de la ress redonda primero, necesitamos definir la posición x de inicio. Entonces necesitamos definir la posición Y de inicio, luego toma de evento y posición de evento y. Aquí un empate, iniciar X, iniciar X, luego iniciar Y, iniciar Y. Después de eso, necesitamos pasar las tomas de evento y el evento Y. Punto del evento X, y las coordenadas del evento Y. Coordenadas Y del punto del evento. Nuestro primer valor dos es para X uno e Y una posición, y nuestro segundo valor dos es para X dos e Y dos posiciones. Posición de nuestro cursor. Después de eso, voy a decir el color de relleno, algún tipo, se siente igual a coloreado. Entonces voy a decir, con del pincel, algún tipo, ancho, y aquí voy a usar el valor del tamaño del pincel, pincel, tamaño, este. Y como saben, por defecto, establecemos el tamaño de pincel tres. Después de eso, coma, necesitamos establecer el estilo de gorra. Algún tipo estilo gorra, punto T redondo. Ahora la pregunta es ¿por qué uso el estilo de gorra para redondear? Porque hace que el final de la línea sea suave y redondo. También, voy a hacer suave igual a verdad. Nos va a permitir trazar líneas suaves. Va a permitir hacer que la línea de bordillo sea más suave. Ahora, cada vez que movemos el ratón, una línea, una pequeña línea conectamos la posición anterior y nueva del ratón. Visualmente, formando un trazo continuo. Después de eso, también necesitamos actualizar las coordenadas. Es así que no empiezo X e inicio Y igual al evento X y evento Y. ¿Por qué necesitamos actualizarlo? Porque aquí actualizamos la posición anterior para el siguiente segmento. La siguiente línea continúa sin problemas, y voy a configurar este archivo. Ahora, después de configurar este archivo, si ejecuto este código en mi terminal, aquí puedes ver nuestra área de canvas. No voy a seleccionar ningún botón porque si selecciono algún botón, si presiono algún botón, va a cambiar la condición. Entonces la mano libre se convierte en otra cosa, como línea, rectángulo, por lo demás circulo No voy a presionar ningún botón. Voy a empezar a dibujar en nuestra área de lienzo. Si presiono mi mouse en esta área del lienzo y empiezo a dibujar, puedes ver las líneas. Dibujamos con éxito las líneas. También un para soltar mi mouse, dejó de dibujar. Como saben, por defecto, establecemos pin color negro. Pero si presiono el botón del borrador, voy a presionar el botón del borrador Ahora se establece pin de color blanco. Entonces si trato de quitar esta línea, así que si arrastre el mouse sobre ella, ya se puede ver la línea ahora dibuja con color blanco. Por eso nuestras líneas se sumergen con el color de fondo. Ahora nos da un efecto de borrar porque nuestro color de fondo es el blanco Por ahora, esto es para este tutorial. En la siguiente parte de este tutorial, aprenderíamos cómo podemos cambiar el color del dolor. Además, vamos a aprender cómo podemos activar nuestro botón de carro para car la imagen. Gracias por ver este video Stune para nuestro próximo tutorial 5. Trabajar en la función de color de la pintura y el deslizador de tamaño del pincel: Hola, y bienvenidos de nuevo a otra conferencia sobre este proyecto. Hoy en esta conferencia, vamos a trabajar en la función de color, y vamos a aprender cómo podemos cambiar el color de nuestro lápiz. También, vamos a aprender cómo podemos cambiar el tamaño del latón. Vamos a trabajar en dos funciones totales, función color de manguera y función de cambio de tamaño de latón. Entonces agreguemos un comando a este botón. Entonces aquí, en nuestro botón de color, voy a agregar un comando, y nuestro nombre de comando es elegir color. Y como saben, no definimos esta función en nuestra sección de funciones. Entonces voy a copiar el nombre de la función elegir color, y voy a crear esa función. Entonces después de configurar la herramienta, voy a crear esa función en esa sección. Entonces escribe Dave y nuestro nombre de función es elegir color. Voy a poner los rogresses. Entonces dentro de la función, por ahora, voy a escribir pass. Además, voy a definir otra función para cambiar el tamaño del sujetador de dip Dave nuestro nombre de función es cambiar el tamaño de latón, y dentro de los bruss redondos voy a pasar una variable para esa válvula Dentro de la función por ahora, voy a escribir pass. Ahora, necesitamos mandar esa función en nuestra habilidad. Copia el nombre de la función y aquí, aquí, comando, igual a tipo, comando igual a cambiar tamaño latón. Yo llamo a esa función. Voy a establecer este archivo. Ahora primero, voy a trabajar en función de color elegí la función de color. Volvamos a la función de color elegido. En esa función, vamos a abrir un diálogo de selección de color, y va a permitir al usuario elegir un color de dibujo. Básicamente, vamos a cambiar el color de la pintura con la ayuda del cuadro de diálogo selector de color Entonces primero, voy a primero, voy a la variable global, global y voy a variable de color del dolor global porque vamos a usar eso. Por defecto, como sabes, nuestro color pin es negro. Entonces voy a establecer el color. Color, color equival a aquí voy a abrir un cuadro de diálogo de color elegido, subtipo color elegido, punto, preguntar Pregunta color. Entonces dentro de la ronda dice, voy a poner el título de este cuadro de diálogo. Título, y voy a usar exactamente el mismo título que nuestros programas sussist Título igual a elegir dolor coloreado. Entonces voy a decir una condición de IP. Si coloreo si color dentro del cuadrado base uno, entonces dentro de esta condición p, luego dentro de esta condición, voy a decir el color del dolor. Entonces voy a decir color pin, dolor, color, igual al color, igual al color dentro del cuadrado resis, uno. Ahora la pregunta es ¿qué básicamente hice aquí? Primero, globalizamos este color de pin variable, luego abrimos un cuadro de diálogo selector de color Entonces veo condición. Si el color dentro de la base cuadrada, utilizo uno. Yo uso el índice número uno. Si usas índice número cero, entonces va a representar color RGB si usas índice número uno, entonces va a representar color hexa V. Como puedes ver, aquí abro un selector de color inbuild de Kiner y está escrito un tupel en ese tupel tenemos ese tupel Un color RGB y color hexa Vallow y aquí yo es el valor de color hexa Si elijo valor de color hexa, entonces quiero guardar el mismo valor de color hexa que nuestro color rosa. Esto es lo que hago aquí. Ahora vamos a configurar el archivo y ejecutar este código en mi terminal. Pero antes de establecer este código, creo que cometí un error aquí porque es mostrarme alguna advertencia. Sí, creo, olvidé proporcionar un CBA entre estos dos parámetros. Este es nuestro problema. Después de configurar este archivo, si vuelvo a mi sección de funciones elegí color y configuré este archivo nuevamente y ejecuto este código en mi terminal, este archivo nuevamente y ejecuto este código en mi terminal, ahora si dibujo una línea, como pueden ver, por defecto, nuestro color pin es negro. Ahora bien, si hago clic en este botón de color, abre un cuadro de diálogo selector de color, y a partir de ahí, quiero seleccionar color verde, y presiono Bien. Ahora si dibujo una línea, como pueden notar, ahora es dibujar la línea con color verde. Si cambio el color, si me vuelvo en rojo y el en este archivo y trato de dibujar esta línea, se puede ver el resultado. Ahora somos capaces de trazar líneas en diferentes colores. A continuación, vamos a trabajar en esta función. Vamos a definir el tamaño del latón. Por defecto, dijimos latón talla tres, pero quiero aumentar el tamaño del pincel, lo contrario disminuir el tamaño de los sujetadores. Volvamos al código. Voy a matar esa terminal y volver al código y voy a empezar a trabajar en esta función, cambiar el tamaño de latón. Como se puede ver cómo definimos una función que toma un único argumento válvula. Y en esa función, necesitamos actualizar el tamaño del pincel cada vez que se mueve el deslizador. Y como saben, a nuestro mando, llamamos a esa función. Cada vez que nuestro deslizador se mueve, interatomic envía automáticamente el valor del deslizador a la variable val No necesitamos hacer nada por eso. Entonces tenemos este deslizador. Ahora, según el valor del slider, vamos a construir la función. Entonces, al principio, necesitamos mover el PASQR y necesitamos hacer que nuestro tamaño de pincel sea global Algún tipo global y tamaño de latón. A continuación, voy a establecer el tamaño del pincel, tamaño de latón igual a, voy a ejecutar int function, int, int, y dentro de los bruss run voy a pasar la variable val, el argumento Val Val, eso es todo. Y voy a poner este archivo. Después de establecer este archivo, si ejecuto este código en mi terminal y y vuelvo al lienzo y dibuje una línea con color negro. Ahora quiero aumentar el tamaño del trazo de latón. Voy a aumentar el slider, voy a hacer seis. Ahora, si dibujo una línea, ahora puedes notar el trazo de línea. Yo mucho más grueso que el anterior. Ahora, si lo hago diez, ahora es más grueso que eso. la misma manera, si reduzco el valor, si lo hago uno, sólo uno y luego trazo una línea, se puede notar el resultado. Ahora es mucho más grueso que el tamaño di cuatro porque ahora nuestro trazo de pincel es uno. la misma manera, si lo aumento a los niveles altos 20 y luego trazo una línea, se puede ver el resultado. Entonces así es como podemos cambiar el tamaño del trazo del pincel y el color del pincel. Entonces esto es para este tutorial. En la siguiente parte de este tutorial, vamos a aprender cómo podemos dibujar un rectángulo de línea recta y un círculo. Y en la última parte de este tutorial, vamos a aprender cómo podemos despejar el área del lienzo. También, vamos a aprender cómo podemos guardar nuestro dibujo con la ayuda de decir botón. Entonces gracias estamos viendo este video estado para el próximo capítulo. 6. Trabajar sobre la función para dibujar diferentes formas geométricas: Hola, chicos. Es bueno verte de vuelta. Esta es la otra parte de este tutorial, y en este tutorial, vamos a trabajar en formas como círculo, rectángulo, línea, etcétera Como puedes ver en nuestros botones, aquí utilizo la función Lambda, una función lineal y establecemos la variable line, rectángulo y circle. Siempre que presionamos ese botón, el botón particular, como la línea, luego va a resbalar la línea, y va a pasar en la variable de línea de función sectorial Ahora bien, de acuerdo a las variables como rectángulo de línea, lo contrario círculo, necesitamos dibujar las formas. Para eso, tenemos que ir y saltar a la función draw. Y aquí tenemos que decir la condición LC. Déjame mostrarte cómo la herramienta de cuidado de IA en línea, rectángulo, de lo contrario círculo, luego dentro la condición de elipse aquí, voy a establecer otra condición Tipo I shape preview, shape, preview, luego dentro de la condición IP, voy a establecer, Canvas dot delete Canvas dot, dtm, delete, y quiero borrar la vista previa de la forma Vista previa de forma. Al principio, se va a verificar, si el usuario selecciona una herramienta de forma entre rectángulo de línea y círculo, entonces en ese caso, va a eliminar la forma de vista previa anterior. En nuestra condición IP, aquí dije me forma revisión luego dentro de esta condición P, eliminamos la forma de vista previa anterior. Entonces voy a establecer otra condición IP si la herramienta actual es igual a igual a línea, luego dentro de esta condición IP, aquí, voy a escribir shape review ahora shape review convertido Canvas dot create line function, así que vamos a crear una línea. Aquí, primero definimos el punto de partida, inicio X e inicio Y, luego definimos la posición actual del mouse. Eventos y evento Y. Después de eso, usamos el color del dolor, el color del pin actual que pizarra aquí definimos la línea con tamaño exacto de latón. Entonces L actual dos igual a igual a rectángulo, luego dentro del bloque LC, aquí, necesitamos atar revisión de forma. Ahora la revisión de forma se convierte en punto de lienzo , crea rectángulo, crea la función de rectángulo, y necesitamos definir la posición inicial del rectángulo, también en para definir la posición final del rectángulo. Luego para el contorno, usamos el color del dolor y para el ancho del rectángulo y para el ancho del trazo del rectángulo, usamos el tamaño de latón. Y tenemos que hacer lo mismo por el círculo. C, herramienta actual igual a igual a círculo, luego dentro de la condición EIP Vista previa de forma igual a Canvas dot create Oval. Usando Canvas create Oval, podemos crear circuitos. Aquí definimos la posición inicial y la posición final de nuestro contorno ovalado es de color pin para el trazo, usamos la talla exacta del sujetador. Aquí creamos este perro para la forma. Se va a mostrar la vista previa mientras arrastramos. Ahora, vamos a configurar el archivo y ejecutar este código en mi terminal y ver si funciona correctamente o no. Entonces para ejecutar este código en mi terminal, voy a seleccionar la línea la línea dos. Después de seleccionar la línea, si trato de dibujar una línea desde este punto hasta este punto, sí, dibuja la línea, pero no hay problema. Cuando suelte el ratón y trato de dibujar otra línea, se quita la primera línea. También es cielo para rectángulo también. Déjame mostrarte. Si trato de dibujar un rectángulo y éste dibuja el rectángulo con éxito, pero cuando suelto el ratón y trato de dibujar otro rectángulo, se quita el anterior. Como hace lo mismo por este circulo. Si dibujo otra forma, elimina la anterior. Básicamente, da la revisión de forma en tiempo real, pero no establece la forma de forma permanente. Ese es el problema. Para resolver ese problema, necesitamos trabajar, tenemos que trabajar en esta función. Déjeme mostrar. Detente, dibuja. Ya creamos la función. Es una función eved t. Entonces, cuando liberemos nuestros autos cuando soltemos nuestro derecho, va a dejar de dibujar y y finalizar la forma del dibujo Aquí en esta función, voy a quitar el Puskword y voy a global forma vista previa de forma tipo variable vista previa de forma global Ahí voy a decir en condición p. Si la herramienta actual EP herramienta actual dentro de la línea de redondeos, rectángulo y círculo, luego dentro de esta condición IP , luego dentro de esta condición IP, quiero escribir, voy a llamar a un método, dibujar , dibujar dentro de las rondas paso el evento Evento voy a finalizar la forma. Entonces dar forma, revisar, dar forma, revisar, convertirse en ninguno. Eso es. Voy a poner estos cinco. La función de dibujo strop se llama cuando el usuario suelta el botón del mouse y sus joves finalizan la forma, la línea rectangular y la forma línea rectangular y Como sabrás cuando arrastramos el ratón, mostramos una forma de vista previa Pero la forma de vista previa no es la forma final y la forma de vista previa se elimina en cada momento. Esta función finalmente va a dar forma. Al principio, en esta función, accedemos a la revisión de forma usando variable global. Por lo que almacena el ID en la forma de vista previa visual actual. Tenemos que reafirmar, de lo contrario quitarlo después del dibujo la forma final Entonces usamos condición IP si toolin actual mentira rectan y círculo Solo finalizamos formas cuando el usuario está usando shape Recuerda, mano libre y borrador no necesitan ninguna Sus vidas ya están dibujadas permanentemente durante el arrastre. Entonces dentro de él, llamamos a la función draw. Como saben, en esa función, fijamos permanentemente la sombra. Entonces otra vez, restablecemos la variable de vista previa. Forma PV igual a ninguno. Ahora, después de establecer este archivo, si ejecuto este código en mi terminal y trato de dibujar un rectángulo, déjame mostrarte dónde dibujo un rectángulo y voy a dibujar otro rectángulo. Ahora puedes notar que no cavas nuestro previo previo. Ahora guarda permanentemente la sombra. Aquí aquí dibujo algunos círculos y ahora voy a trazar una línea. Ahora bien, si cambio el tamaño del pincel y según el tamaño del pincel, va a dibujar el trazo de línea. Similar para este circui. Ahora puedes notar ahora nuestro trazo circular es más grueso que el anterior y lo mismo para el rectángulo. En la siguiente parte de este tutorial, vamos a trabajar en Pier y guardar. Cómo podemos cuidar esta ventana después de presionar este botón. Además, vamos a aprender cómo podemos configurar la imagen de forma permanente usando el botón Guardar. Gracias por ver este video estén atentos para nuestro próximo tutorio 7. Trabajar en el botón guardar y borrar: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con otro capítulo , proyecto Relateo, y en esa sección, vamos a aprender cómo podemos despejar nuestra ventana después de dibujar algo en nuestra ventana, y vamos a aprender cómo podemos guardar nuestro dibujo con la ayuda del botón de guardar Después de dibujar algo en nuestro lienzo, si presionamos el botón de borrar, quiero despejar esa ventana. Empecemos y veamos cómo podemos hacerlo. Así que estoy de vuelta a mi código aquí, voy a definir otra función, y nuestro nombre de función es ear Canvas, algún tipo D ear Canvas dentro de la función. Aquí, voy a escribir Canvas dot, delete all method. Método de eliminación de puntos de lienzo, eliminar. Dentro de la redondez y dentro los códigos dobles, voy a pasar todos Esta función borra completamente todo lo dibujado en el lienzo Kinker Básicamente todo es una etiqueta especial en Canvas, y cuando usamos fecha, quitó todos los elementos del lienzo, como línea, forma, imágenes, texto, cualquier cosa dibujada o agregar a nuestro lienzo. Entonces voy a conducir un comentario de una sola línea. Esta función, esta función se usa para dibujos de engranajes, y voy a configurar este archivo y ejecutar este código en mi terminal. Después de ejecutar este código en mi terminal, si dibujo algo en mi lienzo y presiono el botón de lágrima, no está funcionando. Ahora después de definir esa función, necesitamos llamar a esa función. Tenemos que llamar a esa función a este botón de oído en particular. Este es nuestro botón de oreja y después del texto aquí, voy a definir para definir el parámetro command, command igual a peer función Canvas. Y voy a volver a poner este archivo. Después de establecer este archivo, si ejecuto este código en mi terminal y dibujo algo en nuestro lienzo, como línea, rectángulo, círculo, mano libre, lo que sea. Entonces si presiono el botón Borrar, como pueden ver, se despejó el área del lienzo. En una patada se aclara todo. Entonces nuestro botón funciona bien. Abrupto que necesitamos trabajar en el botón de set. Sea lo que sea que dibujemos en esa zona, tenemos que ponerla como pino. Volvamos al código y comencemos a codificar. Entonces aquí voy a definir una nueva función. Aquí voy a escribir Dave y nuestro nombre de función es sap Canvas. Entonces dentro de esta función, quiero usar try and accept block. Prueba Prueba dentro del triblog. Dentro del triblog necesitamos conseguir la posición en la lona Primero, necesitamos obtener la posición de Canvas en la pantalla. Quiero decir la posición exacta del lienzo. Al principio, necesitamos extraer los iniciales y los YxS iniciales Entonces necesitamos extraer las Xs finales y las YxS finales. Nuestro punto X inicial es X igual a ventana de punto raíz info subrayado raíz X, concatenar con Canvas dot win info x Luego dentro de este bloque seco, primero, necesitamos extraer la posición de nuestro lienzo y la posición Y de nuestro lienzo. Luego dentro de este bloque seco, primero, necesitamos extraer la posición de nuestro lienzo y la posición Y de nuestro lienzo Después de eso, necesitamos extraer el ancho de este lienzo y la altura de este lienzo. Para extraer la posición de este lienzo, voy a definir una variable llamada X. X equival a M type, root, dot Win info root x. redondo, ahora que hace Win info root x? Devuelve la posición X de la ventana Kinted en la pantalla. Entonces quiero concatenar con, después voy a concatenar con Canvas, Canvas dot, Ventana en cuatro, ganar info X. Ahora ¿qué devuelve? Es la posición del lienzo dentro la ventana y agregar el valor le da la posición real del lienzo en la pantalla. De la misma manera, necesitamos extraer la posición Y. La siguiente línea tipo Y igual a root, root dot window info, root Y, y agrego con Canvas window info Y. ¿ Va a proporcionar la posición real de nuestro lienzo en YxS Entonces después de eso, después de eso, necesitamos calcular la coordenada X lateral. Quiero decir maleza de lona. Entonces aquí X uno, voy a definir una variable llamada X igual a X hace canvas dot info Con función. Esta función devuelve el ancho de este lienzo. Y si concateno con la posición, nos va a dar el ancho real de esta área de lienzo Quiero decir agregándolo con X, p la coordenada X inferior derecha. Supongamos que este es nuestro lienzo, y aquí necesitamos tomar esta captura de pantalla de lienzo. Nuestro lienzo parte de este punto, este actual este punto y su final en ese punto. Entonces primero, necesitamos la posición de Xs y C de este punto y luego necesitamos posición de Xs y C de ese punto. X uno representa la posición de ese punto. la misma manera, necesitamos extraer la posición Y de ese punto. Para eso, teclearía Y uno igual a Y más Canvas dot info, ganaría info underscore height Esta función proporcionará la altura del lienzo. Si agregamos con YxS entonces va a devolver la posición del lienzo abajo a la derecha coordenada Y Ahora teníamos las coordenadas y necesitamos establecer esa imagen. Para eso, ruta de archivo, ruta de archivo, archivo, underscoePAT, ruta de archivo igual a, y aquí voy a abrir un cuadro de diálogo de archivo Algún tipo de diálogo de archivo, cuadro de diálogo de archivo punto. Pedir guardar nombre de archivo. Pedir guardar nombre de archivo. Y voy a proporcionar la extensión por defecto. Algún tipo extensión predeterminada, y quiero guardar el archivo en archivo PNG. Formato PNG, punto PNG. Después de eso, coma, después de coma, necesitamos proporcionar los tipos de archivo, tipos de archivo iguales a dentro del cuadrado ss y para definir los tipos de archivo Dentro de las rotondas, básicamente, quiero mostrar solo los archivos PNG, typ archivos PNG Entonces una coma, luego una coma, necesitamos definir de nuevo la extensión Podría ser cualquier nombre antes de que comience algún tipo estrella que PNG. Es decir, si hay otro archivo PNG en esa carpeta, va a mostrar todos los archivos PNG de esta carpeta. Básicamente, esta variable va a preguntar al usuario dónde guardar la imagen. En primer lugar, pide al usuario la presentación. Luego asegúrese de que la extensión predeterminada sea PNG. Después de eso, después de eso, va a filtrar los archivos y mostrar solo las imágenes PNG en esa ventana. A continuación, dentro de este tri bloque, voy a poner condición. Aquí voy a dar propina ruta de archivo yo ruta de archivo, luego dentro de esta condición IP, grab image, image grab, image grab dot, grab method. Agarra. Si hay un nombre de archivo entonces dentro de esta condición IP, voy a tomar una imagen del Canvas. Yo uso el método de captura de imágenes, luego dentro de las rondas luego las llaves redondas, luego ater ese punto, método de recorte, grab dot crop aquí necesitamos pasar la X y inicio y el punto final de nuestra pantalla De donde queremos tomar captura de pantalla. Dentro del bajo dice X, Y, X uno, X uno coma Y uno, Y uno Quiero guardar ese tipo de archivo dot save y es la ruta del archivo de rondas, ruta de archivo. Voy a establecer este archivo. Si no hay ruta de archivo, va a tomar esta captura de pantalla. Entonces va a tomar esta captura de pantalla y establecerla en esa ruta de archivo en particular. Después de eso, quiero mostrar mensaje de éxito. Entonces escribe este mensaje de éxito. Las bolas de mensaje muestran información, se configuran con éxito, y dentro de la cadena F, voy a pasar Canvas Seb como esta ruta de archivo en particular Entonces excepción excepción de salida como E, y quiero mostrar un mensaje de error. Cuadro de mensaje punto mostrar error cuadro de mensaje punto mostrar error Seb error Cadena qual a los líos de error exactos. Entonces si hay un error para configurar este archivo, va a mostrar un mensaje de error en ese cuadro de mensaje, este error pies. Y voy a poner este archivo. Ahora después de establecer este archivo, dejó ejecutar el código en nuestra terminal. Voy a establecer este archivo. Después de establecer este archivo, voy a llamar a esa función lona de función segura en ese botón en particular. Entonces escribe comando. Entonces este es nuestro botón set, Heyman, comando igual a nuestro nombre de función, set Canvas Voy a poner en este archivo una coma. Después de establecer este archivo, si ejecuto este código en nuestro terminal y trato de dibujar cualquier cosa, si cambio el color, si lo hago un poco rojo, y luego dibujo otra línea si dibujo algún círculo, rectángulo, línea, otra vez, mano libre, luego presione el botón de guardar. Como pueden ver abre un cuadro de diálogo de archivo y quiero establecer ese archivo en la carpeta de documentos. Éste. Como puedes ver, por defecto, guarda como tipos archivo PNG y quiero nombrarlo Demo uno, Demo uno, Demo subrayado uno, demo uno punto png Si hago clic en el botón Sap y después de establecer ese archivo, aquí se puede ver un mensaje exitoso Sf conjunto Canvas acertado como en esa ubicación, Demo uno. Ahora bien, si abro la carpeta, déjame mostrarte así que si abro esa carpeta, aquí puedes notar la imagen. Ellos subrayan uno. Esta es la imagen PNG que creamos a partir de este lienzo. Espero que ahora el concepto sea claro para ti, cómo podemos dibujar a mano libre, cómo podemos dibujar líneas, cómo podemos dibujar rectángulos, círculos, cómo podemos eliminar usando goma de borrar, cómo podemos cambiar el color de nuestra pintura Podría ser de cualquier color, cómo podemos despejar esa ventana y cómo podemos configurar ese archivo, y también aprendemos cómo podemos cambiar el tamaño del latón. Este proyecto es un proyecto muy bueno para entender el concepto de aplicación de dibujo. Espero que ahora te quede claro, gracias por ver este video estad atentos para nuestro próximo proyecto.