在 GTK# 中使用 Cairo 绘图
最后修改于 2023 年 10 月 18 日
在本 GTK# 编程教程中，我们将使用 Cairo 库进行一些绘图。
Cairo 是一个用于创建 2D 矢量图形的库。我们可以使用它来绘制我们自己的小部件、图表或各种效果或动画。
简单绘图
描边操作绘制形状的轮廓，填充操作填充形状的内部。接下来，我们演示这两个操作。
simpledrawing.cs
using Gtk;
using Cairo;
using System;
class SharpApp : Window {
public SharpApp() : base("Simple drawing")
{
SetDefaultSize(230, 150);
SetPosition(WindowPosition.Center);
DeleteEvent += delegate { Application.Quit(); };;
DrawingArea darea = new DrawingArea();
darea.ExposeEvent += OnExpose;
Add(darea);
ShowAll();
}
void OnExpose(object sender, ExposeEventArgs args)
{
DrawingArea area = (DrawingArea) sender;
Cairo.Context cr = Gdk.CairoHelper.Create(area.GdkWindow);
cr.LineWidth = 9;
cr.SetSourceRGB(0.7, 0.2, 0.0);
int width, height;
width = Allocation.Width;
height = Allocation.Height;
cr.Translate(width/2, height/2);
cr.Arc(0, 0, (width < height ? width : height) / 2 - 10, 0, 2*Math.PI);
cr.StrokePreserve();
cr.SetSourceRGB(0.3, 0.4, 0.6);
cr.Fill();
((IDisposable) cr.Target).Dispose();
((IDisposable) cr).Dispose();
}
public static void Main()
{
Application.Init();
new SharpApp();
Application.Run();
}
}
在我们的示例中，我们绘制一个圆并用纯色填充它。
gmcs -pkg:gtk-sharp-2.0 -r:/usr/lib/mono/2.0/Mono.Cairo.dll simple.cs
这是我们编译示例的方法。
DrawingArea darea = new DrawingArea();
我们将在 DrawingArea 小部件上进行绘图操作。
darea.ExposeEvent += OnExpose;
所有绘图都在我们插入到 ExposeEvent 中的方法中完成。
DrawingArea area = (DrawingArea) sender; Cairo.Context cr = Gdk.CairoHelper.Create(area.GdkWindow);
我们从绘图区域的 GdkWindow 创建 Cairo.Context 对象。上下文是用于在所有 Drawable 对象上绘图的对象。
cr.LineWidth = 9;
我们将线条的宽度设置为 9 像素。
cr.SetSourceRGB(0.7, 0.2, 0.0);
我们将颜色设置为深红色。
int width, height; width = Allocation.Width; height = Allocation.Height; cr.Translate(width/2, height/2);
我们获取绘图区域的宽度和高度。我们将原点移动到窗口的中间。
cr.Arc(0, 0, (width < height ? width : height) / 2 - 10, 0, 2*Math.PI); cr.StrokePreserve();
我们绘制一个圆的外形。StrokePreserve 根据当前的线宽、线连接、线帽和虚线设置描边当前路径。与 Stroke 不同的是，它保留了 cairo 上下文中的路径。
cr.SetSourceRGB(0.3, 0.4, 0.6); cr.Fill();
这将用一些蓝色填充圆的内部。
基本形状
下一个示例在窗口上绘制一些基本形状。
basicshapes.cs
using Gtk;
using Cairo;
using System;
class SharpApp : Window {
public SharpApp() : base("Basic shapes")
{
SetDefaultSize(390, 240);
SetPosition(WindowPosition.Center);
DeleteEvent += delegate { Application.Quit(); };
DrawingArea darea = new DrawingArea();
darea.ExposeEvent += OnExpose;
Add(darea);
ShowAll();
}
void OnExpose(object sender, ExposeEventArgs args)
{
DrawingArea area = (DrawingArea) sender;
Cairo.Context cc = Gdk.CairoHelper.Create(area.GdkWindow);
cc.SetSourceRGB(0.2, 0.23, 0.9);
cc.LineWidth = 1;
cc.Rectangle(20, 20, 120, 80);
cc.Rectangle(180, 20, 80, 80);
cc.StrokePreserve();
cc.SetSourceRGB(1, 1, 1);
cc.Fill();
cc.SetSourceRGB(0.2, 0.23, 0.9);
cc.Arc(330, 60, 40, 0, 2*Math.PI);
cc.StrokePreserve();
cc.SetSourceRGB(1, 1, 1);
cc.Fill();
cc.SetSourceRGB(0.2, 0.23, 0.9);
cc.Arc(90, 160, 40, Math.PI/4, Math.PI);
cc.ClosePath();
cc.StrokePreserve();
cc.SetSourceRGB(1, 1, 1);
cc.Fill();
cc.SetSourceRGB(0.2, 0.23, 0.9);
cc.Translate(220, 180);
cc.Scale(1, 0.7);
cc.Arc(0, 0, 50, 0, 2*Math.PI);
cc.StrokePreserve();
cc.SetSourceRGB(1, 1, 1);
cc.Fill();
((IDisposable) cc.Target).Dispose ();
((IDisposable) cc).Dispose ();
}
public static void Main()
{
Application.Init();
new SharpApp();
Application.Run();
}
}
在本例中，我们创建一个矩形、一个正方形、一个圆、一个弧和一个椭圆。我们用蓝色绘制轮廓，用白色填充内部。
cc.Rectangle(20, 20, 120, 80); cc.Rectangle(180, 20, 80, 80); cc.StrokePreserve(); cc.SetSourceRGB(1, 1, 1); cc.Fill();
这些行绘制一个矩形和一个正方形。
cc.Arc(330, 60, 40, 0, 2*Math.PI);
在这里，Arc 方法绘制一个完整的圆。
cc.Scale(1, 0.7); cc.Arc(0, 0, 50, 0, 2*Math.PI);
如果我们想画一个椭圆，我们先做一些缩放。这里的 Scale 方法缩小了 y 轴。
颜色
颜色是一个表示红色、绿色和蓝色 (RGB) 强度值组合的对象。Cairo 有效的 RGB 值范围是 0 到 1。
colors.cs
using Gtk;
using Cairo;
using System;
class SharpApp : Window {
public SharpApp() : base("Colors")
{
SetDefaultSize(360, 100);
SetPosition(WindowPosition.Center);
DeleteEvent += delegate { Application.Quit(); };
DrawingArea darea = new DrawingArea();
darea.ExposeEvent += OnExpose;
Add(darea);
ShowAll();
}
void OnExpose(object sender, ExposeEventArgs args)
{
DrawingArea area = (DrawingArea) sender;
Cairo.Context cr = Gdk.CairoHelper.Create(area.GdkWindow);
cr.SetSourceRGB(0.2, 0.23, 0.9);
cr.Rectangle(10, 15, 90, 60);
cr.Fill();
cr.SetSourceRGB(0.9, 0.1, 0.1);
cr.Rectangle(130, 15, 90, 60);
cr.Fill();
cr.SetSourceRGB(0.4, 0.9, 0.4);
cr.Rectangle(250, 15, 90, 60);
cr.Fill();
((IDisposable) cr.Target).Dispose();
((IDisposable) cr).Dispose();
}
public static void Main()
{
Application.Init();
new SharpApp();
Application.Run();
}
}
我们用三种不同的颜色绘制三个矩形。
cr.SetSourceRGB(0.2, 0.23, 0.9);
SetSourceRGB 方法为 cairo 上下文设置颜色。该方法的三个参数是颜色强度值。
cr.Rectangle(10, 15, 90, 60); cr.Fill();
我们创建一个矩形形状并用先前指定的颜色填充它。
透明矩形
透明度是能够透过一种材料看到东西的质量。理解透明度的最简单方法是想象一块玻璃或水。从技术上讲，光线可以通过玻璃，这样我们就可以看到玻璃后面的物体。
在计算机图形学中，我们可以使用 alpha 合成来实现透明效果。Alpha 合成是将图像与背景组合以创建部分透明外观的过程。合成过程使用 alpha 通道。（wikipedia.org，answers.com）
transparentrectangles.cs
using Gtk;
using Cairo;
using System;
class SharpApp : Window {
public SharpApp() : base("Transparent rectangles")
{
SetDefaultSize(590, 90);
SetPosition(WindowPosition.Center);
DeleteEvent += delegate { Application.Quit(); } ;
DrawingArea darea = new DrawingArea();
darea.ExposeEvent += OnExpose;
Add(darea);
ShowAll();
}
void OnExpose(object sender, ExposeEventArgs args)
{
DrawingArea area = (DrawingArea) sender;
Cairo.Context cr = Gdk.CairoHelper.Create(area.GdkWindow);
for ( int i = 1; i <= 10; i++) {
cr.SetSourceRGBA(0, 0, 1, i*0.1);
cr.Rectangle(50*i, 20, 40, 40);
cr.Fill();
}
((IDisposable) cr.Target).Dispose();
((IDisposable) cr).Dispose();
}
public static void Main()
{
Application.Init();
new SharpApp();
Application.Run();
}
}
在本例中，我们绘制了十个具有不同透明度的矩形。
cr.SetSourceRGBA(0, 0, 1, i*0.1);
SetSourceRGBA 方法的最后一个参数是 alpha 透明度。
灵魂伴侣
在下一个示例中，我们在窗口上绘制一些文本。
soulmate.cs
using Gtk;
using Cairo;
using System;
class SharpApp : Window {
public SharpApp() : base("Soulmate")
{
SetDefaultSize(420, 250);
SetPosition(WindowPosition.Center);
DeleteEvent += delegate { Application.Quit(); };
DrawingArea darea = new DrawingArea();
darea.ExposeEvent += OnExpose;
Add(darea);
ShowAll();
}
void OnExpose(object sender, ExposeEventArgs args)
{
DrawingArea area = (DrawingArea) sender;
Cairo.Context cr = Gdk.CairoHelper.Create(area.GdkWindow);
cr.SetSourceRGB(0.1, 0.1, 0.1);
cr.SelectFontFace("Purisa", FontSlant.Normal, FontWeight.Bold);
cr.SetFontSize(13);
cr.MoveTo(20, 30);
cr.ShowText("Most relationships seem so transitory");
cr.MoveTo(20, 60);
cr.ShowText("They're all good but not the permanent one");
cr.MoveTo(20, 120);
cr.ShowText("Who doesn't long for someone to hold");
cr.MoveTo(20, 150);
cr.ShowText("Who knows how to love without being told");
cr.MoveTo(20, 180);
cr.ShowText("Somebody tell me why I'm on my own");
cr.MoveTo(20, 210);
cr.ShowText("If there's a soulmate for everyone");
((IDisposable) cr.Target).Dispose();
((IDisposable) cr).Dispose();
}
public static void Main()
{
Application.Init();
new SharpApp();
Application.Run();
}
}
我们显示了 Natasha Bedingfield 的歌曲《Soulmate》的部分歌词。
cr.SelectFontFace("Purisa", FontSlant.Normal, FontWeight.Bold);
在这里，我们指定了我们使用的字体 — Purisa 粗体。
cr.SetFontSize(13);
我们指定字体的大小。
cr.MoveTo(20, 30);
我们移动到我们绘制文本的点。
cr.ShowText("Most relationships seem so transitory");
ShowText 方法将文本绘制到窗口上。
在本 GTK# 编程库的这一章中，我们正在使用 Cairo 库进行绘图。