ColorPicker

Hereda: VBoxContainer < BoxContainer < Container < Control < CanvasItem < Node < Object

Un widget que proporciona una interfaz para seleccionar o modificar un color.

Descripción

Un widget que proporciona una interfaz para seleccionar o modificar un color. Opcionalmente, puede proporcionar funcionalidades como un muestreador de color (cuentagotas), modos de color y preajustes.

Nota: Este control es el widget selector de color en sí mismo. Puedes usar un ColorPickerButton en su lugar si necesitas un botón que muestre un ColorPicker en un popup.

Tutoriales

Demo de Interpolación de Tweens

Propiedades

bool	can_add_swatches	`true`
Color	color	`Color(1, 1, 1, 1)`
ColorModeType	color_mode	`0`
bool	color_modes_visible	`true`
bool	deferred_mode	`false`
bool	edit_alpha	`true`
bool	edit_intensity	`true`
bool	hex_visible	`true`
PickerShapeType	picker_shape	`0`
bool	presets_visible	`true`
bool	sampler_visible	`true`
bool	sliders_visible	`true`

Métodos

void	add_preset(color: Color)
void	add_recent_preset(color: Color)
void	erase_preset(color: Color)
void	erase_recent_preset(color: Color)
PackedColorArray	get_presets() const
PackedColorArray	get_recent_presets() const

Propiedades del Tema

Color	focused_not_editing_cursor_color	`Color(1, 1, 1, 0.275)`
int	center_slider_grabbers	`1`
int	h_width	`30`
int	label_width	`10`
int	margin	`4`
int	sv_height	`256`
int	sv_width	`256`
Texture2D	add_preset
Texture2D	bar_arrow
Texture2D	color_hue
Texture2D	color_script
Texture2D	expanded_arrow
Texture2D	folded_arrow
Texture2D	menu_option
Texture2D	overbright_indicator
Texture2D	picker_cursor
Texture2D	picker_cursor_bg
Texture2D	sample_bg
Texture2D	sample_revert
Texture2D	screen_picker
Texture2D	shape_circle
Texture2D	shape_rect
Texture2D	shape_rect_wheel
StyleBox	picker_focus_circle
StyleBox	picker_focus_rectangle
StyleBox	sample_focus

Señales

color_changed(color: Color) 🔗

Emitida cuando se cambia el color.

preset_added(color: Color) 🔗

Emitida cuando se añade un preajuste.

preset_removed(color: Color) 🔗

Emitida cuando se elimina un preajuste.

Enumeraciones

enum ColorModeType: 🔗

ColorModeType MODE_RGB = 0

Permite editar el color con deslizadores de Rojo/Verde/Azul en el espacio de color sRGB.

ColorModeType MODE_HSV = 1

Permite editar el color con los deslizadores de Tono/Saturación/Valor.

ColorModeType MODE_RAW = 2

Obsoleto: This is replaced by MODE_LINEAR.

ColorModeType MODE_LINEAR = 2

Permite editar el color con los deslizadores de Rojo/Verde/Azul en el espacio de color lineal.

ColorModeType MODE_OKHSL = 3

Permite editar el color con los deslizadores de Tono/Saturación/Luminosidad.

OKHSL es un nuevo espacio de color similar a HSL pero que se ajusta mejor a la percepción aprovechando el espacio de color Oklab, que está diseñado para ser simple de usar, al tiempo que hace un buen trabajo prediciendo la luminosidad, el croma y el tono percibidos.

Espacios de color Okhsv y Okhsl

enum PickerShapeType: 🔗

PickerShapeType SHAPE_HSV_RECTANGLE = 0

Espacio de color rectangular del modelo de color HSV.

PickerShapeType SHAPE_HSV_WHEEL = 1

Espacio de color rectangular del modelo de color HSV con una rueda.

PickerShapeType SHAPE_VHS_CIRCLE = 2

Espacio de color circular del modelo de color HSV. Utiliza la Saturación como radio.

PickerShapeType SHAPE_OKHSL_CIRCLE = 3

Espacio de color circular del modelo de color HSL OK.

PickerShapeType SHAPE_NONE = 4

La forma del espacio de color y el botón de selección de forma están ocultos. No se puede seleccionar desde el popup de formas.

