目录
魔兽世界插件实战笔记从入门到放弃的心理历程 第三节-窗体颜色设置与渐变
在艾泽拉斯路口等风吹
2022年05月23日 13:20
收录于文集
共12篇

魔兽世界插件实战笔记从入门到放弃的心理历程 第三节-窗体颜色设置与渐变

23:31
魔兽世界插件实战笔记-从入门到放弃-第三节-窗体颜色设置与渐变
338
0

先来了解一下魔兽世界中颜色的设定，它采用的是Hex的表示法，这个在网上还不好找，一般都是RGB色谱，先来转换一下吧，要不然你想要那种颜色，也是傻傻分不清。

Hex 怎么转 RGB呢？

例如，FFCC99，，每两个字符代表一个0-255的16进制数，分别表示红，绿，蓝三种颜色。我们可以利用string.sub()函数将其分为3部分，然后用tonumber()将字符串转换为数字，不过注意：

代码块
JavaScript
自动换行
复制代码
hexRed=string.sub("FFCC99", 1, 2)
print(tonumber(hexRed))
复制成功

结果是nil，因为lua语言中，tonumber() 默认用于转换10进制数字。需要第二个参数以指定数制：

代码块
JavaScript
自动换行
复制代码
hexRed=string.sub("FFCC99", 1, 2)
print(tonumber(hexRed, 16))
复制成功

结果是：255

然后就可以写出16进制转换RGB百分比的代码了，用一个函数来表达吧，用起来方便些：

代码块
JavaScript
自动换行
复制代码

function Convert_Hex2RGB(hex)
   local red = string.sub(hex, 1, 2)
   local green = string.sub(hex, 3, 4)
   local blue = string.sub(hex, 5, 6)
   
   red = tonumber(red, 16)/255
   green = tonumber(green, 16)/255
   blue = tonumber(blue, 16)/255
   return red, green, blue
end
复制成功

简单测试一下，在vscode中还是比较直观的，直接可以显示出来颜色：

代码块
JavaScript
自动换行
复制代码
纯蓝色：用RGB原理表示为：[R:0,G:0,B,255]，对应十六进制颜色码就是#0000FF
纯红色：RGB颜色值 [R:255,G:0,B,0] 颜色码：#FF0000
纯绿色：RGB颜色值 [R:0,G:255,B,0] 颜色码：#00FF00
沙黄色：RGB颜色值 [R:255,G:204,B,153] 颜色码：#FFCC99
纯白色：RGB颜色值 [R:255,G:255,B,255] 颜色码：#FFFFFF
纯黑色：RGB颜色值 [R:0,G:0,B,0] 颜色码：#000000
复制成功

代码块
JavaScript
自动换行
复制代码

print(Convert_Hex2RGB("0000FF"))
print(Convert_Hex2RGB("FF0000"))
print(Convert_Hex2RGB("00FF00"))
print(Convert_Hex2RGB("FFCC99"))
print(Convert_Hex2RGB("FFFFFF"))
print(Convert_Hex2RGB("000000"))

输出的结果是：

0,0,1
1,0,0
0,1,0
1,0.8,0.6
1,1,1,
0,0,0
复制成功

颜色搞清楚了，就可以给窗体添加纹理了：

在XML中，说过都是成对出现的表示法，<Texture></Texture>也不例外：

代码块
JavaScript
自动换行
复制代码
<!-- 材质设置 -->
<Texture name="$parentTexture">
       <Size x="198" y="198" />
       <Anchors>
              <Anchor point="TOP" relativePoint="TOP" />
       </Anchors>
       <!-- 也是一样，前三位是颜色，后一位是透明度 -->
       <Color r="0" g="0" b="1" a="0.3" />
</Texture>
复制成功

纹理还可以是两种不同颜色间的渐变。这可以使用<Gradient>标记来设定最小颜色和最大颜色，并以此定义一个渐变效果。

<Gradient>有orientation属性，可以赋值为HORIZONTAL（垂直渐变）或VERTICAL（水平渐变）。默认是ORIZONTAL。标记必须包含两个元素，<MinColor>和<MaxColor>，均为ColorType类型。

仅一个<Gradient>标记并不会创建渐变效果，它必须与<Color>标记结合使用才可以。在渐变效果的每个位置，从Color>标记得到的颜色值与当前的渐变值相乘，来决定屏幕上应当显示什么样的颜色。这样处理最简单的实现方法是具有下面的颜色值。

代码块
JavaScript
自动换行
复制代码

<Color r=”1.0” g=”1.0” b=”1.0” a=”1.0” />
复制成功

这保证了你的渐变值从<MinColor>开始，到<MaxColor>结束，由于每个分量值都为1.0，因此其在相乘时并不改变每个颜色值。

代码块
JavaScript
自动换行
复制代码

<!--$parent是一个通配符，它表示如果在Lua中要引用这个对象，需要加上它的父对象的名称，比如这里的名称就是Lesson_three_FrameTexture-->
<Texture name="$parentTexture">
       <Size x="200" y="100" />
       <Anchors>
              <Anchor point="TOPLEFT" relativePoint="TOPLEFT" />
       </Anchors>
       <Color r="1.0" g="0.0" b="0.0" a="1.0" />
       <Gradient orientation="HORIZONTAL">
              <MinColor r="1.0" g="0.0" b="0.0" a="1.0" />
              <MaxColor r="0.0" g="0.0" b="0.0" a="1.0" />
       </Gradient>
</Texture>
<Texture name="$parentVertical">
       <Size x="200" y="100" />
       <Anchors>
              <Anchor point="BOTTOMLEFT" relativePoint="BOTTOMLEFT" />
       </Anchors>
       <Color r="1.0" g="1.0" b="1.0" a="1.0" />
       <Gradient orientation="VERTICAL">
              <MinColor r="0.0" g="0.0" b="0.0" a="1.0" />
              <MaxColor r="1.0" g="1.0" b="0.0" a="1.0"/>
       </Gradient>
复制成功

虽然这个花里胡哨的，也不一定用到，但是颜色表示法还是需要了解的，因为在插件中，我们会用颜色来区分不同的状态，窗体的设定是Hex模式，其实在lua中实现的时候，都是用的RGB颜色，所以也不用担心。

魔兽世界 插件开发 颜色渐变 窗体颜色
本文为我原创，未经授权禁止转载
cv16749351