【Unity】制作圆形进度条

0. 背景

最近有个在Unity中制作圆环进度条的需求,并在圆中显示进度数值,类似于图1: 

这里写图片描述 
图1. 圆环进度条

平时制作直线的进度条比较多,突然要求做个圆环的有些不适应。不过,这个需求google一下其实大量的解答就出来,关键字"unity circle progress bar",于是我采用了 Unity5 Radial Progress Bar Tutorial HD - YouTube 这个方法,有兴趣的同学可以去看看,接下来我简要叙述一下制作的方法。

1. 制作步骤

a). Unity版本

需求制作使用Unity5的UGUI的新GUI组建(UGUI自Unity4.6版本出现的)。

b). 新建Canvas

a). 在菜单栏GameObject/UI/Canvas,新建Canvas,如图2。 

这里写图片描述 
图2

c). 新建circleProcessBar

b). 同理,在Canvas中新建一个Create/UI/Image中新建一个image,作为Canvas子物体,并命名为circleProcessBar,如图3。 

这里写图片描述 
图3

d). 新建circleProcessBar/process

c). 在circleProcessBar中创建一个image,作为circleProcessBar第一个子物体,并命名为process。这个Image主要的功能是以类似雷达扇形扫描形式,作为圆环进度条最核心的基础GameObject。

I) 在此物体process的Image组件中,设置Source Image为Unity自带的Knob

II) 在Color中随便选择一种颜色,本文中选择

<code class="language-python hljs  has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;">{ <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"R"</span> : <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">37</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"G"</span> : <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">237</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"B"</span> : <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">230</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Alpha"</span> : <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255</span>}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

III) 选择后会出现ImageType属性,分别选

<code class="language-python hljs  has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;">{
    <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"ImageType"</span> : <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Filled"</span>,
    <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"FillMethod"</span> : <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Radial 360"</span>,
    <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"FillOrigin"</span> : <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Top"</span>,
    <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Clockwise"</span> : <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">False</span>
}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li></ul><div class="save_code tracking-ad" data-mod="popu_249" style="box-sizing: border-box; position: absolute; height: 60px; right: 30px; top: 5px; color: rgb(255, 255, 255); cursor: pointer; z-index: 2;"><a target=_blank target="_blank" style="box-sizing: border-box; color: rgb(12, 137, 207);"><img src="http://static.blog.csdn.net/images/save_snippets.png" style="border: none; box-sizing: border-box;" alt="" /></a></div><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li></ul>

如图4所示。

这里写图片描述 
图4

这时候,修改FillAmout属性,就可以做成类似雷达扇形扫描的进度,如图5。但是我们希望是圆环,并不是扇形。 

这里写图片描述 
图5

e). 新建circleProcessBar/innerCircle

d). 在circleProcessBar中再创建一个image,作为circleProcessBar第二个子物体,并命名为innerCircle。该物体的作用是:覆盖前面的process,将扇形进度变成圆环进度。将图3中的Assets中innerCircle.png拖入Image组件的SourceImage中,并将size设置为:

</pre><pre class="prettyprint" name="code" style="white-space: nowrap; word-wrap: break-word; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; margin-top: 0px; margin-bottom: 1.1em; font-family: "Source Code Pro", monospace; padding: 5px 5px 5px 60px; font-size: 14px; line-height: 1.45; word-break: break-all; color: rgb(51, 51, 51); background-color: rgba(128, 128, 128, 0.0470588); border: 1px solid rgba(128, 128, 128, 0.0745098); border-radius: 0px;"><code class="language-python hljs  has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;">{<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"width"</span> : <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">112</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"height"</span> : <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">112</span>}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

f). 新建circleProcessBar/indicator

e). 在circleProcessBar中创建一个Text,作为circleProcessBar第三个子物体,并命名为indicator。 
该物体的用作是:显示圆环进度值。为能够清楚显示,调整indicator的属性。

