253 lines
7.2 KiB
Markdown
253 lines
7.2 KiB
Markdown
|
# fairygui_plugin_gradient_text
|
|||
|
|
|
|||
|
|
## 插件说明
|
|||
|
|
|
|||
|
|
fairygui 插件设置渐变色
|
|||
|
|
|
|||
|
|
编辑器部分基于wxb1990的[fairygui_plugin_gradient_text](https://github.com/wxb1990/fairygui_plugin_gradient_text)插件魔改而成。
|
|||
|
|
|
|||
|
|
运行时代码请拷贝本文档底部代码或参考其自行实现。
|
|||
|
|
|
|||
|
|
支持组件类型如下：
|
|||
|
|
|
|||
|
|
- text
|
|||
|
|
- richtext
|
|||
|
|
- inputtext
|
|||
|
|
- Button
|
|||
|
|
- Label
|
|||
|
|
|
|||
|
|
## 编辑器使用说明
|
|||
|
|
|
|||
|
|
1. 选中组件，在右侧`检查器`面板中可以看到`渐变`一栏，根据自己需求勾选`上下`或`左右`渐变（可都勾选）
|
|||
|
|
|
|||
|
|
2. 设置颜色值后将立即生效，其将影响两处内容：
|
|||
|
|
|
|||
|
|
1. 编辑器中文本的预览颜色
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
2. 自定义数据中会生成对应的json字段（供运行时使用）
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
## 运行时代码
|
|||
|
|
|
|||
|
|
首先我们需要对`GTextField`添加属性和相关方法供外部设置渐变色:
|
|||
|
|
|
|||
|
|
```csharp
|
|||
|
|
namespace FairyGUI
|
|||
|
|
{
|
|||
|
|
/// <summary>
|
|||
|
|
///
|
|||
|
|
/// </summary>
|
|||
|
|
public class GTextField : GObject, ITextColorGear
|
|||
|
|
{
|
|||
|
|
// 其他代码忽略
|
|||
|
|
|
|||
|
|
/// <summary>
|
|||
|
|
/// 渐变色
|
|||
|
|
/// </summary>
|
|||
|
|
public Color32[] gradientColor
|
|||
|
|
{
|
|||
|
|
get => _textField.textFormat.gradientColor;
|
|||
|
|
set
|
|||
|
|
{
|
|||
|
|
var tf = _textField.textFormat;
|
|||
|
|
|
|||
|
|
if (value == null)
|
|||
|
|
{
|
|||
|
|
if (tf.gradientColor == null)
|
|||
|
|
return;
|
|||
|
|
|
|||
|
|
tf.gradientColor = null;
|
|||
|
|
}
|
|||
|
|
else if (tf.gradientColor == value)
|
|||
|
|
{
|
|||
|
|
// do nothing
|
|||
|
|
}
|
|||
|
|
else if (tf.gradientColor == null)
|
|||
|
|
{
|
|||
|
|
tf.gradientColor = new Color32[4];
|
|||
|
|
value.CopyTo(this.gradientColor, 0);
|
|||
|
|
}
|
|||
|
|
else
|
|||
|
|
{
|
|||
|
|
value.CopyTo(this.gradientColor, 0);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
_textField.textFormat = tf;
|
|||
|
|
UpdateGear(4);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/// <summary>
|
|||
|
|
/// 设置四方向渐变色
|
|||
|
|
/// </summary>
|
|||
|
|
public void UpdateGradientColor(Color32 leftTop, Color32 leftBottom, Color32 rightTop, Color32 rightBottom)
|
|||
|
|
{
|
|||
|
|
var tf = _textField.textFormat;
|
|||
|
|
|
|||
|
|
var buffer = tf.gradientColor ??= new Color32[4];
|
|||
|
|
buffer[0] = leftTop;
|
|||
|
|
buffer[1] = leftBottom;
|
|||
|
|
buffer[2] = rightTop;
|
|||
|
|
buffer[3] = rightBottom;
|
|||
|
|
|
|||
|
|
this.gradientColor = buffer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/// <summary>
|
|||
|
|
/// 设置从上到下的渐变色
|
|||
|
|
/// </summary>
|
|||
|
|
public void UpdateVerticalGradientColor(Color32 top, Color32 bottom)
|
|||
|
|
{
|
|||
|
|
UpdateGradientColor(top, bottom, top, bottom);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/// <summary>
|
|||
|
|
/// 设置从左到右的渐变色
|
|||
|
|
/// </summary>
|
|||
|
|
public void UpdateHorizontalGradientColor(Color32 left, Color32 right)
|
|||
|
|
{
|
|||
|
|
UpdateGradientColor(left, left, right, right);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
添加上述代码后，GTextField就允许通过代码直接设置渐变色了，然后我们在相关组件构造时，读取自定义数据，用于还原编辑器中设置的渐变色：
|
|||
|
|
|
|||
|
|
1. 新增工具类`UIUtils`
|
|||
|
|
|
|||
|
|
```csharp
|
|||
|
|
namespace FairyGUI.Utils
|
|||
|
|
{
|
|||
|
|
public static class UIUtils
|
|||
|
|
{
|
|||
|
|
private const string JSON_KEY = "gradient";
|
|||
|
|
private static readonly Regex REGEX = new Regex(@"#([A-Fa-f0-9][A-Fa-f0-9])([A-Fa-f0-9][A-Fa-f0-9])([A-Fa-f0-9][A-Fa-f0-9])");
|
|||
|
|
|
|||
|
|
/// <summary>
|
|||
|
|
/// 初始化文本渐变色
|
|||
|
|
/// </summary>
|
|||
|
|
public static void SetupGradientText(GTextField textField, Dictionary<string, object> jsonObject)
|
|||
|
|
{
|
|||
|
|
if (textField == null)
|
|||
|
|
return;
|
|||
|
|
|
|||
|
|
if (jsonObject == null || !jsonObject.TryGetValue(JSON_KEY, out var jsonValue) || !(jsonValue is string str))
|
|||
|
|
return;
|
|||
|
|
|
|||
|
|
var colors = REGEX.Matches(str);
|
|||
|
|
if (colors.Count != 4)
|
|||
|
|
return;
|
|||
|
|
|
|||
|
|
var top = ParseColor32(colors[0]);
|
|||
|
|
var bottom = ParseColor32(colors[1]);
|
|||
|
|
var left = ParseColor32(colors[2]);
|
|||
|
|
var right = ParseColor32(colors[3]);
|
|||
|
|
|
|||
|
|
textField.UpdateGradientColor(top, bottom, left, right);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
private static Color32 ParseColor32(Match match)
|
|||
|
|
{
|
|||
|
|
var r = byte.Parse(match.Groups[1].Value, System.Globalization.NumberStyles.HexNumber);
|
|||
|
|
var g = byte.Parse(match.Groups[2].Value, System.Globalization.NumberStyles.HexNumber);
|
|||
|
|
var b = byte.Parse(match.Groups[3].Value, System.Globalization.NumberStyles.HexNumber);
|
|||
|
|
return new Color32(r, g, b, 255);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
2. 在相关组件的`Setup_AfterAdd`方法中进行初始化:
|
|||
|
|
|
|||
|
|
```csharp
|
|||
|
|
namespace FairyGUI
|
|||
|
|
{
|
|||
|
|
public class GObject
|
|||
|
|
{
|
|||
|
|
// 省略原有代码
|
|||
|
|
|
|||
|
|
public Dictionary<string, object> dataJsonObject
|
|||
|
|
{
|
|||
|
|
get
|
|||
|
|
{
|
|||
|
|
if (_hasDeserializeDataJsonObject)
|
|||
|
|
return _dataJsonObject;
|
|||
|
|
|
|||
|
|
_hasDeserializeDataJsonObject = true;
|
|||
|
|
|
|||
|
|
var dataStr = data as string;
|
|||
|
|
if (string.IsNullOrEmpty(dataStr))
|
|||
|
|
return null;
|
|||
|
|
|
|||
|
|
try
|
|||
|
|
{
|
|||
|
|
// 这里的dataJsonObject需要大家用自己的json库将data反序列化
|
|||
|
|
_dataJsonObject = JsonUtils.ParseJson(dataStr);
|
|||
|
|
}
|
|||
|
|
catch (Exception)
|
|||
|
|
{
|
|||
|
|
// ignore
|
|||
|
|
_dataJsonObject = null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return _dataJsonObject;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 由于GRichTextField和GTextInput均继承自GTextField 所以无需重复执行
|
|||
|
|
public class GTextField : GObject, ITextColorGear
|
|||
|
|
{
|
|||
|
|
// 省略原有代码
|
|||
|
|
|
|||
|
|
override public void Setup_AfterAdd(ByteBuffer buffer, int beginPos)
|
|||
|
|
{
|
|||
|
|
base.Setup_AfterAdd(buffer, beginPos);
|
|||
|
|
|
|||
|
|
// 省略原有代码
|
|||
|
|
|
|||
|
|
UIUtils.SetupGradientText(this, dataJsonObject);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
public class GButton : GComponent, IColorGear
|
|||
|
|
{
|
|||
|
|
// 省略原有代码
|
|||
|
|
|
|||
|
|
override public void Setup_AfterAdd(ByteBuffer buffer, int beginPos)
|
|||
|
|
{
|
|||
|
|
base.Setup_AfterAdd(buffer, beginPos);
|
|||
|
|
|
|||
|
|
// 省略原有代码
|
|||
|
|
|
|||
|
|
UIUtils.SetupGradientText(GetTextField(), dataJsonObject);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
public class GButton : GComponent, IColorGear
|
|||
|
|
{
|
|||
|
|
// 省略原有代码
|
|||
|
|
|
|||
|
|
override public void Setup_AfterAdd(ByteBuffer buffer, int beginPos)
|
|||
|
|
{
|
|||
|
|
base.Setup_AfterAdd(buffer, beginPos);
|
|||
|
|
|
|||
|
|
// 省略原有代码
|
|||
|
|
|
|||
|
|
UIUtils.SetupGradientText(GetTextField(), dataJsonObject);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
3. 然后运行游戏，即可看到在编辑器中设置的渐变色文本了：
|
|||
|
|
|
|||
|
|
|