RmlUi初试,helloworld

csdn推荐

前言

最近在研究GUI的各个方面,最后被导向了web render,真的是一言难尽。

这里就其中一个比较有意思的项目 RmlUi 浅试一下,没想要还挺麻烦!这里留下note以供后人参考。

环境搭建

Windows + VS2022 + pre-binary library

需要指出的是 RmlUi官方的sample和demo很烂,对,可以说很烂!
因为按照他们的教程和示例,我玩了两天也没搞出来一个hello world!
也可能是我水平太菜了吧,但是我还是认为官方的资料是真的不行,只能提供思路的参考。

以当前最新版本v5.1为例,关键步骤如下:

VS创建一个console C++项目,我们以x86为目标将从 下载 RmlUi-vs2017-win32.zip. 解压到指定目录,将对应 include/lib/link 三件套手动配置到project中。添加 freetype.lib 的文件夹路径到project, 添加 freetype.lib, RmlCore.lib依赖。添加 Backends文件夹到 include, 复制 freetype.dll, RmlCore.Dll到可执行文件夹。修改 主 cpp文件。内容参考下面。直接编译,100% 各种error! 并且没有教程可以参考!

到这里,你需要考虑一个问题:

你的GUI跑在什么后端上?

什么意思呢?

你的GUI渲染引擎是什么?OpenGL? Vulkan? SDL?
你的绘制引擎是什么?SDL? FLFW? SDL? X11? Win32?

如果回答不了,这里就无法进行下去了。

当然,有人说,我想要 GDI + Win32。我不想使用显卡渲染!

对不起,不好意思,这个也不支持!!

RmlUi 实际上是一个更侧重2D/3D渲染的引擎,对于UI渲染的目标就是 显卡/SDL 渲染!

那么,我能选择的是什么呢?

渲染引擎可选:GL2/GL3/SDL/VK
绘制引擎可选:SFML/SDL/WIn32/GLFW/X11

注意:以上两种选择,目前不支持自由组合!!

这里我选择了windows上最容易准备的环境:SDL + SDL, 这个组合官方有现成的支持!

继续配置:

几个常见问题:

1. Font load error。
	大概率是字体路径或者权限问题,确保有读写权限。
2. No font face。font-family xxx ?
	rcss 文件可能没加载,或者widget没有设置 font-family.
	所有widget都需要设置,最好使用*筛选器设置全部的。
	
	还有一种可能:你没有在rml中link 正确的rcss文件。一定要查看debug窗口里的提升输出。

参考代码

// rmldemo.cpp : 此文件包含 "main" 函数。程序执行将在此处开始并结束。
//
#include 
#include 
struct ApplicationData {
	bool show_text = true;
	Rml::String animal = "dog";
} my_data;
int main()
{
	int window_width = 1024;
	int window_height = 768;
	// Initializes the shell which provides common functionality used by the included samples.
	//if (!Shell::Initialize())
	//	return -1;
	// 
	// Constructs the system and render interfaces, creates a window, and attaches the renderer.
	if (!Backend::Initialize("Template Tutorial", window_width, window_height, true))
	{
		//Shell::Shutdown();
		return -1;
	}
	// Install the custom interfaces constructed by the backend before initializing RmlUi.
	Rml::SetSystemInterface(Backend::GetSystemInterface());
	Rml::SetRenderInterface(Backend::GetRenderInterface());
	// RmlUi initialisation.
	Rml::Initialise();
	// Create the main RmlUi context.
	Rml::Context* context = Rml::CreateContext("main", Rml::Vector2i(window_width, window_height));
	if (!context)
	{
		Rml::Shutdown();
		Backend::Shutdown();
		//Shell::Shutdown();
		return -1;
	}
	//Rml::Debugger::Initialise(context);
	 
	// Tell RmlUi to load the given fonts.
	Rml::LoadFontFace("C:\myfont\MappleMono\MapleMono-NF-CN-Regular.ttf");
	// Fonts can be registered as fallback fonts, as in this case to display emojis.
	//Rml::LoadFontFace("C:\Users\andy\Desktop\myfont\JetBrainsMono\JetBrainsMono-Regular.ttf", true);
	// Set up data bindings to synchronize application data.
	if (Rml::DataModelConstructor constructor = context->CreateDataModel("animals"))
	{
		constructor.Bind("show_text", &my_data.show_text);
		constructor.Bind("animal", &my_data.animal);
	}
	// Load and show the tutorial document.
	if (Rml::ElementDocument* document = context->LoadDocument("hello.rml"))
		document->Show();
	bool running = true;
	while (running)
	{
		running = Backend::ProcessEvents(context, nullptr, true);
		context->Update();
		Backend::BeginFrame();
		context->Render();
		Backend::PresentFrame();
	}
	// Shutdown RmlUi.
	Rml::Shutdown();
	Backend::Shutdown();
	//Shell::Shutdown();
	return 0;
}

hello.rml

<rml>
<head>
	<title>Hello world</title>
	<link type="text/rcss" href="hello.rcss"/>
</head>
<body data-model="animals">
	<h1>RmlUi</h1>
	<p>Hello <span id="world">world</span>!</p>
	<p data-if="show_text">The quick brown fox jumps over the lazy {{animal}}.</p>
	<input type="text" data-value="animal"/>
</body>
</rml>

hello.rcss

* {
 font-family: "Maple Mono NF CN";
}
body {
	font-size: 18px;
	color: #02475e;
	background: #fefecc;
	text-align: center;
	padding: 2em 1em;
	position: absolute;
	border: 2px #ccc;
	width: 500px;
	height: 200px;
	margin: auto;
}
		
h1 {
	color: #f6470a;
	font-size: 1.5em;
	font-weight: bold;
	margin-bottom: 0.7em;
}
		
p { 
	margin: 0.7em 0;
}
		
input.text {
	background-color: #fff;
	color: #555;
	border: 2px #999;
	padding: 5px;
	tab-index: auto;
	cursor: text;
	box-sizing: border-box;
	width: 200px;
	font-size: 0.9em;
}

后记

如果不想使用SDL,使用OpenGL怎么办呢?

和一开始的问题一样:你选择什么组合?

我们以 GFLW + OpenGL2 为例:

备注: RmlUi 对输入法支持不行,目前作者还在开发中。

个人估计,IME 这块开源项目想要自己实现,几乎不可能!参考flutter,这么多年了,也没修的很好。

文章来源:https://blog.csdn.net/bbdxf/article/details/139202498



微信扫描下方的二维码阅读本文

© 版权声明
THE END
喜欢就支持一下吧
点赞11 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容