颜色选择器（colorpicker）

Y++ / YStudio 开发文档 · 一点滴

选择器： colorpicker · 设计器组件： 颜色选择器 · 按名称： colorpicker#名称 或 #名称
支持库： 组件类库 → 颜色选择器类 · 补全类名： 颜色选择器类（简拼 ysxzq / ysxzql）

硬约束与叠画

控件名来自窗口 XML「名称」；属性赋值无括号（如 标题 = "确定"），方法调用必须带括号（如 刷新()）。
事件写 函数控件名.事件名(参数…)，形参类型以本页事件表为准。
任意控件客户区叠画用支持库绘制类：绘制类 g → g.绑组件(本控件名)（组件名无引号）。画布场景编辑见画布控件。
字体对象见绘制文档中的字体类；置字体(字体类) 将字体应用到本控件。
不要虚构未列出的方法；YSS 键见下文与 YSS.md。

属性

设计器属性面板与代码侧可读可写属性（来源：组件类库）。

属性	类型	读写	说明
`提示`	文本	读写	鼠标悬停时的提示文字
`鼠标指针`	文本	读写	空=默认；可用 arrow/hand/ibeam/cross/wait/no/sizeall 等预设，或.cur/.ani 路径（如资源/press.cur）
`左边`	小数	读写	相对窗体左边的位置（像素）
`顶边`	小数	读写	相对窗体顶边的位置（像素）
`宽度`	小数	读写	控件宽度（像素）
`高度`	小数	读写	控件高度（像素）
`停靠`	整数	读写	0无 1上 2下 3左 4右 5填充；菜单/工具/状态栏仍用专用吸附
`可见`	逻辑	读写	真=显示，假=隐藏
`启用`	逻辑	读写	真=可用，假=禁用
`句柄`	长整数	只读	组件逻辑句柄（1 起，供动画类等绑定；非 HWND）；只读
`当前颜色`	文本	读写	规范存 #RRGGBB 或 #AARRGGBB；空=未选
`颜色`	文本	读写	同「当前颜色」
`占位`	文本	读写	无颜色时显示
`含透明通道`	逻辑	读写	真=输出/编辑 #AARRGGBB
`实时预览`	逻辑	读写	真=拖动取色时即时写回并触发颜色改变（取消面板会还原）
`圆角`	整数	读写	像素，0=直角
`显示边框`	逻辑	读写	真=显示边框
`边框大小`	整数	读写	像素
`边框颜色`	文本	读写	如 #RRGGBB
`文字色`	文本	读写	如 #RRGGBB
`背景色`	文本	读写	如 #1E1E1E

方法

组件类库方法（调用必须带括号）。下表为带类型签名。

方法	签名	返回	说明
`置颜色`	`无置颜色(文本颜色)`	无	`#RRGGBB` / `#AARRGGBB`
`取颜色`	`文本取颜色()`	文本	空=未选
`清空`	`无清空()`	无
`打开面板`	`无打开面板()`	无
`关闭面板`	`无关闭面板()`	无
`面板是否打开`	`逻辑面板是否打开()`	逻辑
`取红` / `取绿` / `取蓝` / `取透明`	`整数取红()` 等	整数	`0`–`255`；未选=0
`取颜色整数`	`整数取颜色整数()`	整数	ARGB
`置颜色整数`	`无置颜色整数(整数 ARGB)`	无	如 `0xFF007ACC`
`置颜色分量`	`无置颜色分量(整数红, 整数绿, 整数蓝, [整数透明=-1])`	无	透明省略保持当前 Alpha
`移动`	`无移动(小数左边, 小数顶边, [小数宽度], [小数高度])`	无	可选同时改宽高
`置焦点`	`无置焦点()`	无
`刷新`	`无刷新()`	无	立即重绘所在窗口
`显示` / `隐藏`	`无显示()` / `无隐藏()`	无	等同 `可见 = 真/假`
`置字体`	`逻辑置字体(字体类字体)`	逻辑	见 painter.md

颜色选择器1.置颜色("#007ACC")
输出(颜色选择器1.取红())

系统「选择颜色对话框」返回的整数用 置颜色_eEx 承接（不要交给 置颜色整数，那是 ARGB）：

整数 色 = 选择颜色对话框()
如果 (色 != -1) {
    颜色选择器1.置颜色_eEx(色)
}

其它控件的 背景色 用 颜色值_到文本：

按钮1.背景色 = 颜色值_到文本(色)

对照：对话框。

事件

在代码中写 函数控件名.事件名(...) 处理。

