RmlUi 初试，hello world

前言

最近在研究GUI的各个方面，最后被导向了web render，真的是一言难尽。
这里就其中一个比较有意思的项目 RmlUi 浅试一下，没想要还挺麻烦！这里留下note以供后人参考。

环境搭建

Windows + VS2022 + pre-binary library

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

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

  1. VS创建一个console C++项目，我们以x86为目标
  2. 将从 https://github.com/mikke89/RmlUi/releases 下载 RmlUi-vs2017-win32.zip. 解压到指定目录，将对应 include/lib/link 三件套手动配置到project中。添加 freetype.lib 的文件夹路径到project, 添加 freetype.lib, RmlCore.lib依赖。
  3. 添加 Backends文件夹到 include, 复制 freetype.dll, RmlCore.Dll到可执行文件夹。
  4. 修改 主 cpp文件。内容参考下面。
  5. 直接编译，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, 这个组合官方有现成的支持!

继续配置：

  • 将SDL和SDL_image的release包从GitHub下载下来，include/lib/link 三件套配置好
  • 在VS project中将 RmlUi_Platform_SDL.h/.cpp, RmlUi_Renderer_SDL.h/.cpp, RmlUi_Backend_SDL_SDLrenderer.cpp 三套源文件加入。
  • 准备 字体ttf 文件, 需要中文的，字体也要支持中文。
  • 准备 rml 和 rcss 文件。
    这里需要注意，rcss一定要通过 rml 中的 link 方式加载进去。
  • 最后，debug 起来, 注意查看 VS 调试窗口的提示！

几个常见问题：

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

参考代码

// rmldemo.cpp : 此文件包含 "main" 函数。程序执行将在此处开始并结束。
//#include <RmlUi/Core.h>
#include <RmlUi_Backend.h>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 为例：

  • 需要准备 OpenGL2 开发SDK，将三件套添加到 project 中。
  • 需要添加 RmlUi_Backend_GLFW_GL2.h/.cpp, RmlUi_Platform_GLFW.h/.cpp, RmlUi_Renderer_GL2.h/.cpp 添加到project中。
  • 如果遇到 OpenGL2 依赖其他 image库一类的，继续下载对应 SDK 添加到 project中。

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

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/web/15246.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

高通Android 12/13 设置和获取ADB状态

高通Android 12/13 设置和获取ADB状态

