Toggle组件切换开关,控制开关图片显示与隐藏

时间:2022-09-02 22:56:37

UGUI_Image 组件简单笔记

Rect Transform:用于控制 UI 物体的基本属性

Image 基本使用

1.Image 组件是用于显示图片资源的。
使用方式有两种:1.显示纯粹的颜色;2.指定图片源,用于显示图片。

>注意事项:导入 Unity 内的图片资源,如果是用于 UI 显示的,需要手动将这些
图片的类型修改为“Sprite(2D and UI)”
========================================================
2.组件面板核心属性
Source Image:设置用于显示的图片。
Color:设置用于显示的颜色。
两个“数据源”可以分开使用,也可以同时使用,如果同时时候,颜色会改变图
片的显示色调。如果使用图片,那么颜色就要设置成白色,否则会影响图片效果。
Set Native Size:设置图片以原始尺寸显示。
设置完图片,首先就需要点击一下该按钮,保证图片是原始尺寸比例。

-----------------------------------------------------------------
Image 四种显示方式

  Image Type:图片显示类型
  Simple:简单模式 --> 60%
  Sliced:九宫模式 --> 20%
  Tiled:平铺模式 --> 几乎不会用到
  Filled:填充模式 --> 20%

-----------------------------------------------------------------
1 简单Simple
Preserve Aspect (Simple 和 Filled Image Types 时有效)复选框
图像的高度和宽度保持原始比例, 勾选后图片会等比例进行缩放,不会变形
-----------------------------------------------------------------
2 九宫格/片Sliced

注意:默认的图片是不支持该模式的,需要编辑图片,设置图片的九宫边框。
设置边框的步骤:
  ①Project面板选中图片资源文件->属性区域点击“Sprite Editor”;
  ②在编辑面板,设置图片的 Border 边框数值;
  ③设置完毕后,不要忘记点击 Apply 保存操作。
操作:
设置完毕边框后,对图片进行横向或者纵向拉伸,这个时候图片就会以图片的中
心区域进行拉伸,不会拉伸图片的边框效果。

如图:未进行切片设置

Toggle组件切换开关,控制开关图片显示与隐藏

已进行切片设置

Toggle组件切换开关,控制开关图片显示与隐藏
-----------------------------------------------------------------
3 平铺Tiled 开发中很少用到
如果设置过九宫格,则只会平铺中间的区域
-----------------------------------------------------------------
4 填充Filled
Fill Method 指定图像在动画中填充空间的方式
选项是Horizontal水平方向, 
Vertical垂直方向、 
Radial90度、 
Radial180度 
Radial360度
Fill Origin 填充的起点。依各选项有所不同
选项是各种组合的底部、顶部、左,右,取决于哪个 Fill方法是选定的。
Fill Amount 
当前填充的图像(范围从 0.0到 1.0)的分数。
Clockwise (Filled Image Type only)
填充应按顺时针方向
-----------------------------------------------------------------

Set Native Size
按钮图像框的尺寸大小设置为原始像素的纹理。
Raycat target 射线投射的目标 复选框  (是否接收RAY类型的射线?去掉勾选将不会响应点击事件)
Preserve Aspect 等比缩放(复选框)

下面是开关控制图片显示与隐藏的代码

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI; public class ToggleDemo : MonoBehaviour { private Toggle m_Toggle; void Start () { m_Toggle = gameObject.GetComponent<Toggle>();
m_Toggle.onValueChanged.AddListener(ToggleChanged); m_Toggle.isOn = true; gameObject.transform.Find("Background").GetComponent<Image>().enabled = false; } private void ToggleChanged(bool value)
{
if (true)
{
gameObject.transform.Find("Background").GetComponent<Image>().enabled = true;
}
else
{
gameObject.transform.Find("Background").GetComponent<Image>().enabled = false;
}
} }