PickerShapeType SHAPE_OK_HS_RECTANGLE = 5

Rectángulo del modelo de color OKHSL con luminosidad constante.

PickerShapeType SHAPE_OK_HL_RECTANGLE = 6

Rectángulo del modelo de color OKHSL con saturación constante.

Descripciones de Propiedades

bool can_add_swatches = true 🔗

void set_can_add_swatches(value: bool)
bool are_swatches_enabled()

Si es true, es posible añadir preajustes bajo Muestras. Si false, el botón para añadir preajustes está desactivado.

Color color = Color(1, 1, 1, 1) 🔗

void set_pick_color(value: Color)
Color get_pick_color()

El color actualmente seleccionado.

ColorModeType color_mode = 0 🔗

void set_color_mode(value: ColorModeType)
ColorModeType get_color_mode()

El modo del color seleccionado actualmente.

bool color_modes_visible = true 🔗

void set_modes_visible(value: bool)
bool are_modes_visible()

Si es true, los botones del modo de color son visibles.

bool deferred_mode = false 🔗

void set_deferred_mode(value: bool)
bool is_deferred_mode()

Si es true, el color se aplicará sólo después de que el usuario suelte el botón del ratón, de lo contrario se aplicará inmediatamente incluso en el evento de movimiento del ratón (lo que puede causar problemas de rendimiento).

bool edit_alpha = true 🔗

void set_edit_alpha(value: bool)
bool is_editing_alpha()

Si es true, muestra un deslizador de canal alfa (opacidad).

bool edit_intensity = true 🔗

void set_edit_intensity(value: bool)
bool is_editing_intensity()

Si es true, muestra un deslizador de intensidad. La intensidad se aplica de la siguiente manera: multiplica el color por 2 ** intensity en espacio RGB lineal, y luego lo convierte de nuevo a sRGB.

bool hex_visible = true 🔗

void set_hex_visible(value: bool)
bool is_hex_visible()

Si es true, el campo de entrada del código de color hexadecimal es visible.

PickerShapeType picker_shape = 0 🔗

void set_picker_shape(value: PickerShapeType)
PickerShapeType get_picker_shape()

La forma de la vista del espacio de color.

bool presets_visible = true 🔗

void set_presets_visible(value: bool)
bool are_presets_visible()

Si es true, los preajustes de Muestras y Colores Recientes son visibles.

bool sampler_visible = true 🔗

void set_sampler_visible(value: bool)
bool is_sampler_visible()

Si es true, el selector de color y la vista previa del color son visibles.

bool sliders_visible = true 🔗

void set_sliders_visible(value: bool)
bool are_sliders_visible()

Si es true, los deslizadores de color estarán visibles.

Descripciones de Métodos

void add_preset(color: Color) 🔗

Añade el color dado a una lista de preajustes de color. Los preajustes se muestran en el selector de color y el usuario podrá seleccionarlos.

Nota: La lista de preajustes es solo para este selector de color.

void add_recent_preset(color: Color) 🔗

Añade el color dado a una lista de preajustes de color recientes para que pueda ser seleccionado más adelante. Los preajustes recientes son los colores que se han seleccionado recientemente, un nuevo preajuste se crea y se añade automáticamente a los preajustes recientes cuando seleccionas un nuevo color.

Nota: La lista de preajustes recientes es solo para este selector de color.

void erase_preset(color: Color) 🔗

Elimina el color dado de la lista de colores predefinidos de este selector de colores.

void erase_recent_preset(color: Color) 🔗

Elimina el color dado de la lista de preajustes de color recientes de este selector de color.

PackedColorArray get_presets() const 🔗

Devuelve la lista de colores en los preajustes del selector de colores.

PackedColorArray get_recent_presets() const 🔗

Devuelve la lista de colores en los preajustes recientes del selector de color.

Descripciones de las propiedades del tema

Color focused_not_editing_cursor_color = Color(1, 1, 1, 0.275) 🔗

Color del rectángulo o círculo dibujado cuando una parte de la forma del selector está enfocada pero no se puede editar mediante el teclado o el mando. Se muestra sobre la forma del selector, por lo que se debe utilizar un color parcialmente transparente para garantizar que la forma del selector siga siendo visible.