<code class="language-python hljs  has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;">{
    RectTransform.Size  : {<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"width"</span>: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">160</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"height"</span> : <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">160</span>}
    RectTransform.Scale : {<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"x"</span> : <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.5</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"y"</span> : <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.5</span>}, 
    Character.FontStyle : <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">55</span>,
    Paragraph.Alignment : (<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"center"</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"middle"</span>),
    Color               : {<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"R"</span> : <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">79</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"G"</span> : <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">227</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"B"</span> : <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">139</span>}
}</code>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
 

设置好后,整个hierarchy如图6所示。 

这里写图片描述 
图6

g). 新建circleProcess.cs

f). 新建C#脚本-circleProcess.cs,并拖至物体circleProcessBar,作为其的一个脚本组件。

<code class="language-python hljs  has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;">{<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"width"</span> : <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">112</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"height"</span> : <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">112</span>}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

f). 新建circleProcessBar/indicator

e). 在circleProcessBar中创建一个Text,作为circleProcessBar第三个子物体,并命名为indicator。 
该物体的用作是:显示圆环进度值。为能够清楚显示,调整indicator的属性。

<code class="language-python hljs  has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;">{
    RectTransform.Size  : {<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"width"</span>: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">160</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"height"</span> : <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">160</span>}
    RectTransform.Scale : {<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"x"</span> : <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.5</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"y"</span> : <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.5</span>}, 
    Character.FontStyle : <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">55</span>,
    Paragraph.Alignment : (<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"center"</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"middle"</span>),
    Color               : {<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"R"</span> : <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">79</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"G"</span> : <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">227</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"B"</span> : <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">139</span>}
}</code>

I) 声明在Unity设置的属性:

<code class="language-c# hljs scss has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"><span class="hljs-attr_selector" style="color: rgb(0, 136, 0); box-sizing: border-box;">[SerializeField]</span>
<span class="hljs-attribute" style="box-sizing: border-box;">float</span> speed;

<span class="hljs-attr_selector" style="color: rgb(0, 136, 0); box-sizing: border-box;">[SerializeField]</span>
<span class="hljs-attribute" style="box-sizing: border-box;">Transform</span> processTrans;

<span class="hljs-attr_selector" style="color: rgb(0, 136, 0); box-sizing: border-box;">[SerializeField]</span>
<span class="hljs-attribute" style="box-sizing: border-box;">Transform</span> indicatorTrans;</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li></ul>

II) 设置speed为0.1,processTransproces物体的transform,indicatorTransprocess物体的transform。

III) 编写Update函数,是的环形进度在设置目标进度后SetTargetProcess之后,能够有一段时间的动画。

<code class="language-c# hljs avrasm has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;">// Update is called once per frame
    void Update () {

        if (currentAmout < targetProcess) {
            Debug<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.Log</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"currentAmount:"</span> + currentAmout<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.ToString</span>())<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>

            currentAmout += speed<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
            if(currentAmout > targetProcess)
                currentAmout = targetProcess<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
            indicatorTrans<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.GetComponent</span><Text>()<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.text</span> = ((int)currentAmout)<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.ToString</span>() + <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"%"</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
            processTrans<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.GetComponent</span><Image>()<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.fillAmount</span> = currentAmout/<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">100.0</span>f<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
        }

    }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li></ul>

h). Unity Play

最终的效果如图7所示。 

这里写图片描述 
图7

<code class="language-python hljs  has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;">{<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"width"</span> : <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">112</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"height"</span> : <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">112</span>}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

f). 新建circleProcessBar/indicator

e). 在circleProcessBar中创建一个Text,作为circleProcessBar第三个子物体,并命名为indicator。 
该物体的用作是:显示圆环进度值。为能够清楚显示,调整indicator的属性。

<code class="language-python hljs  has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;">{
    RectTransform.Size  : {<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"width"</span>: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">160</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"height"</span> : <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">160</span>}
    RectTransform.Scale : {<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"x"</span> : <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.5</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"y"</span> : <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.5</span>}, 
    Character.FontStyle : <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">55</span>,
    Paragraph.Alignment : (<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"center"</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"middle"</span>),
    Color               : {<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"R"</span> : <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">79</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"G"</span> : <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">227</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"B"</span> : <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">139</span>}
}</code>
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页