把东西放在窗户里

现在我们已经创建了一个窗口，我们想在上面放一些东西！

_images/gui03.jpeg

方法如下：

include "gui/__init__";
open FlxGui;

println$ "Basic Drawing Test";
FlxGui::init();

var w = create_resizable_window("Felix:gui_03_draw_01",100,100,400,600);
w.add$ mk_drawable FlxGui::clear lightgrey;

var font_name = dflt_sans_serif_font();
var font : font_t = get_font(font_name, 12);
var lineskip = get_lineskip font;
w.add$ mk_drawable FlxGui::write (10,10,font,black,"Basic Drawing Test");

fun / (x:string, y:string) => Filename::join (x,y);
var imgfile = #Config::std_config.FLX_SHARE_DIR / "src" / "web" / "images" / "FelixWork.jpg";

var ppic : surface_t = surface (IMG_Load imgfile.cstr);

w.add$ mk_drawable blit (20,20, ppic.get_sdl_surface ());

w.add$ mk_drawable draw_line (RGB(0,0,255), 100,110,200,110);
w.add$ mk_drawable draw_line (RGB(0,0,255), 100,210,200,210);
w.add$ mk_drawable draw_line (RGB(0,0,255), 100,110,100,210);
w.add$ mk_drawable draw_line (RGB(0,0,255), 200,110,200,210);

w.update();
w.show();

Faio::sleep(15.0);

在这里，程序和以前一样，只是我们现在做了三种基本的窗口绘制方法。

文本

首先，我们希望能够将普通文本放在窗口上。为此，我们必须首先创建一个字体来编写文本：

var font_name = dflt_sans_serif_font();
var font : font_t = get_font(font_name, 12);
var lineskip = get_lineskip font;

第一行获取一个默认的sans-serif字体文件的名称，该文件与Felix一起打包，这样您就不必知道系统上所有字体的位置。

第二行实际上是从文件中创建特定大小的字体，在本例中是12点。尺寸是一种传统的打印机测量方法。你得习惯它的意思！

第三行有助于判断字体有多大。我们从字体中检索行之间允许的像素距离，以便阅读文本。如果再少一点，角色就会撞到一起。

现在我们有了字体，我们计划在窗口上绘制一些文本：

w.add$ mk_drawable FlxGui::write (10,10,font,black,"Basic Drawing Test");

这是我们常用的将可绘制对象添加到windows可绘制列表中的机制，当我们说要 update . 绘图功能是 FlxGui::write . 注意，我们使用了函数的完全限定名，以避免与名为的其他函数混淆 write .

写入参数是初始基点的x和y坐标、要使用的字体、要写入的颜色以及要写入的实际文本。

文本总是相对于基点书写的。基点是第一个字符的原点，它大约是字符的左边缘，并且是出现不可见下划线的点：换句话说，在字符的主体下面，但在字母类似的任何下伸部分的顶部 g 可能有。

具体位置取决于字体。字体渲染是一门神秘的艺术，不是一门精确的科学，所以你必须练习让文本出现在你有正确视觉意义的地方。

图片

现在我们要在窗户上放张画。该图像是JPEG图像，用于在Felix中的已知位置进行测试。

首先，我们定义一个小助手函数：

fun / (x:string, y:string) => Filename::join (x,y);

这意味着，当我们试图用一个字符串除以另一个字符串时，我们实际上是想用 Filename::join 它是一个标准函数 / 在unix平台上是字符串之间的字符，在Windows上是slosh。

文件在这里：

var imgfile = #Config::std_config.FLX_SHARE_DIR / "src" / "web" / "images" / "FelixWork.jpg";

这段代码的前缀找到Felix安装的share子目录，其中包含我们在src子目录的web子目录的images子目录中看到的图片。

现在要计划绘图，请执行以下操作：

var ppic : surface_t = surface (IMG_Load imgfile.cstr);
w.add$ mk_drawable blit (20,20, ppic.get_sdl_surface ());

第一行使用SDL2_image中的低级原语将图像文件加载到memory中。这个原始函数需要一个C字符指针，而不是C++字符串，这是Felix使用的，所以我们使用 cstr 转换。然后 surface 函数将加载的文件转换为Felix surface对象。

在第二行中，我们根据 blit 功能。这会将一个曲面复制到另一个曲面。我们将图像表面复制到窗口中位置20,20的窗口表面，并使用 get_sdl_surface() 方法将Felix曲面对象转换为较低级别的SDL曲面。

这一切都有点神秘，所以你只能复制一些有用的模式。

线

最后，我们在图片的顶部画一个蓝色的矩形。我相信你能弄明白这是怎么回事！