Sélecteur de couleur
Le sélecteur complet relié à un aperçu en direct, à la valeur hexadécimale et à une rangée d'échantillons enregistrés.
L'éditeur ci-dessus fait tourner ce projet. Changez une ligne et il se recharge.
Classes Godot utilisées
ColorPickerColorRect
Le code
scripts/main.gd
extends Node
var preview: ColorRect
var readout: Label
var swatches: HBoxContainer
func _ready() -> void:
var row: HBoxContainer = _root()
var picker: ColorPicker = ColorPicker.new()
picker.color = Color('#8da5f3')
picker.color_changed.connect(_on_color)
row.add_child(picker)
var column: VBoxContainer = VBoxContainer.new()
column.add_theme_constant_override('separation', 16)
column.size_flags_horizontal = Control.SIZE_EXPAND_FILL
row.add_child(column)
preview = ColorRect.new()
preview.color = picker.color
preview.custom_minimum_size = Vector2(0, 220)
preview.size_flags_vertical = Control.SIZE_EXPAND_FILL
column.add_child(preview)
readout = Label.new()
readout.add_theme_font_size_override('font_size', 22)
column.add_child(readout)
var keep: Button = Button.new()
keep.text = 'keep this one'
keep.pressed.connect(func(): _add_swatch(preview.color))
column.add_child(keep)
swatches = HBoxContainer.new()
swatches.add_theme_constant_override('separation', 8)
column.add_child(swatches)
_on_color(picker.color)
func _on_color(color: Color) -> void:
preview.color = color
readout.text = '#%s rgb %d %d %d' % [color.to_html(false), int(color.r * 255), int(color.g * 255), int(color.b * 255)]
func _add_swatch(color: Color) -> void:
var swatch: ColorRect = ColorRect.new()
swatch.color = color
swatch.custom_minimum_size = Vector2(44, 44)
swatches.add_child(swatch)
func _root() -> HBoxContainer:
var background: ColorRect = ColorRect.new()
background.color = Color('#12141a')
add_child(background)
background.set_anchors_and_offsets_preset(Control.PRESET_FULL_RECT)
var margin: MarginContainer = MarginContainer.new()
for side in ['margin_left', 'margin_right', 'margin_top', 'margin_bottom']:
margin.add_theme_constant_override(side, 48)
add_child(margin)
margin.set_anchors_and_offsets_preset(Control.PRESET_FULL_RECT)
var row: HBoxContainer = HBoxContainer.new()
row.add_theme_constant_override('separation', 32)
margin.add_child(row)
return row