html 怎么将定义的锚点位置向下偏移一部分

<map name="Map">

<area shape="rect" coords="200,71,293,140" href="#">

</map>

找到对应的描点，每个描点都有对应的坐标值，例如本类中的200，71，293，140 这几个数字就是坐标，具体改哪个是下就不怎么清楚了，只有你一个一个去改着实验!

UI自适应是前端基础，本文基于官方文档讲解一些常见必备知识点。

参考文档

1、官方文档：UMG布局和视觉设计

2、官方文档：DPI 缩放

一、适配基础 *** 作

1、切换横纵屏 / 预览不同机型适配效果的入口：

在这里插入图片描述

2、在PIE和单机游戏中测试UI的默认设置

在这里插入图片描述

二、锚点和自适应

1、锚点偏移：

固定创建对象位置时锚点应该尽量设置在对象的左上角位置，尽量不要有太大偏移。

以下是设置较大偏移的情况下，相对左侧上侧偏移较大超出屏幕，效果不佳。

在这里插入图片描述

在这里插入图片描述

设置到左上角时，效果正常。

在这里插入图片描述

在这里插入图片描述

2、预设锚点实现自适应停靠/拉伸：

在这里插入图片描述

水平垂直拉伸效果：

在这里插入图片描述

3、手动锚点：实现多个控件彼此锚定

手动修改前：

在这里插入图片描述

修改方法：

按住ctrl，点击锚点进行拖动。

在这里插入图片描述

调整后的效果：

在这里插入图片描述

三、DPI 缩放自适应

UMG 支持与分辨率无关的 UI 进行自动缩放。在 用户界面 部分下的 项目设置 菜单中，提供了应用于每个项目的默认 DPI

缩放规则，这些规则您可以根据具体需求自行配置。你可以通过输入框调整 应用比例（Application Scale），你可以选择

DPI比例规则，以及调整 DPI曲线。

官方示例效果：

在这里插入图片描述

在这里插入图片描述

关于 DPI 缩放规则，您可以将其设为以下四个选项中的一个：

最短边：该选项将基于窗口的最短边来评估缩放曲线（最常用的设置）。

最长边：基于窗口的最长边来评估缩放曲线。

水平：基于窗口的 X 轴来评估缩放曲线。

垂直：基于窗口的 Y 轴来评估缩放曲线。

1、可以加载外部曲线（存取配置信息）

2、可以设置默认屏幕像素比例。

在这里插入图片描述

四、UMG裁剪自适应

UMG中的裁剪系统使用 Slate 裁剪系统 作为框架来控制为控件（或编辑器的其他部分） 显示文本、图像或内容的方式。裁剪

的工作原理是使用边界框将渲染对象（图形和文本）限制在某个区域中，以使超出边界框的任何内容都不显示。

左图 - 未启用裁剪的效果。

中图 - 文本上启用裁剪的效果。

右图 - 按钮上启用裁剪的效果。

在这里插入图片描述

在这里插入图片描述

裁剪方式官方说明：

在这里插入图片描述

五、UMG安全区自适应

安全区（Safe Zone）

控件是开发能在许多不同设备上运行的游戏用户界面（UI）必不可少的组成部分。安全区的用途是避免在技术上能够使用但玩家看不到的地方显示UI，例如电视显示屏的边缘或iPhoneX上的黑色凹槽和主页栏下方的区域。UMG设计器让您可以测试您的UI和所应用的安全区控件在设备上的分辨率（或旋转）效果。

当您将 安全区 控件添加到 设计器 时，该控件将缩放 层级（Hierarchy）

面板中作为其子代的任何其他控件。这些子控件将在出现"不安全"区域时缩放和调整。

---