> 使用Markdown-It插件实现代码块高亮、代码块信息标识、代码复制等功能。



众所周知，markdown-it是用于md文本转html的工具包，其在markdown文档解析显示中非常之常用。

# 通常用法

通常情况下，它的标准用法应当是：

```ts
import markdownit from "markdown-it";

const md = markdownit({html: true, breaks: true});

const MdText = () => {
    return (
      <div
        dangerouslySetInnerHTML={{
          __html: md.render(item.content),
        }}
        className={'markdown-body'}
      />
    )
}
```

然而，其渲染的行内代码和代码块，使用的是`<code>`标签和`<pre>`标签。无法有辨识度地识别对应的代码区域、代码高亮，并感知语言类型。

![image.png](/static/img/5b0ff37676d9e26e0fda0f9b0b7bea00.image.png)

# 改良方案

markdownit解决代码高亮的方式是使用插件`markdown-it-highlightjs`。其实也可以直接使用`hljs`，效果应该相差不大，不过我这里依然使用`markdown-it-highlightjs`作为使用方法演示。

首先是对插件进行安装：

```ts
yarn add markdown-it-highlightjs
```

由于官方使用的`require`方法引入，本着复制粘贴的原则，我们也使用`import`和`require`混用的方式导入：

```ts
const md = markdownit({html: true, breaks: true})
            .use(require('markdown-it-highlightjs'), {
                // 启用行内代码解析
                inline: true,
                // 启用代码块解析
                code: true,
                // 如果代码没有标注，自动猜它的代码类型，建议关闭
                auto: false,
            });
```

同时，由于markdownit它本身只会解析代码块，用户无法知道这个代码块用的什么代码（md本身就会在\`\`\`后面标注语言类型），因此我想给代码块上方做出一个长条，并且在上面写出标注的代码类型。因此，我们可以在保留markdownit原生解析的情况下，重写我们的新的代码解析函数：

```ts
// 保存markdownit原有的代码块解析
const defaultFence = md.renderer.rules.fence || function (tokens, idx, options, env, self) {
    return self.renderToken(tokens, idx, options);
};

// 在解析器上修改，这里我添加代码语言类型展示
md.renderer.rules.fence = function (tokens, idx, options, env, self) {
    const token = tokens[idx];
    const info = token.info ? token.info.trim() : '';
    const langName = info.split(/\s+/g)[0];

    let codeHtml = defaultFence(tokens, idx, options, env, self);

    // 在代码块上方添加显示语言的标签
    const langLabel = `<div class="code-lang">${md.utils.escapeHtml(langName ? langName : 'text')}</div>`;
    codeHtml = langLabel + codeHtml;
    return `<div class="code-block">${codeHtml}</div>`;
};
```

并且，我们还需要引入CSS。我们可以下载 [highlight.js/src/styles](https://github.com/highlightjs/highlight.js/tree/main/src/styles) 中的样例css，也可以下载下来后自己修改配色。总之，我们还需要导入它：

```ts
import 'sample.css' from '@/css/path';
```

# 最终呈现

最后，我们的代码呈现就变成了：

```ts
import markdownit from "markdown-it";
import 'sample.css' from '@/css/path';

const md = markdownit({html: true, breaks: true})
            .use(require('markdown-it-highlightjs'), {
                // 启用行内代码解析
                inline: true,
                // 启用代码块解析
                code: true,
                // 如果代码没有标注，自动猜它的代码类型，建议关闭
                auto: false,
            });

// 保存markdownit原有的代码块解析
const defaultFence = md.renderer.rules.fence || function (tokens, idx, options, env, self) {
    return self.renderToken(tokens, idx, options);
};

// 在解析器上修改，这里我添加代码语言类型展示
md.renderer.rules.fence = function (tokens, idx, options, env, self) {
    const token = tokens[idx];
    const info = token.info ? token.info.trim() : '';
    const langName = info.split(/\s+/g)[0];

    let codeHtml = defaultFence(tokens, idx, options, env, self);

    // 在代码块上方添加显示语言的标签
    const langLabel = `<div class="code-lang">${md.utils.escapeHtml(langName ? langName : 'text')}</div>`;
    codeHtml = langLabel + codeHtml;
    return `<div class="code-block">${codeHtml}</div>`;
};