int center_slider_grabbers = 1 🔗

Anula la propiedad de tema Slider.center_grabber de los deslizadores.

int h_width = 30 🔗

El ancho del deslizador de selección de tonos.

int label_width = 10 🔗

El ancho mínimo de las etiquetas de color junto a los deslizadores.

int margin = 4 🔗

El margen alrededor del ColorPicker.

int sv_height = 256 🔗

La altura del cuadro de selección del valor de la saturación.

int sv_width = 256 🔗

El ancho de la caja de selección del valor de saturación.

Texture2D add_preset 🔗

El icono del botón "Añadir Preajuste".

Texture2D bar_arrow 🔗

La textura para el agarrador de flecha.

Texture2D color_hue 🔗

Textura personalizada para el deslizador de selección de tonos de la derecha.

Texture2D color_script 🔗

El icono para el botón que cambia el texto del color a hexadecimal.

Texture2D expanded_arrow 🔗

El icono para el menú desplegable de preajustes de color cuando está expandido.

Texture2D folded_arrow 🔗

El icono para el menú desplegable de preajustes de color cuando está plegado.

El icono para el menú de opciones de preajustes de color.

Texture2D overbright_indicator 🔗

El indicador utilizado para señalar que el valor del color está fuera del rango de 0-1.

Texture2D picker_cursor 🔗

La imagen que se muestra sobre la caja/círculo de color (dependiendo de picker_shape), marcando el color actualmente seleccionado.

Texture2D picker_cursor_bg 🔗

La imagen de relleno que se muestra detrás del cursor del selector.

Texture2D sample_bg 🔗

Panel de fondo para la caja de vista previa del color (visible cuando el color es translúcido).

Texture2D sample_revert 🔗

El icono para el botón de revertir (visible en el medio del color "antiguo" cuando difiere del color seleccionado actualmente). Este icono se modula con un color oscuro si el color "antiguo" es lo suficientemente brillante, por lo que el icono debe ser brillante para garantizar la visibilidad en ambos escenarios.

Texture2D screen_picker 🔗

El icono del botón del selector de color de la pantalla.

Texture2D shape_circle 🔗

El icono para formas de selector circulares.

Texture2D shape_rect 🔗

El icono para formas de selector rectangulares.

Texture2D shape_rect_wheel 🔗

El icono para formas de selector de rueda rectangular.

StyleBox picker_focus_circle 🔗

El StyleBox usado cuando la parte con forma de círculo del selector está enfocada. Se muestra sobre la forma del selector, por lo que se debe usar un StyleBox parcialmente transparente para asegurar que la forma del selector permanezca visible. Un StyleBox que representa un contorno o un subrayado funciona bien para este propósito. Para deshabilitar el efecto visual de enfoque, asigna un recurso StyleBoxEmpty. Nota que deshabilitar el efecto visual de enfoque dañará la usabilidad de la navegación con teclado/mando, por lo que esto no se recomienda por razones de accesibilidad.

StyleBox picker_focus_rectangle 🔗

El StyleBox usado cuando la parte con forma de rectángulo del selector está enfocada. Se muestra sobre la forma del selector, por lo que se debe usar un StyleBox parcialmente transparente para asegurar que la forma del selector permanezca visible. Un StyleBox que representa un contorno o un subrayado funciona bien para este propósito. Para deshabilitar el efecto visual de enfoque, asigna un recurso StyleBoxEmpty. Nota que deshabilitar el efecto visual de enfoque dañará la usabilidad de la navegación con teclado/mando, por lo que esto no se recomienda por razones de accesibilidad.

StyleBox sample_focus 🔗

El StyleBox usado para la parte de muestra del color anterior cuando está enfocada. Se muestra sobre la muestra, por lo que se debe usar un StyleBox parcialmente transparente para asegurar que la forma del selector permanezca visible. Un StyleBox que representa un contorno o un subrayado funciona bien para este propósito. Para deshabilitar el efecto visual de enfoque, asigna un recurso StyleBoxEmpty. Nota que deshabilitar el efecto visual de enfoque dañará la usabilidad de la navegación con teclado/mando, por lo que esto no se recomienda por razones de accesibilidad.