DMarlon Studio

Lección 3 · 3 de 20

Imágenes creadas en código · tkinter

Cree imágenes en tkinter sin archivos: tk.PhotoImage, put() para pintar píxeles y zoom() para ampliarlas, en una etiqueta y en un botón.

tkinter · Imágenes creadas en código en DMarlon Studio: el código del ejemplo y la ventana que abre al ejecutarlo

tk.PhotoImage(width=8, height=8) crea una imagen vacía de 8 × 8 píxeles. Lo normal es cargarla de un archivo (file="logo.png"), pero también se puede pintar desde el código, y así este ejemplo no necesita ninguna imagen aparte.

put() pinta. Con una cadena de filas, cada una entre llaves y con un color por píxel ("{#3b5bdb #dbe4ff ...} {...}"), rellena la imagen de una vez: el tablero de ajedrez sale de (x + y) % 2. Con to=(x1, y1, x2, y2) pinta un rectángulo de un color, y con to=(x, y), un solo píxel, como la diagonal roja del icono.

zoom(16) devuelve una imagen nueva 16 veces más grande, en la que cada píxel se convierte en un cuadrado (lo contrario es subsample). Por eso el tablero de 8 × 8 se ve de 128 × 128 y el icono de 16 × 16, de 48 × 48.

Las imágenes se muestran con image=: sola en una ttk.Label, y junto al texto en un ttk.Button. compound dice dónde va la imagen respecto al texto: "left", "top", "right" o "bottom". Importante: guarde la imagen en una variable; si Python la libera, el componente se queda en blanco.

En DMarlon Studio, el componente Imagen de la paleta muestra un archivo de imagen del proyecto, ajustado como elija en el inspector, y el estudio escribe el código. Las imágenes hechas en código, como estas, sirven para iconos pequeños y dibujos que cambian.

Código · main.py

import tkinter as tkfrom tkinter import ttkroot = tk.Tk()root.title("Images made in code")root.geometry("480x300")# An empty 8x8 image: put() paints it, one "{...}" per row of pixels.dark, light = "#3b5bdb", "#dbe4ff"rows = ["{" + " ".join(dark if (x + y) % 2 else light for x in range(8)) + "}"        for y in range(8)]board = tk.PhotoImage(width=8, height=8)board.put(" ".join(rows))big_board = board.zoom(16)          # 8x8 -> 128x128: each pixel, a square# A 16x16 icon: put(color, to=(x1, y1, x2, y2)) fills a rectangle.icon = tk.PhotoImage(width=16, height=16)icon.put("#f7b84f", to=(0, 0, 16, 16))icon.put("#c07d10", to=(0, 0, 16, 3))for i in range(3, 16):              # one pixel at a time: a diagonal    icon.put("#d9534f", to=(i, i))big_icon = icon.zoom(3)             # 48x48# Show them: image= in a Label; image= and compound= in a Button.ttk.Label(root, image=big_board).pack(side="left", padx=24)side = ttk.Frame(root)side.pack(side="left")ttk.Label(side, text="zoom(3) of a 16x16 icon:").pack(anchor="w")ttk.Label(side, image=big_icon).pack(anchor="w", pady=(4, 16))ttk.Button(side, text="Save", image=icon, compound="left").pack(anchor="w")ttk.Button(side, text="Open", image=icon, compound="top").pack(anchor="w", pady=8)root.mainloop()

Para recordar

  • tk.PhotoImage(width=..., height=...) crea una imagen vacía.
  • put(color, to=...) pinta píxeles o rectángulos.
  • zoom(n) amplía y subsample(n) reduce.
  • Guarde la imagen en una variable o desaparecerá.

Ejercicio

Dibuje una cara sonriente de 16 × 16 con put (ojos y boca) y póngala, ampliada con zoom(4), en un tercer botón.