Toggle组件切换开关,控制开关图片显示与隐藏的更多相关文章

  1. 4&period;C&num;WinForm基础图片&lpar;显示和隐藏&rpar;

    要求: 软件上有一张图片,默认是隐藏的.用户在文本框中输入身份证号(131226198105223452),点击按钮,如果年龄大于18岁,则显示图片. 知识点: 取当前年份,Date Time Now ...

  2. js鼠标滑动图片显示隐藏效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 教你三种jQuery框架实现元素显示及隐藏动画方式

    摘要:在jQuery框架中对元素对象进行显示和隐藏有三种方式,分别是"默认方式显示和隐藏"."滑动方式显示和隐藏"."淡入淡出显示和隐藏". ...

  4. toggle显示与隐藏切换

    jQuery中显示与隐藏切换toggle方法 show与hide是一对互斥的方法.需要对元素进行显示隐藏的互斥切换,通常情况是需要先判断元素的display状态,然后调用其对应的处理方法.比如显示的元 ...

  5. Mint-ui 中 Popup 作为组件引入,控制弹出框的显示与隐藏遇到的问题。

    Popup组件的结构: <template>   <div>   <!--分享弹出窗 begin-->     <mt-popup class="s ...

  6. jquery里面控制显示和隐藏 &lowbar;&lowbar;&lowbar;土狗toggle

    $("#hide").click(function(){ $("p").hide(); }); $("#show").click(funct ...

  7. 使用 iview Table 表格组件修改操作的显示隐藏

    使用 iview Table 表格组件修改操作的显示隐藏,如下图 1.如何设置 table 操作按后台传入的状态值去渲染 不同的按钮? 解决方法 我们在vue2中,动态渲染html 使用的是 retu ...

  8. jQuery中toggle与slideToggle以及fadeToggle的显示、隐藏方法的比较

    1.区别 ①动画效果的比较: toggle:直接显示.隐藏,如果有[时间参数]且[匹配的元素有宽度属性],则动态效果为左上角-右下角拉卷效果,透明度0-1之间的变化:若有时间参数但是[匹配的元素没有宽 ...

  9. React&plus;Ant Design设置左侧菜单导航路由的显示与隐藏(与权限无关)

    最近在学习react时,用到了很流行的UI框架Ant Design,也了解了一下Ant Design Pro,发现它们都有导航组件,Ant Design框架的导航菜单在这里,Ant Design Pr ...

随机推荐

  1. &period;NET跨平台之旅:corehost 是如何加载 coreclr 的

    在前一篇博文中,在好奇心的驱使下,探秘了 dotnet run ,发现了神秘的 corehost  —— 运行 .NET Core 应用程序的幕后英雄.有时神秘就是一种诱惑,神秘的 corehost ...

  2. Activity的生命周期

    Activity的生命周期 以往我们实现页面间的跳转都是实例化Intent类的对象,但是页面在我们眼前的出现与消失没有我们所看到的那么简单,它有一个复杂的生命周期,一个页面的出现,被覆盖,再次出现,被 ...

  3. &period;NET学习记录2

    前面回忆了一些C#基础语法,简单整理了一下笔记,要想深入研究的话,那就得找一本比较好的书了.接下来继续回忆C#语法知识. 方法 功能:用来复用代码的.当我们在一个程序 中反复的写了同样的代码,那么一般 ...

  4. CSS控制 table 的 cellpadding&comma;cellspacing

    CSS 常规解决办法: 表格的 cellpadding 和 cellspacing 我们经常会用如下的方式来清除默认样式: <table cellspacing="0" ce ...

  5. 这辈子只能碰到一次&excl; 记一次SSL无故被撤消&excl;

    SSL证书刚更新一切都那么正常, 突然有一天网站不能访问了, Chrome浏览器提示有风险, 没有继续访问链接,没有,没有, 重要的事情说三遍, 于是乎赶紧加班查原因, 发展浏览器报的错误是证书撤消( ...

  6. sum&lpar;&rpar; over &lpar;order by &rpar;

    sum(x) over( partition by y ORDER BY z ) 分析 sum(x) over (partition by y order by z) 求安照y分区,然后按z排序,连续 ...

  7. Don&&num;39&semi;t afraid point

    int p; int *p; int p[3]; int *p[3];分析方式:首先从P开始分析,先与[]结合因为其优先级比*高,所以p是一个数组,然后再与*结合,说明数组里的元素是指针类型,然后再与 ...

  8. Android 判断是否能真正上网

    有时候我们连接上一个没有外网连接的WiFi或者有线就会出现这种极端的情况,目前Android SDK还不能识别这种情况,一般的解决办法就是ping一个外网. * @author suncat * @c ...

  9. MySQL查询当天、本周,本月,上一个月的数据

    QUARTER)); ; MONTH),'%Y-%m') select * from user where DATE_FORMAT(pudate,'%Y%m') = DATE_FORMAT(CURDA ...

  10. Ora2Pg的安装和使用

    1. 安装DBI,DBD::Oracle DBI只是个抽象层,要实现支持不同的数据库,则需要在DBI之下,编写针对不同数据库的驱动.对MySql来说,有DBD::Mysql, 而对ORACLE来说,则 ...