本文实现以下需求：

在UGUI中

Text为动态添加

要使Text字体背景随着Text的长度而变化

之前还在赞叹UGUI的强大

转念一想，UGUI中好像没有可以实现此功能的组件

也想出了一种办法

把背景作为字体的子物体

不过后来想了想

由于UGUI的渲染顺序

字体背景就会遮住字体

故此想法是否定的

仔细了解了一下后

UGUI确实可以实现此功能

首先

字体为子物体，背景图片为父物体是一定的

然后

要使得长度变化

就得在背景图片（父物体）添加组件

Content Size Fitter

Horizontal Fit 设置为Preferred Size

最后

再在背景图片添加组件

Horizontal Layout Group

Child Alignment设为Middle Center

并勾选组件上的Control Child Size的Width

完工

效果如下图：

UGUI 字体背景长度自适应的更多相关文章

  1. 【Python全栈-CSS】CSS实现网页背景图片自适应全屏

    CSS实现网页背景图片自适应全屏 功能:实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动. 以下是用CSS实现的方法: <html> <head> ...

  2. 改变字体大小实现自适应之js方案A

    一.元素大小有两种写法 1.写结果:设计师给的移动端页面sketch设计稿一般是750px宽度,在sublime编辑器里,设置cssrem或rem-unit插件为56px的字体大小.做页面时,设计稿是 ...

  3. 基于html5背景图片自适应代码

    基于html5背景图片自适应代码是一款背景不随滚动条滚动,会根据分辨率不同自动匹配对应的背景图片.效果图如下: 在线预览   源码下载 实现的代码. css代码: .jawbone-hero .jaw ...

  4. 酷炫字体背景图的实现——神奇的background-clip: text

    愉快的时光总是飞快,七天小长假已接近尾声,抓住假期的尾巴,再学个新知识点——css的background-clip: text属性...会不会有种陌生的感觉,毕竟在我们的印象里,background- ...

  5. bootstrop设置背景图片自适应屏幕

    如果不用bootstrop框架,想让背景图片自适应窗口大小,可以这样做: <style type="text/css"> html{height: %;} body.a ...

  6. 前端-CSS-更改标签样式-长宽字体-背景-边框-显示方式-定位-透明度-扩展点-02

    目录 控制标签元素样式 长宽属性.字体属性.文本对齐.文本装饰.首行缩进 背景属性.边框属性.圆角 display 显示方式 盒子模型 margin.padding... float浮动 overfl ...

  7. CSS实现网页背景图片自适应全屏

    一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形 ...

  8. CSS 3. 文本|字体|背景|定位

    1.文本属性和字体属性 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  9. 关于unity3dGUI（uGUI）的一些自适应的收获，在这里跟大家分享一下

    假设大家要转载这篇文章,请注明出处.本人名字叫赖张殷,博客地址为http://my.csdn.net/?c=674f97f953e5dbfdba9fefaa3d1fcbe1 //2017年5月12日改 ...

随机推荐

  1. 开涛spring3(2.2) - IoC 容器基本原理及其helloword

    2.2.1  IoC容器的概念 IoC容器就是具有依赖注入功能的容器,IoC容器负责实例化.定位.配置应用程序中的对象及建立这些对象间的依赖.应用程序无需直接在代码中new相关的对象,应用程序由IoC ...

  2. 模拟实现简化版List迭代器&嵌入List

    1.迭代器(iterators)概念(1)迭代器是一种抽象的设计概念,其定义为:提供一种方法,使他能够按顺序遍历某个聚合体(容器)所包含的所有元素,但又不需要暴露该容器的内部表现方式. (2)迭代器是 ...

  3. Javascript创建类和对象

    现总结一下Javascript创建类和对象的几种方法: 1.原始的创建方法: <script type="text/javascript"> var person = ...

  4. 客户端存储 API

    介绍两个在客户端存储数据的 API localStorage与sessionStorage 两个都是window对象的属性,利用这两个属性,可以在客户端存储一些数据 相比cookie,这种存储方式的优 ...

  5. wampServer 2.5 64位 更改"www 目录"不成功

    已经指到自己新目录了,修改了 apache的httpd.conf里面的内容如下 修改: DocumentRoot "e:/phproot/" 修改: <Directory & ...

  6. LinkedList源码解读

    一.内部类Node数据结构 在讲解LinkedList源码之前,首先我们需要了解一个内部类.内部类Node来表示集合中的节点,元素的值赋值给item属性,节点的next属性指向下一个节点,节点的pre ...

  7. js与jQuery对象相互转换

    // jQuery-->JavaScript 两种方法: $(selector).get(index) ; $(selector)[index]; // JavaScript-->jQue ...

  8. hdu5950

    hdu5950 题意 \(给出 f_1 , f_2 ,以及递推式 f_n = 2 * f_{n-2} + f_{n-1} + n^4 ,求 f_n (mod=2147493647)\) 推导一下. \ ...

  9. 《孵化twitter》读书笔记

    寒假在家看完了第一本书——<孵化twitter:从蛮荒到IPO的狂野旅程>.在2014上半年,尝试看了该书的英文原版,奈何自己英语太菜,实在看不懂.这次有了中文版,就决定要看看.该书对于我 ...

  10. 在Caffe添加Python layer详细步骤

    本文主要讨论的是在caffe中添加python layer的一般流程,自己设计的test_python_layer.py层只是起到演示作用,没有实际的功能. 1) Python layer 在caff ...