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

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

1 本网站名称：凯尤木江博客圈
2 本站永久网址：blog.kaynak.top
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

未分类
# 渲染 # 实际 # 显卡 # 解压 # 导向

RmlUi初试，helloworld

【大模型】Ollama+open-webui/Anything LLM部署本地大模型构建RAG个人知识库教程（Mac）

WordPress的子比zibll添加判断文章是否被百度收录,图文教程，本站亲测可用

在侧边栏添加一个动态时钟

Git 完整操作之记录

在gitlab CICD中小试 hooks:pre_get_sources_script 功能