书画网站源码,宜昌市建设信息网站,网易云播放器做网站播放,怎样下载做网站的软件前言
Unity3d实现的数字沙盘系统中#xff0c;总有一些图片或者图片列表需要点击后弹窗显示大图#xff0c;这个弹窗在不同尺寸分辨率的图片查看处理起来比较麻烦#xff0c;所以#xff0c;需要图片能够根据容器的大小自适应地进行缩放#xff0c;兼容不太尺寸下的横竖图…前言
Unity3d实现的数字沙盘系统中总有一些图片或者图片列表需要点击后弹窗显示大图这个弹窗在不同尺寸分辨率的图片查看处理起来比较麻烦所以需要图片能够根据容器的大小自适应地进行缩放兼容不太尺寸下的横竖图的展示这个背景下考虑写一个公共的图片查看器能通过接口调起展示图片自动适配尺寸能自动判定高度或者宽度自适应。加入图片的平移和缩放功能以鼠标为中心点缩放查看图片细节。
效果 实现
基于Unity3d自带的UGUI系统来实现使用了DOTweenPro插件作为移动动画的实现核心思路就是将图片根据显示区域和尺寸做高度和宽度的自适应动态的计算高度和宽度进行设置。
单图查看器
根据之前的需求就是对单张图片的预览缩放、平移功能是基本操作核心是自适应高宽的实现。 缩放使用了之前博客实现的“Unity3d UGUI以鼠标位置点为中心缩放图片”,其核心思路就是根据鼠标位置计算图片的轴心点和对应于轴心点保持图片不移动的位置信息让后将这些数值动态的赋值给图片最后根据滚轮前后赋值缩放值。 窗体和图片的拖拽平移使用了之前博客实现的“Unity3d C#实现UGUI的界面可拖拽移动和选中置顶等功能”,其核心思路是依托于EventTrigger组件根据拖拽的事件StartDragDraging等和鼠标点击事件进行相关的界面的位置同步处理即可实现该功能。详情可以移步对应博客查看。
UI搭建
UI的搭建相对简单主要是使用了Image和mask组件用于图片显示和超出范围隐藏同时新增了图片重置和关闭按钮详情如下
动画
构想的动画是通过移动、缩放和透明度动画移动是通过点击图片或者按钮后窗口从触发位置移动到屏幕中间实现代码如下 /// summary/// 设置移入移出位置/// /summary/// param nameSender目标对象/paramprivate void SetMovePos(Transform Sender){ResetImage();if (Sender null){WindTran.localPosition MovePos Vector3.zero;}else{WindTran.position Sender.position;MovePos WindTran.localPosition;}WindTran.DOLocalMove(Vector3.zero, scaleDura);}而缩放的动画使用了DOScale来实现
WindTran.DOScale(Vector3.one * initScale, scaleDura); //修改默认缩放透明度动画是使用CanvasGroup组件来整体控制窗口
cg.DOFade(1, 0.3f);尺寸适应
尺寸的适应采用高宽比的思路如果宽度比 比 高度比高就适配宽度反之则适配高度
float WidRate sp.texture.width / ImgAreaSize.x;
float HeightRate sp.texture.height / ImgAreaSize.y; ;//Screen.height;if (WidRate HeightRate) //适配宽度
{/*float Width ImgAreaSize.x;float Height (ImgAreaSize.x / sp.texture.width) * sp.texture.height ;*/showImgRect.sizeDelta new Vector2(ImgAreaSize.x, (ImgAreaSize.x / sp.texture.width) * sp.texture.height);
}
else //适配高度
{/*float Width ImgAreaSize.y / sp.texture.height * sp.texture.width;float Height ImgAreaSize.y;*/showImgRect.sizeDelta new Vector2(ImgAreaSize.y / sp.texture.height * sp.texture.width, ImgAreaSize.y);
}调起接口
接口申明如下 /// summary/// 接口展示公共弹窗/// /summary/// param namesp预览的Sprite/param/// param nametran弹出的节点/param
public void ShowImgWindow(Sprite sp, Transform tran null)传入预览的Sprite和弹出的节点(用于动画位置计算)即可调起窗口。
多图查看器
上面的单图查看器在使用起来有个问题面对图片列表使用该功能时多个图片查看操作较为繁琐比如同一个Scroll View下的图片查看起来需要点开、关闭、点开、关闭的操作这种情况下需要支持多张图片可以快速下一张上一张的操作。有此需求就需要支持多图查看的功能。多图的UI在单图的基础上新增了两个上一张/下一张的按钮:
多图切换
多图的逻辑是接口处发送多张图片调起多图查看器这时候将多张图放入到列表List中点击上一张、下一张时候直接切换对应的图片即可。
nowIndex idx;
if (!isImg)
{if (sprites null || sprites.Count 0 || idx 0 || idx sprites.Count)return;showImg.sprite sprites[nowIndex];float WidRate sprites[nowIndex].texture.width / ImgAreaSize.x;float HeightRate sprites[nowIndex].texture.height / ImgAreaSize.y; ;//Screen.height;if (WidRate HeightRate) //适配宽度{showImgRect.sizeDelta new Vector2(ImgAreaSize.x, (ImgAreaSize.x / sprites[nowIndex].texture.width) * sprites[nowIndex].texture.height);}else //适配高度{showImgRect.sizeDelta new Vector2(ImgAreaSize.y / sprites[nowIndex].texture.height * sprites[nowIndex].texture.width, ImgAreaSize.y);}NextBtn.SetActive(nowIndex sprites.Count - 1);
}if (isImg)
{if (images null || images.Count 0 || idx 0 || idx images.Count)return;showImg.sprite images[nowIndex].sprite;float WidRate images[nowIndex].sprite.texture.width / ImgAreaSize.x;float HeightRate images[nowIndex].sprite.texture.height / ImgAreaSize.y; if (WidRate HeightRate) //适配宽度{showImgRect.sizeDelta new Vector2(ImgAreaSize.x, (ImgAreaSize.x / images[nowIndex].sprite.texture.width) * images[nowIndex].sprite.texture.height);}else //适配高度{showImgRect.sizeDelta new Vector2(ImgAreaSize.y / images[nowIndex].sprite.texture.height * images[nowIndex].sprite.texture.width, ImgAreaSize.y);}NextBtn.SetActive(nowIndex images.Count - 1);
}LastBtn.SetActive(nowIndex 0);
ResetImage();大致逻辑如上图因为需要兼容Image和RawImage组件所以使用了 List和List两个列表。
调起接口
常用接口是将图片的父节点传入自动区分Image和RawImage组件 /// summary/// 接口展示公共弹窗/// 传入图片列表的父节点适用图片所有都父节点的一级子节点。/// /summary/// param nameparentTran父节点/param/// param nameidx图片的下标(默认0)/param/// param nametran弹出的节点/param
public void ShowImgWindow(Transform parentTran, bool isTypeImg true, int idx 0, Transform tran null)调用代码如下
ImgShowListWindMgr.instance?.ShowImgWindow(sender.transform.parent, true,GetNodeActiveIndex(sender.transform), sender.transform);传入Image列表的接口 //接口展示公共弹窗/// summary/// Image列表预览图片/// /summary/// param nameimgListImage列表/param/// param nameidx图片的下标(默认0)/param/// param nametran弹出的节点/param
public void ShowImgWindow(ListImage imgList, int idx 0, Transform tran null)传入Sprite列表的接口
//接口展示公共弹窗
/// summary
/// Sprite列表预览图片
/// /summary
/// param namespList Sprite列表/param
/// param nameidx图片的下标(默认0)/param
/// param nametran弹出的节点/param
public void ShowImgWindow(ListSprite spList, int idx 0, Transform tran null)传入RawImage列表的接口
//接口展示公共弹窗
/// summary
/// RawImage 列表预览图片
/// /summary
/// param namerimgList RawImage 列表预览图片/param
/// param nameidx图片的下标(默认0)/param
/// param nametran弹出的节点/param
public void ShowRawImgWindow(ListRawImage rimgList, int idx 0, Transform tran null)源码工程
https://download.csdn.net/download/qq_33789001/90036779
