Unity中实现ScrollRect 滚动定位到视口内

Demo链接:

https://download.csdn.net/download/qq_41973169/89439428icon-default.png?t=N7T8https://download.csdn.net/download/qq_41973169/89439428

一、前言

Unity版本:2020.1.x

如果需要资源请联系我我会分享给你 因为本人也要存储一下Demo所以上传到这里了但是又不能设置不需要积分

在Unity游戏开发中,滚动视图中元素的定位是一个常见需求。为了解决这个问题,我们可以编写一个名为 "ScrollLocate" 的脚本来实现这个功能。

二、效果 

三、完整代码

代码都有注释逻辑也很简单故不再阐述

using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class ScrollLocate : MonoBehaviour
{
    public RectTransform targetTransform;
    private ScrollRect _scrollRect;
    private RectTransform _scrollRectTransform;
    private RectTransform _contentTransform;
    private RectTransform _viewPortTransform;

    // 测试代码
    public int locateIndex = 1;
    private List<RectTransform> _allTargetRects;
    private void Start()
    {
        _scrollRect = GetComponent<ScrollRect>();
        _contentTransform = _scrollRect.content;
        _viewPortTransform = _scrollRect.viewport;
        _scrollRectTransform = GetComponent<RectTransform>();

        //测试代码
        _allTargetRects = new List<RectTransform>();
        for (int i = 0; i < 20; i++)
        {
            GameObject targetObj = Instantiate(targetTransform.gameObject, _contentTransform.transform);
            Text text = targetObj.transform.GetChild(0).GetComponent<Text>();
            text.text = (i + 2).ToString();
            _allTargetRects.Add(targetObj.GetComponent<RectTransform>());
        }
    }

    //测试代码
    private void Update()
    {
        if (Input.GetMouseButtonDown(0))
        {
            LocateTargetInViewportCenter(_allTargetRects[locateIndex - 1]);
        }
    }

    // 将目标元素定位到视口中心
    void LocateTargetInViewportCenter(RectTransform targetRect)
    {
        // 将目标元素的当前本地坐标转换为滚动视图的局部坐标系中的位置
        Vector3 targetCurrentLocalPosition = _scrollRectTransform.InverseTransformVector(ConvertLocalPosToWorldPos(targetRect));

        // 将视口的当前本地坐标转换为滚动视图的局部坐标系中的位置
        Vector3 viewportCurrentLocalPosition = _scrollRectTransform.InverseTransformVector(ConvertLocalPosToWorldPos(_viewPortTransform));

        // 计算目标元素在滚动视图中的偏移量
        Vector3 offset = viewportCurrentLocalPosition - targetCurrentLocalPosition;
        offset.z = 0.0f;

        // 计算偏移量在滚动视图 normalizedPosition 中的比例
        var normalizedOffset = new Vector2(
            offset.x / (_contentTransform.rect.width - _viewPortTransform.rect.width),
            offset.y / (_contentTransform.rect.height - _viewPortTransform.rect.height)
        );

        // 根据偏移量调整滚动视图的 normalizedPosition
        var newNormalizedPosition = _scrollRect.normalizedPosition - normalizedOffset;

        // 对新的 normalizedPosition 进行边界限制,确保其在合理范围内
        newNormalizedPosition.x = Mathf.Clamp01(newNormalizedPosition.x);
        newNormalizedPosition.y = Mathf.Clamp01(newNormalizedPosition.y);
        _scrollRect.normalizedPosition = newNormalizedPosition;
    }

    // 将目标元素本地坐标转换为世界坐标
    private Vector3 ConvertLocalPosToWorldPos(RectTransform targetRect)
    {
        // 计算目标 RectTransform 中心点在父对象空间中的位置偏移量
        var centerOffset = new Vector3(
            (0.5f - targetRect.pivot.x) * targetRect.rect.size.x,
            (0.5f - targetRect.pivot.y) * targetRect.rect.size.y,
            0f);

        // 将目标元素的本地坐标与偏移量相加,得到世界坐标
        var localPosition = targetRect.localPosition + centerOffset;
        return targetRect.parent.TransformPoint(localPosition);
    }
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

零基础直接上手java跨平台桌面程序,使用javafx(六)查询sqlite数据显示到TableView中

我们使用jdbc查询sqlite的一个表显示到TableView中 在hello-view的onMouseClicked里面填上“openclick2”&#xff0c;然后在HelloController写上openclick2的相关代码FXML protected void openclick2() { }。我们要先配置好sqlite的jdbc驱动&#xff08;略&#xff09;。openc…

【34W字CISSP备考笔记】域1:安全与风险管理

1.1 理解、坚持和弘扬职业道德 1.1.1.(ISC)职业道德规范 1、行为得体、诚实、公正、负责、守法。 2、为委托人提供尽职、合格的服务。 3、促进和保护职业。 4、保护社会、公益、必需的公信和自信&#xff0c;保护基础设施。 1.1.2.组织道德规范 1、RFC 1087 &#xff0…

[大模型]XVERSE-7B-chat WebDemo 部署

XVERSE-7B-Chat为XVERSE-7B模型对齐后的版本。 XVERSE-7B 是由深圳元象科技自主研发的支持多语言的大语言模型&#xff08;Large Language Model&#xff09;&#xff0c;参数规模为 70 亿&#xff0c;主要特点如下&#xff1a; 模型结构&#xff1a;XVERSE-7B 使用主流 Deco…

HTML静态网页成品作业(HTML+CSS+JS)——游戏天天酷跑网页(4个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;使用Javacsript代码实现图片切换轮播&#xff0c;共有4个页面。 二、…

怎么找抖音视频素材?在哪里找爆款热门的素材呢?

在短视频时代&#xff0c;拍摄和分享短视频已经成为一种潮流。但是&#xff0c;许多人都会面临一个问题&#xff0c;那就是——视频素材从哪里来&#xff1f;今天&#xff0c;我将为大家介绍几个优质的网站&#xff0c;让你的视频素材不再愁。 蛙学府&#xff1a;https://www.…

自动化测试git的使用

git是一款分布式的配置管理工具。本文主要讲git如何在自动化测试中安装&#xff0c;上传及拉取下载代码。 1 、git 介绍 每天早上到公司&#xff0c;从公司的git服务器上下载最新的代码&#xff0c;白天在最新的代码基础上&#xff0c;编写新的代码&#xff0c;下班时把“代码…

有趣网站推荐-Rainymood

听着下雨声&#xff0c;内心会平静许多&#xff0c;不知道你是否会有这种感受。 下雨声可以帮助人们放松神经&#xff0c;专注思考&#xff0c;或者只是享受一段安静的时刻&#xff0c;在繁忙的工作和生活间隙。 本期推荐网站Rain Mood 干净简洁的网站&#xff0c;只为听雨声…

C# Winform Chart图表使用和详解

Chart控件是微软自带的一种图形可视化组件&#xff0c;能展示种类丰富的图表形式。如曲线图&#xff0c;折线图&#xff0c;饼状图&#xff0c;环形图&#xff0c;柱状图&#xff0c;曲线面积图。 实例代码链接&#xff1a;https://download.csdn.net/download/lvxingzhe3/8943…

无人机RTMP推流EasyDSS直播平台推流成功,不显示直播按钮是什么原因?

互联网视频云平台/视频点播直播/视频推拉流EasyDSS支持HTTP、HLS、RTMP等播出协议&#xff0c;并且兼容多终端&#xff0c;如Windows、Android、iOS、Mac等。为了便于用户集成与二次开发&#xff0c;我们也提供了API接口供用户调用和集成。在无人机场景上&#xff0c;可以通过E…

numpy的基本操作

1.常用方法创建array print(np.array([1, 2, 3], dtype"f4"))# 32位浮点型 print(np.array([1.5, 2.2, 3]))# 默认浮点型 print(np.array([1, 2, 3, 4, 5], ndmin3))# 3维数组 print(np.array([range(i, i 5) for i in [1, 2, 3]]))# print(np.zeros(shape[5, …

如何部署 Celestia 节点:运行轻节点和全节点

最近几周&#xff0c;Celestia ($TIA) 凭借其模块化数据可用性的基本概念和突破性功能在加密社区引起了轰动。参与网络的方式多种多样&#xff0c;例如将 TIA 与验证器进行质押或在网络上构建应用程序。 用户还可以通过部署节点与区块链进行交互。本指南将解释如何设置和运行 C…

ollama 多模态llava图像识别理解模型使用

参考: https://llava-vl.github.io/ https://ollama.com/blog/vision-models https://blog.csdn.net/weixin_42357472/article/details/137666022 下载: ollama run llava:13bcli使用 图片地址前面空格就行 describe this image: /ai/a1.jpg

<Rust><iced>基于rust使用iced库构建GUI实例:图片的格式转换程序

前言 本专栏是Rust实例应用。 环境配置 平台&#xff1a;windows 软件&#xff1a;vscode 语言&#xff1a;rust 库&#xff1a;iced、iced_aw 概述 本文是专栏第二篇实例&#xff0c;是一个图像格式转换程序&#xff0c;基于rust图像处理库image以及文件处理库rfd。 UI演示&…

分数计算 初级题目

今天继续更题。今天的题目是《第五单元 分数的加减法》初级题目。 定位&#xff1a;题目较为初级&#xff0c;适合预习 参考答案&#xff1a;CACCADACAABACBBCDBCB

day54 动态规划 part10 300.最长递增子序列 674. 最长连续递增序列 718. 最长重复子数组

300.最长递增子序列 动规五部曲 1.dp[i]的定义 dp[i]表示i之前包括i的以nums[i]结尾的最长递增子序列的长度 2.状态转移方程 位置i的最长升序子序列等于j从0到i-1各个位置的最长升序子序列 1 的最大值。 所以&#xff1a;if (nums[i] > nums[j]) dp[i] max(dp[i], dp…

C++ 50 之 继承中的对象模型

继承中的对象模型 在C编译器的内部可以理解为结构体&#xff0c;子类是由父类成员叠加子类新成员而成&#xff1a; #include <iostream> #include <string> using namespace std;class Base03{ public:int m_a; protected:int m_b; private:int m_c; // 哪怕是…

【机器学习】Dify:AI智能体开发平台版本升级

一、引言 关于dify&#xff0c;之前力推过&#xff0c;大家可以跳转 AI智能体研发之路-工程篇&#xff08;二&#xff09;&#xff1a;Dify智能体开发平台一键部署了解&#xff0c;今天主要以dify为例&#xff0c;分享一下如何进行版本升级。 二、版本升级 2.1 原方案 #首次…

《2023-2024中国数据资产发展研究报告》

中国电子信息产业发展研究院发布《2023-2024中国数据资产发展研究报告》&#xff08;下称《报告》&#xff09;&#xff0c;紧跟国家战略部署&#xff0c;调研国内数据资产发展现状&#xff0c;掌握数据价值实现路径&#xff0c;助力释放数字经济新动能。 《报告》从数据资产相…

dotnet new 命令详解

一、简介 dotnet new 命令用于基于指定的模板创建新项目、配置文件、解决方案。 二、常用选项 -o, --output <output>&#xff1a;指定创建项目后放置的目录名 示例&#xff1a; dotnet new console -o MyConsoleApp-n, --name <name>&#xff1a;指定项目的名…

操作系统复习-线程同步

互斥量 两个线程的指令交叉执行互斥量可以保证先后执行称为原子性 原子性是指一系列操作不可被中断的特性这一系列操作要么全部执行完成&#xff0c;要么全部没有执行不存在部分执行部分未执行的情况 互斥锁 互斥量是最简单的线程同步的方法互斥锁&#xff0c;处于两态之一的…