会议聊天分屏

主要涉及到的是Camera的ViewportRect属性

一个全屏的相机，rect值为：(0, 0, 1, 1)

 

屏幕坐标规则

左下角为起点(0, 0)

右上角为终点(1, 1)

 

相机与屏幕规则基本相同

X, y 即前两个值为屏幕位置，数值范围均为0-1

width, height 即后两个值为相机宽高，数值范围同样是0-1

 

一个相机的rect数值为(0,0,1,1)，即相机原点位于左下角，大小和屏幕相同，也就是全屏

 

需求是多个相机同时存在，左侧一个大的，右侧竖直排列剩余小相机，然后上半部分和右侧部分需要留出空余显示其他UI

 

首先，创建五个相机，为了便于区分，在其下创建canvas，每个相机对应一个canvas

 

 

开始编码：

我想要实现大部分分屏情况，例如：水平排列、竖直排列、固定行数或列数、一大一小、一大多小

其中一大多小，就是这次需要的显示方式

 

先写了一个基类：

using System.Collections.Generic;

using UnityEngine;



public class CameraSortBase

{

    /*

     * 相机参数规则

     * Camera.rect 中有四个参数，x, y, width, height

     * x, y:相机起点，相机左下角那一点的屏幕坐标，屏幕坐标 (左下角)Vector2(0, 0) -> (右上角)Vector2(1, 1)

     * width, height:相机缩放，相对于屏幕大小的缩放，和屏幕相同大小时为(1, 1)

     */



    protected List<Camera> mCameras;

    protected float mScaleX;

    protected float mScaleY;

    protected float mPosX;

    protected float mPosY;



    /// <summary>

    /// 设置所有相机占位总和

    /// </summary>

    public virtual void SetAllScalePos()

    {

        mScaleX = CameraManager.Me.mScaleX;

        mScaleY = CameraManager.Me.mScaleY;

        mPosX = CameraManager.Me.mPosX;

        mPosY = CameraManager.Me.mPosY;

    }



    /// <summary>

    /// 设置相机

    /// </summary>

    public virtual void SetCameras(List<Camera> cameras)

    {

        mCameras = cameras;

    }



    /// <summary>

    /// 修正相机坐标及大小

    /// </summary>

    /// <param name="x">坐标x</param>

    /// <param name="y">坐标y</param>

    /// <param name="width">宽</param>

    /// <param name="height">高</param>

    protected void Correction(ref float x, ref float y, ref float width, ref float height)

    {

        x = x * mScaleX + mPosX;

        y = y * mScaleY + mPosY;

        width = width * mScaleX;

        height = height * mScaleY;

    }

}

 

一共实现了七种排列方式

 

由于需要留空白部分显示其他UI，添加了参数

 

用来控制所有相机占位的总和：

mScaleX 占位宽度

mScaleY 占位高度

mPosX 占位起点X

mPosY 占位起点Y

数值范围均为0-1

 

只需要在设置相机rect值前调用修正方法Correction即可

 

空白部分UI做了简单的适配：

高度固定为1080

宽度计算后获得：

这里是设置上方空白部分和右侧空白部分大小的方法

效果图：

源码不在这里贴了，全放在百度云盘里：

链接：https://pan.baidu.com/s/10rR5dyZXwFGxS5qWPkib9A

提取码：lftx

 

转载请注明出处：

https://blog.csdn.net/qq_28873519/article/details/109852602