目录
在SkiaSharp中，颜色是通过SKColor结构体来表示的。它支持RGB（红、绿、蓝）和ARGB（透明度、红、绿、蓝）两种主要的颜色表示方式。本文将详细介绍如何在SkiaSharp中设置和使用颜色。
基础颜色创建
使用RGB值创建颜色
C#// 创建纯红色
SKColor red = new SKColor(255, 0, 0); // R=255, G=0, B=0
// 创建纯绿色
SKColor green = new SKColor(0, 255, 0); // R=0, G=255, B=0
// 创建纯蓝色
SKColor blue = new SKColor(0, 0, 255); // R=0, G=0, B=255
// 创建白色
SKColor white = new SKColor(255, 255, 255); // R=255, G=255, B=255
// 创建黑色
SKColor black = new SKColor(0, 0, 0); // R=0, G=0, B=0
使用ARGB值创建颜色
C#using SkiaSharp;
using SkiaSharp.Views.Desktop;
namespace AppSKColor
{
public partial class Form1 : Form
{
private SKGLControl skControl;
public Form1()
{
InitializeComponent();
// 创建 SKGLControl 控件
skControl = new SKGLControl();
skControl.Dock = DockStyle.Fill;
skControl.PaintSurface += SkControl_PaintSurface;
this.Controls.Add(skControl);
}
private void SkControl_PaintSurface(object sender, SKPaintGLSurfaceEventArgs e)
{
// 获取画布
SKCanvas canvas = e.Surface.Canvas;
// 清空画布为白色背景
canvas.Clear(SKColors.White);
// 创建三种不同透明度的颜色
SKColor transparentRed = new SKColor(128, 255, 0, 0); // 半透明红色
SKColor fullyTransparentGreen = new SKColor(0, 0, 255, 0); // 完全透明绿色
SKColor opaqueBlue = new SKColor(255, 0, 0, 255); // 完全不透明蓝色
// 绘制三个重叠的圆形来演示颜色效果
using (var paint = new SKPaint
{
IsAntialias = true,
Style = SKPaintStyle.Fill
})
{
// 绘制半透明红色圆形
paint.Color = transparentRed;
canvas.DrawCircle(200, 200, 100, paint);
// 绘制完全透明绿色圆形（实际上看不见）
paint.Color = fullyTransparentGreen;
canvas.DrawCircle(300, 200, 100, paint);
// 绘制不透明蓝色圆形
paint.Color = opaqueBlue;
canvas.DrawCircle(250, 300, 100, paint);
// 演示描边效果
paint.Style = SKPaintStyle.Stroke;
paint.StrokeWidth = 20;
paint.Color = SKColors.Purple;
canvas.DrawRect(100, 100, 300, 300, paint);
}
}
}
}
使用预定义颜色
SkiaSharp提供了SKColors静态类，其中包含了大量预定义的颜色：
C#// 使用预定义颜色
SKColor red = SKColors.Red;
SKColor green = SKColors.Green;
SKColor blue = SKColors.Blue;
SKColor yellow = SKColors.Yellow;
SKColor purple = SKColors.Purple;
颜色转换和操作
获取颜色分量
C#SKColor color = new SKColor(128, 255, 100, 50);
// 获取各个分量的值
byte alpha = color.Alpha; // 获取透明度值
byte red = color.Red; // 获取红色分量
byte green = color.Green; // 获取绿色分量
byte blue = color.Blue; // 获取蓝色分量
颜色转换
C#// 创建一个颜色
SKColor originalColor = new SKColor(255, 100, 150, 200);
// 转换为HSV（色相、饱和度、明度）
color.ToHsl(out float hue, out float saturation, out float lightness);
// 使用WithXXX方法创建新的颜色
SKColor newAlpha = originalColor.WithAlpha(128); // 修改透明度
SKColor newRed = originalColor.WithRed(200); // 修改红色分量
SKColor newGreen = originalColor.WithGreen(50); // 修改绿色分量
SKColor newBlue = originalColor.WithBlue(150); // 修改蓝色分量
实际应用示例
绘制渐变色矩形
C#public void DrawGradientRect(SKCanvas canvas)
{
// 创建画笔
using (var paint = new SKPaint())
{
// 创建渐变色
var colors = new SKColor[]
{
new SKColor(255, 0, 0, 255), // 红色
new SKColor(0, 255, 0, 255), // 绿色
new SKColor(0, 0, 255, 255) // 蓝色
};
// 创建线性渐变
using (var shader = SKShader.CreateLinearGradient(
new SKPoint(0, 0), // 起点
new SKPoint(200, 200), // 终点
colors, // 颜色数组
null, // 颜色位置（null表示均匀分布）
SKShaderTileMode.Clamp))
{
paint.Shader = shader;
// 绘制矩形
canvas.DrawRect(0, 0, 200, 200, paint);
}
}
}
绘制半透明图形
C#using System.Drawing;
using SkiaSharp;
using SkiaSharp.Views.Desktop;
namespace AppSKColor
{
public partial class Form1 : Form
{
private SKGLControl skControl;
public Form1()
{
InitializeComponent();
// 设置窗体大小
this.ClientSize = new Size(300, 300);
// 创建 SKGLControl 控件
skControl = new SKGLControl();
skControl.Dock = DockStyle.Fill;
skControl.PaintSurface += SkControl_PaintSurface;
this.Controls.Add(skControl);
// 强制刷新
skControl.Invalidate();
}
private void SkControl_PaintSurface(object sender, SKPaintGLSurfaceEventArgs e)
{
// 获取画布
SKCanvas canvas = e.Surface.Canvas;
// 清空画布为白色背景
canvas.Clear(SKColors.White);
DrawTransparentShapes(canvas);
}
public void DrawTransparentShapes(SKCanvas canvas)
{
// 创建半透明的红色画笔
using (var paint = new SKPaint
{
Color = new SKColor(255, 0, 0, 128), // Red=255, Green=0, Blue=0, Alpha=128
Style = SKPaintStyle.Fill,
IsAntialias = true
})
{
// 绘制红色圆形
canvas.DrawCircle(100, 100, 50, paint);
// 修改画笔颜色为半透明蓝色
paint.Color = new SKColor(0, 0, 255, 128); // Red=0, Green=0, Blue=255, Alpha=128
canvas.DrawCircle(150, 100, 50, paint);
// 修改画笔颜色为半透明绿色
paint.Color = new SKColor(0, 255, 0, 128); // Red=0, Green=255, Blue=0, Alpha=128
canvas.DrawCircle(125, 150, 50, paint);
}
}
}
}
颜色混合示例
C#using System.Drawing;
using SkiaSharp;
using SkiaSharp.Views.Desktop;
using System.Diagnostics; // 添加这个引用
namespace AppSKColor
{
public partial class Form1 : Form
{
private SKGLControl skControl;
private float blendFactor = 0;
private System.Windows.Forms.Timer animationTimer;
private Stopwatch stopwatch; // 添加计时器
public Form1()
{
InitializeComponent();
// 设置窗体大小
this.ClientSize = new Size(300, 300);
// 创建 SKGLControl 控件
skControl = new SKGLControl();
skControl.Dock = DockStyle.Fill;
skControl.PaintSurface += SkControl_PaintSurface;
this.Controls.Add(skControl);
// 初始化秒表
stopwatch = new Stopwatch();
stopwatch.Start();
// 创建动画计时器
animationTimer = new System.Windows.Forms.Timer();
animationTimer.Interval = 16; // 约60fps
animationTimer.Tick += AnimationTimer_Tick;
animationTimer.Start();
}
private void AnimationTimer_Tick(object sender, EventArgs e)
{
// 使用 Stopwatch 来获取精确的时间
blendFactor = (float)((Math.Sin(stopwatch.ElapsedMilliseconds / 2000.0 * Math.PI) + 1) / 2);
skControl.Invalidate();
}
private void SkControl_PaintSurface(object sender, SKPaintGLSurfaceEventArgs e)
{
SKCanvas canvas = e.Surface.Canvas;
canvas.Clear(SKColors.White);
using (SKPaint paint = new SKPaint())
{
paint.IsAntialias = true;
// 创建两个颜色（使用更鲜明的对比色）
SKColor color1 = new SKColor(255, 0, 0); // 纯红色
SKColor color2 = new SKColor(0, 0, 255); // 纯蓝色
// 动态混合颜色
byte newRed = (byte)(color1.Red * (1 - blendFactor) + color2.Red * blendFactor);
byte newGreen = (byte)(color1.Green * (1 - blendFactor) + color2.Green * blendFactor);
byte newBlue = (byte)(color1.Blue * (1 - blendFactor) + color2.Blue * blendFactor);
SKColor animatedBlendedColor = new SKColor(newRed, newGreen, newBlue);
// 绘制原始颜色1
paint.Color = color1;
canvas.DrawCircle(75, 100, 50, paint);
// 绘制原始颜色2
paint.Color = color2;
canvas.DrawCircle(225, 100, 50, paint);
// 绘制动态混合的颜色（放大一些）
paint.Color = animatedBlendedColor;
canvas.DrawCircle(150, 200, 70, paint);
// 添加文本说明
paint.Color = SKColors.Black;
paint.TextSize = 16; // 增大字体大小
canvas.DrawText("Red", 60, 165, paint);
canvas.DrawText("Blue", 210, 165, paint);
canvas.DrawText($"Blend Factor: {blendFactor:F2}", 80, 280, paint);
}
}
protected override void OnFormClosing(FormClosingEventArgs e)
{
animationTimer.Stop();
stopwatch.Stop(); // 停止秒表
base.OnFormClosing(e);
}
}
}
注意事项
- 颜色分量的值范围是0-255（byte类型）
- Alpha值255表示完全不透明，0表示完全透明
- 创建SKColor时，参数顺序为(Alpha, Red, Green, Blue)或(Red, Green, Blue)
- 使用预定义颜色时，所有颜色都是完全不透明的（Alpha = 255）
- 在处理透明度时，需要考虑绘制顺序，因为这会影响最终的视觉效果
总结
SkiaSharp提供了丰富的颜色处理功能，通过SKColor结构体可以轻松创建和操作各种颜色。无论是使用RGB还是ARGB模式，都可以精确控制颜色的每个分量。结合预定义颜色和颜色转换方法，可以实现各种复杂的颜色效果。在实际应用中，合理使用透明度和颜色混合可以创造出更加丰富的视觉效果。
本文作者:技术老小子
本文链接:
版权声明:本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
目录