const MdText = () => {
    return (
      <div
        dangerouslySetInnerHTML={{
          __html: md.render(item.content),
        }}
        className={'markdown-body'}
      />
    )
}
```

其展现效果如下所示：

![image.png](/static/img/1d19b76779c70de21b63dfd1c205d457.image.png)

markdown-it 代码高亮与代码块重渲染

> 简单概述UmiJS框架中，useModel插件的使用说明与注意事项。



最近和几个朋友做了一个小项目，本着工作上的惯性，为其前端使用了UmiJS + Ant Design的经典组合。由于项目要上单片机，前端打包后的存储空间被限制在了2MB以内，其无法使用大规模的框架与插件，因此我在部署的时候并没有使用全功能的Umi Max，而是最简单的Umi 4.x来初始化。

# 初始化项目

没什么好说的，直接参考[官方文档](https://umijs.org/docs/guides/getting-started)中的内容进行初始化，安装没有选择Umi + Ant Design Pro组合，而是仅使用Umi。这会让初始化时的使用的插件达到最少，几乎只使用了Ant Design基本的库、路由插件、代码分割等最简单的功能。

# 插件安装

Umi在其[文档 - 插件页](https://umijs.org/docs/guides/use-plugins)亦有清晰的表示。需要首先对插件总包进行安装：

```bash
yarn add @umijs/plugins
```

在`.umirc.ts`中，添加一个`plugins`字段，并将想要使用的插件填入（以`useModel`为例）：

```js
import {defineConfig} from "umi";

export default defineConfig({
  ...
  plugins: ['@umijs/plugins/dist/model',],
});
```

# 插件使用

大部分插件可以直接使用`import`导入到项目中，如：

```js
import {useModel} from 'umi';