事件	参数	说明
`单击`	整数 X, 整数 Y	鼠标左键单击控件。
`双击`	整数 X, 整数 Y	鼠标左键双击控件。
`右键单击`	整数 X, 整数 Y	鼠标右键单击控件。
`鼠标按下`	整数 X, 整数 Y, 逻辑按下	鼠标键在控件上按下。按下=真表示当前仍按住。
`鼠标抬起`	整数 X, 整数 Y, 逻辑按下	鼠标键在控件上放开。
`鼠标移动`	整数 X, 整数 Y, 逻辑按下	鼠标在控件上移动。按下表示左键是否按住。
`鼠标进入`	整数 X, 整数 Y	鼠标指针进入控件区域。
`鼠标离开`	整数 X, 整数 Y	鼠标指针离开控件区域。
`鼠标左键单击`	整数 X, 整数 Y	鼠标左键单击（与「单击」同时触发）。
`鼠标左键双击`	整数 X, 整数 Y	鼠标左键双击（与「双击」同时触发）。
`鼠标中间单击`	整数 X, 整数 Y	鼠标中键单击控件。
`鼠标齿轮滚动`	整数 X, 整数 Y, 逻辑向上	在控件上滚动鼠标滚轮。向上=真表示向上滚。
`鼠标右键单击`	整数 X, 整数 Y	鼠标右键单击（与「右键单击」同时触发）。
`鼠标右键双击`	整数 X, 整数 Y	鼠标右键双击控件。
`颜色将改变`	文本当前文本	颜色即将写入时触发；事件内调用取消() 可拦截。参数：文本颜色。
`颜色改变`	文本当前文本	当前颜色发生变化时触发（选色、拖动实时预览或置颜色）。参数：文本颜色（#RRGGBB 或 #AARRGGBB）。
`即将打开面板`	无	取色弹层即将展开时触发。
`面板打开`	无	取色弹层已展开后触发。
`即将关闭面板`	无	取色弹层即将收起时触发。
`面板关闭`	无	取色弹层已收起后触发。

函数 颜色选择器1.单击 (整数 X, 整数 Y) {
    // …
}

YSS 样式

以下为样式表（.yss）键与示例；写样式前请先读窗体 XML 取控件 名称 与 typeId，见 window-xml.md。

布局与子选择器

形态为紧凑输入框：左侧色块预览 + 中间十六进制文本 + 右侧箭头；点击展开取色弹层。颜色值统一为 #RRGGBB；开启「含透明通道」时为 #AARRGGBB。默认颜色 #007ACC。

弹层内可点击 Hex 文本直接编辑（# + 十六进制；Enter 应用、Esc 取消编辑）。开启「实时预览」时，拖动 SV/色相/透明或提交 Hex 会即时写回并触发「颜色改变」；点「取消」或点外关闭会还原打开面板前的颜色。

属性说明（逐键）

伪状态： :hover · :focus · :disabled

易混： color = 外壳前景字色；value / current-color = 当前选中色（色块 + Hex）。二者分列，勿混用。

外壳与字体

属性	作用	取值 / 范围	说明与注意
`color`	输入区文字（外壳前景）	颜色，如 `#E0E0E0`	不是当前选中色
`background-color` / `background`	输入区底色	颜色
`border-color` / `border-width` / `border-radius` / `show-border`	外框描边	同按钮
`font-size` / `font-family` / `font-bold` / `font-italic`	字体	如 `"Consolas"`
`drop-down-button-background-color`	右侧箭头钮背景	颜色	别名 `arrow-background-color`
`drop-down-button-hover-background-color`	箭头钮悬停背景	颜色	别名 `arrow-hover-background-color`
`drop-down-arrow-color`	箭头三角形色	颜色	别名 `arrow-color`；亦可 `colorpicker:drop-down { color }`

选中色 · 占位 · 行为

属性	作用	取值 / 范围	说明与注意
`value` / `current-color`	当前选中色	`#RRGGBB` 或 `#AARRGGBB`	默认 `#007ACC`；写色块与 Hex
`placeholder`	无值占位	如 `"请选择颜色"`
`placeholder-color`	占位字色	颜色
`show-alpha` / `alpha`	含透明通道	`true`→`#AARRGGBB`；`false`→`#RRGGBB`
`live-preview` / `realtime` / `live`	实时预览	`true`/`false`	真=拖动即时写回并触发「颜色改变」；点取消/点外关闭可还原打开前颜色

伪态

属性	作用	说明与注意
`hover-background-color` / `hover-color`	悬停底/字	亦可 `:hover { … }`
`focus-border-color` / `focus-background-color` / `focus-glow-color`	焦点边框/底/光晕	亦可 `:focus { … }`
`disabled-color` / `disabled-background-color`	禁用字/底

使用示例

主题色选择器：

colorpicker#颜色选择器1 {
    color: #E0E0E0;
    background-color: #2D2D30;
    border-color: #5A5A5A;
    border-radius: 4;
    show-border: true;
    font-size: 13;
    current-color: #007ACC;
    placeholder: "请选择颜色";
    show-alpha: false;
    live-preview: true;
    drop-down-button-background-color: #3A3A40;
    drop-down-button-hover-background-color: #4A4A50;
    drop-down-arrow-color: #CCCCCC;
}

含透明通道：

colorpicker#半透明 {
    value: #80FF5722;
    show-alpha: true;
    live-preview: true;
}

完整示例

colorpicker#颜色选择器1 {
    color: #E0E0E0;
    background-color: #2D2D30;
    border-color: #5A5A5A;
    border-width: 1;
    border-radius: 4;
    show-border: true;
    font-size: 13;
    current-color: #007ACC;
    placeholder: "请选择颜色";
    placeholder-color: #888888;
    show-alpha: false;
    live-preview: true;
}

colorpicker#颜色选择器1:focus {
    focus-border-color: #007ACC;
    focus-glow-color: #007ACC;
}

colorpicker#半透明 {
    value: #80FF5722;
    show-alpha: true;
    live-preview: true;
}