/*** 设置ADB状态** param isEnable*/public void setADB(boolean isEnable) {Settings.Global.putInt(mContext.getContentResolver(), Settings.Global.ADB_ENABLED, isEnable ? 1 : 0);}/*** 获取ADB状态** return*/public boolean getADB() {return Settings.Global.getIn…
阅读更多...
虚拟化技术[3]之网络虚拟化

虚拟化技术[3]之网络虚拟化

网络虚拟化 网络虚拟化简介核心层网络虚拟化接入层网络虚拟化虚拟机网络虚拟化案例: VMware网络虚拟化技术虚拟网络接口卡虚拟交换机vSwitch分布式交换机端口组VLAN 网络虚拟化简介 传统的数据中心&#xff1a;服务器之间操作系统和上层软件异构、接口与数据格式不统一&#x…
阅读更多...
链表相交-力扣

链表相交-力扣

在做这道题时&#xff0c;首先想到的解法是遍历第一个链表&#xff0c;将其全部添加到哈希表中&#xff0c;然后遍历第二个链表&#xff0c;如果能够再哈希表中查到元素&#xff0c;则返回这个元素&#xff0c;否则返回NULL。 但在实际写代码时&#xff0c;第一次写默认为链表相…
阅读更多...
Redis实现MQ

Redis实现MQ

MQ的提出 上游发出请求后阻塞等待下游给到反馈&#xff0c;否则整个流程将一直阻塞。 提出mq之后&#xff1a;即有producer mq consumer 三者 MQ的特点 异步解耦 在有了 mq 后&#xff0c;producer 不需要过分关心 consumer 的身份信息&#xff0c;只需要把消息按照指定的协议…
阅读更多...
Python 潮流周刊#52：Python 处理 Excel 的资源

Python 潮流周刊#52：Python 处理 Excel 的资源

本周刊由 Python猫 出品&#xff0c;精心筛选国内外的 250 信息源&#xff0c;为你挑选最值得分享的文章、教程、开源项目、软件工具、播客和视频、热门话题等内容。愿景&#xff1a;帮助所有读者精进 Python 技术&#xff0c;并增长职业和副业的收入。 本期周刊分享了 12 篇文…
阅读更多...
基于hive的酒店价格数据可视化分析系统设计和实现

基于hive的酒店价格数据可视化分析系统设计和实现

摘要 本文基于Django框架和Hive技术&#xff0c;设计和实现了一种酒店价格数据可视化分析系 统&#xff0c;旨在为酒店管理者提供直观、清晰的数据洞察和决策支持。在研究中&#xff0c;首先深入分 析了酒店价格数据可视化分析系统的背景和意义&#xff0c;认识到对于酒店行…
阅读更多...
3.Redis之Redis的环境搭建redis客户端介绍

3.Redis之Redis的环境搭建redis客户端介绍

1.版本的选取 安装 Redis&#xff1a;Redis 5 系列~~ 在 Linux 中进行安装~~ Redis 官方是不支持 Windows 版本的~~ 微软维护了一个 Windows 版本的 Redis 分支 Centos和Ubuntu.Docker 2.如何进行安装&#xff1f;&#xff1f;&#xff1f; 1.ubuntu 2.centos yum instal…
阅读更多...
arcgisPro将一个图层的要素复制到另一个图层

arcgisPro将一个图层的要素复制到另一个图层

1、打开两个图层&#xff0c;如下&#xff0c;其中一个图层中有两个要素&#xff0c;需要将其中一个要素复制到另一个图层中&#xff0c;展示如下&#xff1a; 2、选中待复制要素&#xff0c;点击复制按钮&#xff0c;如下&#xff1a; 3、下拉粘贴按钮列表&#xff0c;选择【选…
阅读更多...
利用oracle默认事务隔离级别(提交读)提升多表联查速度

利用oracle默认事务隔离级别(提交读)提升多表联查速度

利用oracle默认事务隔离级别(提交读)提升查询速度) 背景介绍&#xff1a; 数据量大查询缓慢&#xff0c;添加太多条件&#xff0c;使用IN走了全表查询导致查询速度缓慢。 解决方案&#xff1a; 版本一&#xff1a; 新建临时表&#xff0c;在查询是将数据插入到临时表中&#…
阅读更多...
Python 根据点云索引提取点云

Python 根据点云索引提取点云

