美文网首页
适配缩放

适配缩放

作者: 叫我颜先生 | 来源:发表于2019-04-12 18:01 被阅读0次

简介

关于UGUI的一些简单适配


Canvas

  1. OverLay:位于屏幕最上方,遮挡住3D场景以及Camera和World的UI,屏幕大小跟随设备自动匹配
  2. Camera:需要摄像机,屏幕大小跟随设备自动匹配,画布位于摄像机前方固定平面,依据摄像机所选层级进行渲染,可以来显示模型与UI
  3. World:

总结:

  1. OverLay:层级关系默认按照上下关系排序,对于添加了Canvas组件的子物体,可以修改SortOrder来改写遮挡关系
  2. Camera:Canvas的SortingLayer决定了子物体的SortingLayer,子物体可以通过添加Canvas组件修改自身SortingLayer以及OrderInLayer
  3. OverLay之间SortOrder,Camera之间SortingLayer,Camera内部OrderInLayer,OverLay>Camera
  4. 特效同样支持sortingOrder与sortingLayerName,当特效与UI的sortingLayerName一致时,调整特效的sortingOrder可以调整特效在UI中的显示位置,例如特效需要加在A的上面,特效的在orderLayerName一致的情况下,sortingOrder应该大于A的Canvas(从A往上找其父物体,第一个带Canvas的父物体的Canvas就是A的Canvas,A本身可以没有Canvas,此处Canvas类似于NGUI的panel概念)的sortingorder,如果特效要在A,B中间,那么A,B应该在2个不同的Canvas下面,特效的sortingorder也在A,B 2个Canvas的sortingOrder中间
  5. World与Camera类似

CanvasScaler

  1. ConstantPixelSize:像素大小始终不变,ScaleFactor可以控制缩放比例
  2. ScaleWithScreenSize:开发时参考分辨率
    • MatchWidthOr Height:横版高度缩放,竖版宽度缩放
    • Expand:缩放不剪切,屏幕分辨率与设定不同时,选择变化小的方向缩放显示
    • Shrink:缩放剪切,屏幕分辨率与设定不同时,变化打的方向缩放,超出部分剪切不显示
  3. ConstantPhysicalSize:物理相关的= =应用少 不懂

GriphicRaycaster

传递点击事件,确定事件对象
EventSystem负责管理,InputModule负责输入


AspectRatioFitter

使用HorizontalLayGroup实现等距拉伸,但拉伸容易导致图片不是等比例缩放这时候就可以使用AspectMode让高度随着宽度的变化等比例变化


ContentSizeFitter

动态长宽,例如Text输入加上这个组件,就动态改变Text长度

相关文章

  • 适配缩放

    简介 关于UGUI的一些简单适配 Canvas OverLay:位于屏幕最上方,遮挡住3D场景以及Camera和W...

  • 屏幕适配

    这里是画布大小适配的方案 1 .适配的思路, 可利用相机缩放让内容区域缩放到最合适的大小, 然后利用相机移动让内容...

  • WKWebView加载html图片过大

    WKWebView加载html图片过大,将图片缩放适配屏幕方法

  • window缩放150%前端适配

    笔记本缩放125% 150% ...以及 Retina屏前端适配

  • 适配详解

    图片适配、控件适配,xib适配。Masonry //图片适配 //3gs和4的屏幕缩放系数是1. 4s~6s屏幕缩...

  • view

    限制地图范围-需要配合限制地图缩放级别 自适配区域

  • 适配和缩放

    rem适配 1 .rem是css3新增的一个相对单位。是指相对于根元素的字体大小的单位 2 .根节点的font-s...

  • Android屏幕适配之--自定义像素的缩放比例来实现屏幕适配

    Android屏幕适配之--自定义像素的缩放比例来实现屏幕适配 在Android的适配中,可以采用自定义布局的形式...

  • 移动端适配

    移动端适配 1.适配宽高等问题REM方案:改变页面根部的font-size js方案:通过缩放viewport,达...

  • 总结篇(一) -- 基础知识

    移动端适配 使用 标签 这个标签主要作用是网页宽度默认等于屏幕宽度,用户不可以缩放,缩放比例1。 使用 Med...

网友评论

      本文标题:适配缩放

      本文链接:https://www.haomeiwen.com/subject/wzlhwqtx.html