const userInfoModel = useModel('userInfo');
```

UmiJS官方插件手动安装与使用

原文链接：[从「后端现在已经看不懂前端了」说起 | Randy's Blog | Randy's Blog](https://lutaonan.com/blog/to-frontend-prejudicers/)

提醒自己保持对技术的敬畏，以及思考如何更进一步。


---

V2EX 这两天有一篇这样的帖子：[《说句实话，我后端现在已经看不懂前端了，太难了》](https://www.v2ex.com/t/635386#)

原文内容是：

> 看不懂惹，肿么办，最近在学 react，完全抓瞎。

然后又附加了内容：

> 一直用的 jquery，手动找位置然后对应 dom 操作，现在各种前端各种依赖，一会 route 一会 webpack 的 给爷整蒙了都。

类似这样的帖子多年来数不胜数，但这次评论区的评论比较典型，所以我决定这次不再沉默。当然，本文并非针对帖子作者。

对于那些抱怨前端「看不懂」的网友，我们应该问他们一个问题：**为什么前端就应该是谁都能看懂？**

这些网友从来不会抱怨别的领域的代码看不懂，比如他们不会说「我一个前端已经看不懂后端了」，或者「我一个后端已经看不懂 iOS」了。

所以在这些网友心中，前端代码就是要谁都看得懂才是正常的。因为谁都应该看得懂 HTML, 谁都看得懂 CSS.

显然，这群人对前端的认知还活在过去，他们一边享受着用 Web 技术做出来应用，一边意淫着这些包含复杂业务逻辑的 Web 应用靠 HTML 和 Vanilla JS (原生 JS) 就能写成。

换句话说，这群人最大的问题在于，他们意识不到 GUI 开发 (Graphic User Interface Programming) 是一个从图形界面被发明开始就一直在被研究的独立领域，而 Web 前端只是 GUI 开发的其中一个分支而已。

这群人没有意识到到底什么是「前端」。前端就是写 HTML / JavaScript / CSS 吗？不，前端应该泛指那些需要编写 GUI 的技术。在我看来，写 iOS / Android 应用和写 Web 前端没有本质上的区别，区别只是语言和平台，背后处理的问题是一模一样的：**如何实现视觉和交互 -> 交互如何触发逻辑 -> 逻辑如何影响视觉的变化**。

所以，**如果认为浏览器识别的是 HTML 所以认为前端应该谁都能看懂、门槛低，进而得出前端目前的工作流是问题复杂化的结果，就如同因为 Android 的 UI 是用 XML 写的就认为 Android 门槛低一样不成立得可笑**。

对 GUI 开发难点的不了解是导致这种误解的最主要原因，以网友「 [avastms](https://www.v2ex.com/t/635386#r_8434047) 」提出的评论为典型：

>这是前端圈长期逆淘汰的结果。
>
>模板混代码里这种 PHP 宗教行为就别提了。
>
>个人认为因为 javascript 语言的部分原因，前端很少有人懂什么是继承，什么是类，实例到底啥意思，更别谈良好维护引用了。
>
>什么 redux,什么 vuex 根本就是莫名其妙，不就是事件监听吗，像 Node.js 那样 EventEmitter 多么清晰，非得自己造概念。
>
>画虎不成反类犬，凡是有这套什么状态管理逻辑的，代码完全不可读。
>
>前端自己也是不争气，不用别人的这些狗概念，自己就不会写代码了吗？
>
>没有什么 redux，自己就不会管理自己的属性了吗？

他说：「模板混代码里这种 PHP 宗教行为就别提了」，想必他在说 JSX. JSX 刚开始出来就充满争议，但人们最终会发现，JSX 是函数式 GUI 开发最易读写的方案。实际上，他完全可以选择不使用 JSX，这样去写代码：
```js
const Component = h(‘div’, null, [h(‘p’, null, ‘hello world’), h(‘p’, null, ‘I am Randy’)])
```
但是，这位网友大概更愿意读这样的代码：

```js
const Component = (
	<div>
		<p>hello world</p>
		<p>I am Randy</p>
	</div>
)
```
觉得这样的写法恶心，多数是因为不知道 JSX 这个语法糖的背后是什么。

事实上没有人阻止任何人不用 JSX, 或者看看 Flutter 就大概知道没有 JSX 的 React 会是什么样子。

作为补充，这是希望 Flutter 引入 JSX 的相关讨论：[Consider JSX-like as React Native · Issue #15922 · flutter/flutter · GitHub](https://github.com/flutter/flutter/issues/15922)

至于提到的 Redux 和 Vuex, 证明这位网友根本不知道 EventEmitter 和 Reactive 的区别。这里就不展开讨论了。

为什么我们宁愿用 JSX 这种折中方案也不愿意放弃函数式编程，是因为声明式(Declarative) 是编写 GUI 最好的方法。复杂的 GUI 应用包含复杂的状态，人脑在处理复杂的状态绝对不比计算机在行，我们尽可能地把这些状态交给计算机做，函数式编程就是我们实现这个目标的工具。

Elm 的作者写过一篇名叫 [Concurrent FRP](https://elm-lang.org/assets/papers/concurrent-frp.pdf) 的论文，讲述了函数式响应式编程 (Functional Reactive Programming) 在 GUI 开发中的历史背景和应用。

那些喜欢说「jQuery 一把梭」的网友，要么遇到的业务很简单，要么是在自虐。我见过写外挂用易语言一把梭的，但没听说过 Adobe 写 PhotoShop 用 Visual Basic 一把梭。

有些人，能接受 Maven, Gradle 的不完美，也知道什么场景应该用什么技术栈，但一旦开始写点前端代码，就认为应该有一个神一样的、完美的、还没有学习成本的构建工具，然后 Twitter, V2EX 抱怨一番，却不愿意认真学一学前端这个领域的知识。

不要妄想有一个睡醒就突然会用的构建工具。说实话，Webpack 不需要任何配置就能用，再不行试试号称 zero configuration (零配置) 的 [Parcel](https://parceljs.org/), 用 TypeScript, 引入 CSS / LESS / SASS 通通不需要配置，跑起来就行。但那又如何呢，那些不愿意学习又想出活的网友们不懂的不是运行 `webpack dev` 这个命令，而是根本不懂这个命令背后解决的是什么问题。

一个人要锤子锤个钉子，结果大家都说雷神的锤子很牛逼。这个人听了，上来就要用雷神的锤子，结果拿都拿不起来。然后网上发个贴：「根本不懂为什么雷神要搞个这么重的锤子，给爷整蒙了都」。底下评论：「我工具锤一把梭！」楼下再附和：「雷神搞这个锤就是为了装逼」。

奉劝各位，把抱怨转化成求知，没有一个领域是不需要学习成本的，不管是做技术还是技术以外的领域，是分工和市场经济让各位觉得一切理所当然，然而像磨刀这样看上去简单的动作，也不是每个人都能磨好一把刀。

【转载】从「后端现在已经看不懂前端了」说起

虚幻引擎的物品展示UI构建实例，允许玩家通过控制器对场景内的可互动物品进行检视。



在游戏中经常有如下的场景互动：

- 玩家可以对某些物品使用互动按钮
- 互动后，游戏会暂停，会出现检视相关UI，允许玩家近距离观察物品
- 玩家可以使用鼠标旋转物品模型，或者使用滚轮拉近/拉远与物品之间的距离

![image.png](/static/img/b173746015e1d973a961b2c137524312.image.png)

这种功能非常有意思，我觉得很适合作为练手的方式。

# 前置知识：SceneCaptureComponent2D

`SceneCaptureComponent2D` 是 Unreal Engine 中用于捕获当前场景渲染的组件，它可以用来生成动态的纹理或视频流，以实现例如实时反射、监视器显示等功能。该组件通常被附加到场景中的物体上，并且可以设置其捕获视野、分辨率等参数。

**主要功能与使用场景：**
1. **实时反射**：可以用于创建动态反射材质，比如镜子或者水面。
2. **监控摄像头**：在场景中加入`SceneCaptureComponent2D`作为摄像头，将捕捉的画面投射到另一个显示屏或表面上。
3. **动态纹理**：生成一个实时更新的纹理，可用于HUD、材质或其他视觉效果。

**常用属性：**
- **Capture Source**：设置捕获的内容源，例如捕获场景颜色、深度等。
- **Texture Target**：捕捉到的画面会输出为纹理，通常用一个`RenderTarget2D`来存储。
- **FOV Angle (视野角度)**：决定摄像头的视角宽度。

**示例：**

要使用`SceneCaptureComponent2D`捕捉场景并将其渲染到一个`RenderTarget2D`，通常需要以下步骤：
1. 在场景中的某个Actor上添加一个`SceneCaptureComponent2D`。
2. 创建一个`RenderTarget2D`资源并将其分配给`SceneCaptureComponent2D`的`Texture Target`。
3. 使用材质将捕获的纹理应用到需要显示捕捉内容的物体上。

这使得你可以在场景中实时显示不同的视角画面或者创建视觉特效。

# 前期准备

基于SceneCaptureComponent2D，我们可以使用这样的思路：

- 给要检视的模型套上一个SpringArm
- 在SpringArm的尽头装上一个SceneCaptureComponent2D的摄像头
- 模型互动时能够打开检视的UI
- 将SceneCaptureComponent2D捕获到的画面传递给UI上的检视部分
- UI上鼠标的互动能够影响SpringArm的旋转角度和长短

## 物品蓝图：BP_Look

新建一个Actor蓝图BP_Look，我们用这个蓝图来创建可以互动的几何体。

为这个蓝图的root添加一个静态几何体组件，为静态几何体添加弹簧臂组件，最后在弹簧臂上添加一个场景捕获组件2D。

![image.png](/static/img/19785552de433f6739827bc5c8dd98a1.image.png)


:::warning{title="注意"}
在我们的需求里，SceneCaptureComponent2D只会拍摄我们想要的模型，其他内容会被忽略。并且，弹簧臂具有如下特性：它会进行碰撞检测，装在自己身上的摄像头与其他物体发生碰撞时，它会自动改变长度，以规避碰撞。然而，在当前的模型中，由于弹簧臂默认位置在(0,0,0)，它会和地板发生碰撞检测，并会无限制地缩短——而且无用，因为它的根是在地面上的，因此你在蓝图中可能能看到摄像头正常地放在弹簧臂末端，但是拖进Level里弹簧臂的长度就归零了。因此，我们需要对摄像头SceneCaptureComponent2D进行特殊的碰撞处理。

打开编辑 - 项目设置 - 引擎 - 碰撞，新建一个Object通道，我将其命名为LookCamera，并将默认响应设置成Ignore忽略。之后，在弹簧臂的Detail页面，在摄像机碰撞 - 探头通道中，将通道设置为LookCamera。最后，在蓝图的StaticMesh的Detail面板中，设置其碰撞预设为Custom，并将LookCamera设置为Block阻挡。这样，除了这个StaticMesh，没有物体会与摄像机发生碰撞检测，并且弹簧臂又能检测摄像机和网格体的检测，防止它们相互重叠。
:::

## 数据表格&结构

可以注意到，蓝图里的静态几何体组件并没有捆绑具体的组件，这是为了我们能够方便地复用组件。就好像一个函数，我们传入一个参数，它就能打印“这个参数是：xxx”一样，如果所有可以互动的物体都可以使用这一个蓝图，只是静态网格体不同，我们就可以复用很多代码，并且维护更加方便。

如果我希望这个互动UI上显示：模型，模型名字，模型介绍，那么我们就需要将这些数据统一存放起来，这就是数据表格（DataTable）的作用了。

分别新建如下文件：

- 右键 - 蓝图 - 结构：BP_DTStruture
- 右键 - 其他 - 数据表格 - 从BP_DTStruture选取行结构：BP_DTLook

双击结构BP_DTStruture，我们对结构进行设置。它相当于对整个表的表头进行设置。我们想要的是模型、模型名字、模型介绍，那么我们表头可以这样设置：

- ItemName：文本
- ItemIntro：文本（可以是多行文本）
- ItemModel：静态网格体

![image.png](/static/img/ae41094125fbee0ce26f6b4272d509f6.image.png)

这样我们就得到了一个基本的结构。我们可以为其添加默认值，以防止数据表格里某些行缺少内容导致游戏崩溃。

双击数据表格BP_DTLook，我们已经能够看到对应的表格结构了，接下来我们可以填充文本。我添加了一张桌子，并对其进行了命名、添加了介绍。右键这行，选择重命名，将其命名为`Show_Table`。

![image.png](/static/img/96ee16ff4b0f7b1e06f5bca27f256541.image.png)

## 展示UI

创建一个新的用户控件：UI_LookGUI。

双击蓝图打开，添加如下内容：

- 画布画板
- 右键画布画板 - 包裹 - 背景模糊
- 在画布画板中添加：图像，我将大小设置成了$800 \times 800$。

    ![image.png](/static/img/e1e5e074038bc5daf85b9a18d0e6484b.image.png)

- 在画布画板中添加两个文本，用于显示标题和简介。

全部完成后的实例如下：

![image.png](/static/img/79e1c2263ab0ecd87a7e12afd2cc2bbb.image.png)

# 蓝图构建

## 物品蓝图：BP_Look

### 接口设置

在类设置中添加之前已实现的互动接口Interact，这样我们对它按E就能激活互动。

之后，我们在事件图表中，设置当对其进行互动时，允许打开我们的展示UI：UI_LookGUI。

![image.png](/static/img/3e329cb2f33db80418e7efb2081118bb.image.png)

注意：由于UI并不由Actor类管理，因此我们需要先get player controller，再从它拉出线来创建create widget节点。

### 函数设置

蓝图BP_Look开始时自带了一个函数：`ConstructionScript`，这个构造函数代表了这里面的内容会在该蓝图被创建时执行。我们可以用它来达到获取数据表格中内容的目的。

首先为蓝图创建一个变量，属性为“命名”，名称为`ModelID`,并将其调整为可编辑实例。这样，我们在将蓝图拖入编辑器之后，通过修改ModelID，就能让它自动化地选择使用哪个模型。

![image.png](/static/img/ef4f21fa45501ef4057b549aa904c637.image.png)

之后，为蓝图创建以下函数，并设置为纯函数：

- GetModelTitle
- GetModelIntro
- GetModelMesh

这三个内容都差不多，主要是通过ModelID查询数据表，并返回对应的内容。我们以GetModelTitle为例：

![image.png](/static/img/7d9dc6b1b6a87fe72fcb13cb054ff546.image.png)

最后，我们需要在构造函数中，将蓝图的值设置为数据图表的值。

![image.png](/static/img/5e1b292f66d5851870da35d7f0142e17.image.png)

这样，我们在将这个蓝图拖入编辑器，设置好对应的ModelID之后，它就会自动地变成我们想要的模型。

### SceneCaptureComponent2D

SceneCaptureComponent2D有一个特性，即show only components。它可以允许开发者自由设置这个数组里的元素，并且SceneCaptureComponent2D的摄像机只会捕捉这个元素。我们只需要将show only components设置为仅含有当前蓝图中的static mesh，即可达到只显示当前内容，而不把背景也拍进去的目的。

回到ConstructionScript构造函数，在之后先将show only components清空，再将当前蓝图中的static mesh添加进去。

![](https://rin977.com/static/img/a42c8a3f605780358200541a536b1912.image.png)

最后，我们还需要将渲染的内容投射到一个画布渲染目标（CavasRenderTarget2D）上。右键新建 - 纹理 - 画布渲染目标，创建BP_LookCavas2D。

回到ConstructionScript构造函数，将SceneCaptureComponent2D绑定到BP_LookCavas2D上（节点：setTextureTarget）：

![image.png](/static/img/69e29e77f8f485183ea4c88d6586383e.image.png)

注意：你也可以在SceneCaptureComponent2D的Detail面板中直接指定：

![image.png](/static/img/1a68568c33d431403ee44a60c54f3a6f.image.png)

但是可以注意到，此时捕获到的内容，是含有背景/skybox的。我们显然是希望得到一个干净的背景，因此我们这里引入Material来进行过滤。

右键BP_LookCavas2D，选择创建材质BP_LookCavas2D_Mat，并将其打开。在打开的Material面板中，将材质 - 材质域的值改为“用户界面”。之后，将RGB与最终颜色相连，将A（透明度）取反后与不透明度相连。

![image.png](/static/img/2bdcd5e64e3b659167d129329451444d.image.png)

这样，我们就完成了对背景的过滤，获得了一个干净的桌子的样式。

### UI组件

打开UI组件UI_LookGUI，我们接下来需要将已经处理好的内容放在UI上。

打开它的事件图表，能看到Event Pre Construct和 Event Construct。这两个的作用都是构造函数，主要是变量的创建与否。我们使用Event Construct进行操作。

首先，打开UI后，我们要把光标的显示打开。并且，我们需要禁用用户输入。这是为了防止我们的光标在UI上动的时候，人物的视角也跟着晃动。将Focus Widget设置为Self，Focus机制会在下文“UI聚焦”中解释。

![image.png](/static/img/4be6f7b13b89ed12e99fea99ffa0f381.image.png)

通常来说，我们要对image和文本的值进行初始化，也是要在Construct函数中进行操作的。但是这里我们直接使用绑定功能，从而达到同样的效果。

进入设计器，点击图像组件，在Detail里找到笔刷 - 图像，将图像设置为BP_LookCavas2D_Mat。

在左侧变量中新建变量bp，并将类型直接设置为BP_Look，并勾选“生成时公开”。回到蓝图BP_Look的事件图表中，找到Create UI Look GUI Widget节点，右键刷新，会发现出现了新的Bp引脚。我们将Self传入。

![image.png](/static/img/2432072e3dbd4169ed5210577bfd126e.image.png)

点击标题文本，在内容 - 文本中，点击绑定 - 创建绑定，打开一个新的函数。函数的返回值就是Title的文本内容。在函数中，我们将变量Bp拉入，并使用Get Model Title函数，并将返回值赋给Return Node的返回值中。这样，我们就将被互动的模型的Title信息传入了UI中。详情文本的传入原理也是相同的。

![image.png](/static/img/bd1a4a4a035457dae8e45fce960d14e7.image.png)

完成了之后，基本上一个大致的功能就做好了，接下来就是在UI上让弹簧臂可以对鼠标的动作产生响应。

![image.png](/static/img/a3aa29fc8ac45e9595e1aa7a86ab62bc.image.png)

# UI动作

针对UI的设计可以分为以下几个目标：

- 能够退出UI
- 在UI上能够移动光标检视物品模型
- 在UI上能够滚动滚轮调整摄像头距离

## 函数重载

UI的事件图表允许你对一些鼠标/键盘等的输入动作进行重载，也就是当你触发了这些动作时，它会执行对应重载函数中的组件。

![image.png](/static/img/6ae71a0f7f36e11170332d6999359a0b.image.png)

## UI聚焦

UI是有聚焦这个概念的。好比windows操作系统中的窗口，聚焦（Focus）决定了你是否能够将你的输入传递给你所聚焦的元素上。

然而，如果你手把手地和我一起做到一个步骤，你会发现：有时UI似乎并不会响应你的某些操作。例如，如果我在函数重载中选择将鼠标按键按下的动作重载为一个打印"Mouse Down"的动作：

![image.png](/static/img/103207b0bdd26dfd1609fcb96a1e18d2.image.png)

![image.png](/static/img/4fed8c43a6a56a6aafd238abdfadd4a4.image.png)

当且仅当我点击实际上UI存在的元素（例如Image，以及标题、简介）时，才会有打印出现。如果我点击空白部分，它将不会有任何字符串打印输出。这是因为聚焦机制导致了点击空白部分时，我们的聚焦自动还给了Game，而不是UI组件。然而我们已经设置了SetInputModeUIOnly，导致游戏也无法接收到我们的输入，因此哪里都无法正常工作。

解决方法是，不让空白区域能够转移聚焦，或者说“让空白区域不再空白”。回到设计器，并点击画布画板，在“可视性”中将其设置为“可视”。这样，我们的点击动作就会点击到画布画板上，而画布画板属于UI组件，聚焦就不会还给Game了。

## 退出UI

由于我们设定了SetInputModeUIOnly，不建议使用增强输入系统来绑定退出按键。当然，如果为了UI专门重新写一套增强输入系统，然后在UI打开时切换自然是可以的，但是我们在此简化做法。

回到重载界面，我们使用OnKeyDown，即按键按下时，并对Q键进行按键触发。不使用ESC主要是因为它会导致虚幻引擎游戏预览的弹出。

![image.png](/static/img/ddf13a392a49154f5474317f8fd58ac0.image.png)

## 检视物品

在我的设想中，检视物品的行为应当是这样的：

- 我鼠标正常移动时，它不该进行移动。
- 我长按鼠标移动时，它可以被我拖动。
- 我松开鼠标时，它不再可以被我拖动。

综上所述，我觉得我需要一个锁，长按鼠标时解锁，移动鼠标就能够旋转模型；松开鼠标时上锁，移动鼠标不能够旋转模型。

这时建立一个变量：SpringArmMovable，布尔类型，默认为false。UI的重载允许我们鼠标按下和鼠标松开时进行操作：

![image.png](/static/img/485945f6da6ec453fa1c6d58296483f4.image.png)

以按下为例，可以判定是否为左键，如果是左键即将SpringArmMovable设置为true。松开与其类似，只不过将SpringArmMovable设置为false。

![image.png](/static/img/fe68f7cfc34e34ee64068898bb61e42a.image.png)

锁已上好，接下来考虑如何移动鼠标来完成模型旋转。我们可以在“鼠标移动时”的重载中检查锁，并控制SpringArm的旋转（Rotator）。

![image.png](/static/img/24aaf3583d2b2cfd481c2b2d885cdf9c.image.png)

这个复杂的蓝图就干了以下几件事：

- 检查锁状态，确认是否可以移动
- 获得SpringArm当前的旋转角度
- 获取鼠标Move的Delta角度
- 反转鼠标Y轴的输入以符合用户操作直觉
- 根据鼠标的移动确定模型的旋转量
    - X，即Roll，不改变，直接原值设置
    - Y，即Pitch，是竖直方向的旋转，与鼠标Y轴的值相加。对其大小进行边界限制防止产生视觉错误。
    - Z，即Yaw，是水平方向的旋转，与鼠标X轴的值相加。

如果你认为旋转速度太快了，可以给Cursor Delta再乘一个系数，让它旋转的慢一些。

至此，能够对其进行旋转。

再考虑如何调整SpringArm的长度。重载中也有“鼠标滚轮上”（OnMouseWheel）这样的控件。我们可以通过这个重载来对滚轮的动作进行处理和映射。

![image.png](/static/img/0746a8093b49d943e0655768fef5af1c.image.png)

其中，乘-10是为了更快地切换距离（乘10），因为滚轮只会返回1和-1两个值；并且让上下滚轮与放大缩小的动作更符合操作直觉（乘-1）。


# 总结

至此，我们完成了一个检视物品的蓝图的制作，我们只需要在数据图表中填入我们想要的模型、模型的名字、需要展示的介绍的内容，就可以将蓝图拖入Level，并使用命名来规定对应的数据，非常方便。

并且，其实还有别的功能可以使用，比如我们可以在数据图表中预先填入弹簧臂的相对位置、最大最小的长度，以方便我们进行调用，因为大多数时候我们对弹簧臂的位置还有范围的规定是不适用于所有模型的。

Enjoy Gaming。

从零开始构建游戏：物品展示UI

虚幻引擎的互动系统构建实例，允许人物和场景中的Actor交互。



交互的思路很简单：按下互动按键，判定有没有物体能够互动，判定此物体可不可以互动，开始互动！


# Interface

接口是虚幻中非常重要的操作。你可以将它理解成类似于面向对象编程里的类，或者更简单地将其理解为utils。它被触发时就会调用对应的接口函数，这对代码复用非常有用。

# Line Trace by Channel

Line Trace by Channel是一个非常有意思的特性，它接受起点、终点的坐标，然后进行判定：

- 如果起点到终点的连线上有Actor，那么就将它记录下来甚至返回过来。

假设，我按下互动按钮之后，从我眼睛里射出一道线，到我面前一定范围，如果有物体可以互动，那么就会被这道线击中，我就可以处理它了。

# 构建互动系统

## 增强输入系统

正如我之前所述，增强输入系统是我们使用controller控制游戏的根基。我在这里不再赘述配置的具体方法，将你喜欢的互动键配置上去即可。我的对应的输入动作的名字为`BP_InputInteraction`，触发类型是“已按下”。

## 配置Interface

创建了一个新的蓝图，将其命名为`BPI_InteractInterface`。点开后将其内部的新函数重命名为`interact`。值得注意的是，你可以在这里直接定义interact函数的行为，也可以什么都不做，在你调用这个接口的时候写，这样可以定制每一个蓝图的互动内容。根据需要书写即可，当然也可以写多个函数，按需调用。

创建了一个新的蓝图，将其命名为`BPSM_Table`。打开后，添加静态网格体（Static Mesh）并给了一张桌子。在这个蓝图的上方，点击“类设置”，在右边的“已实现的接口”中添加BPI_InteractInterface。

这样，在BPSM_Table蓝图内部，我们就可以通过event调用接口中的interact函数：

![image.png](/static/img/2d265c347405bb695c795aece29446ab.image.png)

这代表它在接口被调用的时候（即互动时），会打印出对应的字符串。

## 配置增强输入系统

在Character的蓝图中，我们可以使用Line Trace by Channel调用接口。在调用之前，我们需要先对命中的actor进行检查：它是否具有我们的接口？如果有，那么进行接口的调用。

![image.png](/static/img/b4a2886f7f3196fb468f324f56f9598b.image.png)

可以注意到，Line Trace Start和End是被包裹起来的。

- 起点：摄像机当前的位置，
- 终点：摄像机当前的位置 + 摄像机面向方向的向量（是长度为1的单位向量） * 判定范围（Line的长度）

![image.png](/static/img/9fe51a59b1168d2a6a9ff21c7428a4a5.image.png)

![image.png](/static/img/18c4e04016defcc2fe5057e7d5c56a0f.image.png)

# 总结

至此，我们可以对任何装配了interaction接口的物品进行互动，对其按E可以让屏幕中打印出对应的字符串。我们将这个动作替换为其他的内容，就可以完成对场景物品的互动。