SSkinShape 形状皮肤¶

概述¶

SSkinShape 是 SOUI 中用于绘制各种基本几何形状的皮肤类型。它支持矩形、圆形、椭圆、圆环等基本形状，并且可以使用纯色填充、位图填充或渐变填充。通过描边属性可以为形状添加边框，通过圆角属性可以创建圆角效果。

类定义¶

class SOUI_EXP SSkinShape : public SSkinObjBase
{
protected:
    enum Shape {
        rectangle,  // 矩形
        oval,       // 椭圆/圆形
        ring        // 圆环
    };

    Shape m_shape;                    // 形状类型
    SAutoRefPtr<SShapeSolid> m_solid;     // 纯色填充
    SAutoRefPtr<SShapeBitmap> m_bitmap;   // 位图填充
    SAutoRefPtr<SGradientBrush> m_gradient; // 渐变填充
    SAutoRefPtr<SStroke> m_stroke;        // 描边
    SAutoRefPtr<SCornerSize> m_cornerSize; // 圆角大小
    SAutoRefPtr<SRatioCornerSize> m_ratioCornerSize; // 比率圆角大小
    SAutoRefPtr<SShapeRing> m_ringParam;  // 圆环参数
};

属性列表¶

基本属性¶

属性名	类型	默认值	说明
name	string	-	皮肤名
scale	float	-	比例
alpha	int	-	alpha
enableColorize	bool	-	enableColorize（是:1
shape	string	rectangle	形状类型（rectangle、oval、ring）

子元素属性¶

solid 纯色填充¶

属性名	类型	默认值	说明
color	color	-	填充颜色

bitmap 位图填充¶

属性名	类型	默认值	说明
src	image	-	位图资源
tileX	string	repeat	X轴平铺模式（clamp、repeat、mirror）
tileY	string	repeat	Y轴平铺模式（clamp、repeat、mirror）

gradient 渐变填充¶

属性名	类型	默认值	说明
type	string	linear	渐变类型（linear、radial、sweep）
angle	float	-	线性渐变角度
centerX	float	0.5	径向/扫描渐变中心X坐标比率
centerY	float	0.5	径向/扫描渐变中心Y坐标比率
radius	layoutsize	-	径向渐变半径
ratio_radius	float	-	径向渐变半径比率
fullArc	bool	-	扫描渐变是否为完整圆弧

stroke 描边¶

属性名	类型	默认值	说明
width	layoutsize	-	描边宽度
color	color	-	描边颜色
style	string	solid	线条样式（solid、dash、dashDot、dashDotDot）
endStyle	string	flat	线条端点样式（flat、round、square）
joinStyle	string	round	连接点样式（round、bevel、miter）

corners 圆角¶

属性名	类型	默认值	说明
radius	layoutsize	-	圆角半径（可同时设置X和Y）
radiusX	layoutsize	-	X轴圆角半径
radiusY	layoutsize	-	Y轴圆角半径

ratio_corners 比率圆角¶

属性名	类型	默认值	说明
radius	float	-	圆角半径比率（可同时设置X和Y）
radiusX	float	-	X轴圆角半径比率
radiusY	float	-	Y轴圆角半径比率

ring 圆环参数¶

属性名	类型	默认值	说明
startAngle	float	0.0	起始角度
sweepAngle	float	360.0	扫描角度

XML示例¶

矩形形状¶

<!-- 纯色填充矩形 -->
<shape name="solid_rect" shape="rectangle">
    <solid color="#2196F3"/>
    <stroke width="2dp" color="#1976D2"/>
    <corners radius="5dp"/>
</shape>

<!-- 渐变填充矩形 -->
<shape name="gradient_rect" shape="rectangle">
    <gradient type="linear" angle="45" 
              startColor="#2196F3" endColor="#64B5F6"/>
    <corners radiusX="10dp" radiusY="5dp"/>
</shape>

椭圆形状¶

<!-- 纯色圆形 -->
<shape name="solid_circle" shape="oval">
    <solid color="#FF5722"/>
</shape>

<!-- 径向渐变椭圆 -->
<shape name="radial_oval" shape="oval">
    <gradient type="radial" centerX="0.5" centerY="0.5"
              startColor="#4CAF50" centerColor="#8BC34A" endColor="#CDDC39"/>
</shape>

圆环形状¶

<!-- 圆环 -->
<shape name="ring_shape" shape="ring">
    <solid color="#9C27B0"/>
    <stroke width="4dp" color="#E1BEE7"/>
    <ring startAngle="0" sweepAngle="270"/>
</shape>

位图填充形状¶

<!-- 位图填充矩形 -->
<shape name="bitmap_rect" shape="rectangle">
    <bitmap src="img:texture" tileX="repeat" tileY="repeat"/>
    <stroke width="1dp" color="#BDBDBD"/>
</shape>

复杂组合示例¶

<!-- 复杂组合形状 -->
<shape name="complex_shape" shape="rectangle">
    <gradient type="sweep" centerX="0.5" centerY="0.5"
              startColor="#FFEB3B" centerColor="#FF9800" endColor="#F44336"/>
    <stroke width="3dp" color="#3F51B5" style="dash"/>
    <corners radius="15dp"/>
</shape>

使用场景¶

1. 基础图形¶

矩形、圆形、椭圆
圆角矩形
扇形、弧形

2. 渐变效果¶

线性渐变背景
径向渐变背景
扫描渐变效果

3. 装饰元素¶

图标背景
按钮形状
状态指示器

4. 特殊效果¶

圆形头像
进度环
加载动画

最佳实践¶

形状选择：根据需要选择合适的形状类型，rectangle适合常规矩形界面元素，oval适合圆形/椭圆形元素，ring适合进度环等环形元素
填充方式：根据视觉需求选择合适的填充方式，纯色适合简洁设计，渐变适合现代设计，位图适合纹理效果
描边使用：合理使用描边增强形状的视觉边界，注意描边宽度与整体设计的协调性
圆角设计：使用圆角创建更友好的界面效果，可通过具体数值或比率方式设置

常见问题¶

Q: 形状显示不完整怎么办？¶

A: 确保控件尺寸足够显示完整形状，检查描边宽度是否影响了可视区域。

Q: 渐变效果不符合预期怎么办？¶

A: 检查gradient子元素的type、angle、centerX、centerY等属性设置，确保渐变参数符合设计要求。

Q: 如何实现动态颜色变化？¶

A: 设置enableColorize为1，然后通过代码动态设置颜色参数。