点云索引滤波 一、介绍1.1 概念1.2 参数设置二、代码示例三、结果示例一、介绍 1.1 概念 点云索引滤波 是一种常用的点云滤波方法，根据给定的索引列表获取点云中的索引点，或着根据给定的索引列表获取点云中的非索引点。 1.2 参数设置 核心函数: def select_by_index(self, …
阅读更多...
Ubuntu22.04虚拟机设置静态IP

Ubuntu22.04虚拟机设置静态IP

虚拟机设置静态IP 按下电脑的 “win”键&#xff0c;在弹出的输入框中输入“控制面板”&#xff0c;选中控制面板 1.选择 “网络和Internet” 2.选择 “网络和共享中心” 3.选择 “更改适配器设置” 4.选择 “VMnet8”&#xff0c;双击打开 5.选择 “属性” 找到 “Internet …
阅读更多...
【idea】idea2024最新版本下载_安装_破解

【idea】idea2024最新版本下载_安装_破解

1、下载 下载地址&#xff1a;下载 IntelliJ IDEA – 领先的 Java 和 Kotlin IDE 下载完成&#xff1a; idea破解脚本下载链接&#xff1a;https://pan.baidu.com/s/1L5qq26cRABw8XuEn_CngKQ 提取码&#xff1a;6666 下载完成&#xff1a; 2、安装 1、双击idea的安装包&…
阅读更多...
《计算机网络微课堂》1-6 计算机体系结构

《计算机网络微课堂》1-6 计算机体系结构

常见的计算机网络体系结构 从本节课开始&#xff0c;我们要用 4 次课的时间来介绍有关计算机网络体系结构的知识&#xff0c;具体包含以下内容&#xff1a; 一&#xff0c;常见的计算机网络体系结构二&#xff0c;计算机网络体系结构分层的必要性三&#xff0c;计算机网络体系…
阅读更多...
给我瞅瞅呀

给我瞅瞅呀

专业 流程&#xff08;一条龙服务&#xff09; 需求沟通-需求分析-产品架构-ue原型-ui设计-产品研发-产品测试-产品交付-产品运维 保障 1、按需定制&#xff0c;签订功能清单&#xff0c;根据功能报价 2、价格透明&#xff0c;签订合同保障&#xff0c;保障客户合法权益 3、源…
阅读更多...
python(4) : pip安装使用国内源

python(4) : pip安装使用国内源

pip install -i https://pypi.tuna.tsinghua.edu.cn/simple requests
阅读更多...
低代码应用：云原生与Kubernetes的应用实战

低代码应用：云原生与Kubernetes的应用实战

随着云原生技术的发展&#xff0c;低代码开发平台&#xff08;Low-Code Development Platforms, LCDPs&#xff09;在企业级应用开发中扮演着越来越重要的角色。本文将探讨低代码平台如何与Kubernetes结合&#xff0c;实现高效、灵活且可扩展的企业级应用开发。 低代码平台概述…
阅读更多...
监控员工电脑屏幕的五大软件（电脑监控软件大盘点）

监控员工电脑屏幕的五大软件（电脑监控软件大盘点）

监控员工电脑屏幕是企业为了提升工作效率、确保信息安全和合规性而采取的一种常见做法。以下是五款在2024年备受推荐的员工电脑屏幕监控软件&#xff0c;每款软件都具有其独特的功能和优势&#xff1a; 1. 域智盾 域智盾是一款全面的终端管理系统&#xff0c;集成了实时屏幕监…
阅读更多...
动态代理，反射，注解的复习笔记

动态代理，反射，注解的复习笔记

1.动态代理的作用 动态代理最主要的用途就是在各种框架中&#xff0c;很方便的在运行期间生成代理类&#xff0c;通过代理类就可以完成AOP、过滤器、拦截器等操作 &#xff08;注&#xff1a;代理就是被代理者没有能力或者不愿意去完成某件事情&#xff0c;需要找个人代替自己…
阅读更多...
02.爬虫---HTTP基本原理

02.爬虫---HTTP基本原理

02.HTTP基本原理 1.URI 和 URL 的区别2.HTTP 和 HTTPS 的区别3.请求过程 1.URI 和 URL 的区别 URL&#xff08;Uniform Resource Locator&#xff09;即-统一资源定位符 URL是用来定位和访问互联网上资源的独特标识&#xff0c;它包括了资源的位置&#xff08;如IP地址或域名&a…
阅读更多...
移动硬盘难题：不显示容量与无法访问的解决策略

移动硬盘难题：不显示容量与无法访问的解决策略

在使用移动硬盘的过程中&#xff0c;有时会遇到一些棘手的问题&#xff0c;比如移动硬盘不显示容量且无法访问。这种情况让人十分头疼&#xff0c;因为它不仅影响了数据的正常使用&#xff0c;还可能导致重要数据的丢失。接下来&#xff0c;我们就来详细探讨一下这个问题及其解…
阅读更多...
最新文章

Copyright @ 2022~2023