TinyPiXOS 渐变色使用指南:让你的界面更加炫酷

前言

在现代 UI 设计中，渐变色已经成为提升视觉效果的重要手段。TinyPiXOS 提供了渐变色支持，让开发者能够轻松实现各种炫酷的视觉效果。本文将带你深入了解 TinyPiXOS 中的渐变色使用方法。

渐变色类型

TinyPiXOS 支持两种主要的渐变类型:

🎨 线性渐变 (LinearGradient)

线性渐变沿着一条直线方向进行颜色过渡。它支持两种定义方式:

• 坐标方式: 通过起点和终点坐标定义渐变方向
• 角度方式: 通过角度值定义渐变方向 (0°=从下到上，90°=从左到右，180°=从上到下，270°=从右到左)

🌟 径向渐变 (RadialGradient)

径向渐变从中心点向外辐射进行颜色过渡，非常适合创建光晕、聚光灯等效果。

实战案例

案例 1: 基础线性渐变矩形

最简单的渐变应用 - 从左到右的蓝红渐变:

bool MyWidget::onPaintEvent(TpPaintEvent *event) {
    TpPainter *painter = event->painter();
    
    // 创建线性渐变 (从左到右)
    TpLinearGradient gradient(0, 0, 200, 0);
    gradient.setColorAt(0.0, _RGB(0, 0, 255));    // 起点蓝色
    gradient.setColorAt(1.0, _RGB(255, 0, 0));    // 终点红色
    
    painter->setBrush(TpBrush(&gradient));
    painter->drawRect(TpRect(10, 10, 200, 100));
    
    return true;
}

效果: 一个从左侧蓝色平滑过渡到右侧红色的矩形。

案例 2: 对角线渐变

使用角度定义创建 45° 对角线渐变:

TpLinearGradient gradient;
gradient.setAngle(45);  // 45度对角线
gradient.setColorAt(0.0, _RGB(255, 255, 0));   // 黄色
gradient.setColorAt(0.5, _RGB(255, 128, 0));   // 橙色
gradient.setColorAt(1.0, _RGB(255, 0, 0));     // 红色

painter->setBrush(TpBrush(&gradient));
painter->drawRect(TpRect(10, 10, 200, 200));

效果: 从左下到右上的黄-橙-红三色渐变。

案例 3: 径向渐变光晕

创建从中心向外辐射的光晕效果:

// 创建径向渐变 (中心点100,100, 半径80)
TpRadialGradient gradient(100, 100, 80);
gradient.setColorAt(0.0, _RGB(255, 255, 255));  // 中心白色
gradient.setColorAt(0.5, _RGB(0, 255, 255));    // 中间青色
gradient.setColorAt(1.0, _RGB(0, 0, 255));      // 边缘蓝色

painter->setBrush(TpBrush(&gradient));
painter->drawEllipse(20, 20, 160, 160);

效果: 中心白色向外逐渐过渡到青色再到蓝色的圆形光晕。

案例 4: 渐变描边线条

不仅填充可以用渐变，描边也可以:

TpLinearGradient gradient(0, 50, 200, 50);
gradient.setColorAt(0.0, _RGB(255, 0, 0));
gradient.setColorAt(1.0, _RGB(0, 0, 255));

TpPen pen;
pen.setBrush(TpBrush(&gradient));
pen.setWidth(10);
painter->setPen(pen);
painter->drawEllipse(150, 150, 120, 120);

效果: 一条从红色渐变到蓝色的圆。

案例 5: 彩虹渐变

使用多个颜色停止点创建彩虹效果:

TpLinearGradient gradient;
gradient.setAngle(180);  // 从上到下
gradient.setColorAt(0.0, _RGB(255, 0, 0));    // 红
gradient.setColorAt(0.25, _RGB(255, 255, 0)); // 黄
gradient.setColorAt(0.5, _RGB(0, 255, 0));    // 绿
gradient.setColorAt(0.75, _RGB(0, 255, 255)); // 青
gradient.setColorAt(1.0, _RGB(0, 0, 255));    // 蓝

painter->setBrush(TpBrush(&gradient));
painter->drawRect(TpRect(10, 10, 100, 300));

效果: 垂直方向的彩虹色带。

核心 API 说明

创建渐变对象

// 线性渐变 - 坐标方式
TpLinearGradient gradient(x1, y1, x2, y2);

// 线性渐变 - 角度方式
TpLinearGradient gradient;
gradient.setAngle(angle);

// 径向渐变
TpRadialGradient gradient(cx, cy, radius);

添加颜色停止点

gradient.setColorAt(position, color);
// position: 0.0-1.0 之间的位置
// color: 使用 _RGB(r, g, b) 宏定义颜色

应用渐变

// 填充渐变
painter->setBrush(TpBrush(&gradient));

// 描边渐变
TpPen pen;
pen.setBrush(TpBrush(&gradient));
painter->setPen(pen);

高级技巧

扩散模式

控制渐变区域外的填充方式:

• PadSpread: 使用最近的停止色填充 (默认)
• ReflectSpread: 镜像反射渐变
• RepeatSpread: 重复渐变图案

gradient.setSpread(TpGradient::RepeatSpread);

总结

TinyPiXOS 的渐变系统功能强大且易用，无论是简单的双色渐变还是复杂的多色彩虹效果，都能轻松实现。通过合理运用线性渐变和径向渐变，你可以为应用界面增添丰富的视觉层次感。

TinyPiXOS开发者联盟

源码级支持 + 真实项目：TinyPiXOS开发者联盟招募中​。
获取开发资料
技术手册
项目官网
B 站视频

感谢支持和关注，如果对项目感兴趣，请点赞、收藏和转发！