借用梦想世界宠物属性图
想必大家都在游戏中见过属性图用于展示多种属性的数值,可以较为直观的对比某种属性的缺陷或者是哪种属性有优势。在三维可视化领域也会遇到类似的属性对比,用属性图来展示最为合适。
建造者模式是设计模式的一种,将一个复杂对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示。
属性图组件大致分为底图和线图两个层级,底图分为xy坐标轴和线框,线图可以分为线框和填充物,依据建造者模式的思想,我们可以分为四个部分去建造属性图,然后再统一组合展示。
我们利用接口将建造过程抽象,在实现了该接口的类的DrawRadar方法中将分布建造的内容组合起来。
// 绘制基础
public interface IRadarBase
{
/// 绘制底图线框
VertexHelper DrawBase( VertexHelper vh );
/// 绘制xy坐标
VertexHelper DrawAxis( VertexHelper vh );
}
// 绘制数据线段
public interface IRadarline
{
VertexHelper DrawLine( VertexHelper vh );
}
// 装配操作,将上述分布建造的内容合并
public interface IRadarFactory : IRadarBase , IRadarline
{
VertexHelper DrawRadar( VertexHelper vh , Rect rect ,RadarBaseData radardata );
}
// SpringGUIBase中提供一些公用的绘制方法,可继承或使用实例调用
public class BaseRadarFactory : SpringGUIBase, IRadarFactory
{
public virtual VertexHelper DrawRadar( VertexHelper vh , Rect rect ,RadarBaseData radardata)
{
this.radarData = radardata;
this.radarDatas = this.radarData.Getdata();
this.size = rect.size;
this.origin = new Vector2(-size.x / 2.0f , -size.y / 2.0f);
// 依次调用不同的建造者,进行建造
DrawBase(vh);
DrawAxis(vh);
DrawLine(vh);
return vh;
}
}
通过上一篇 Unity自定义UI组件(十) 折线图中讲解工厂模式,所以在多样化操作中依旧使用工厂模式
public class RadarFactory1 : BaseRadarFactory
{
// 重写父类方法
public override VertexHelper DrawBase(VertexHelper vh)
{
// 重新地图绘制部分,绘制另一种风格的底图
}
}
public class RadarFactory2 : BaseRadarFactory
{
// 重写父类方法
public override VertexHelper DrawLine( VertexHelper vh )
{
// 绘制新的线条样式
}
}
在客户端使用时,我们根据自己需要的类型构造对应的实例。如下:
// 雷达图绘制工厂
private IRadarFactory m_radarFactory
{
get
{
// 获取对应实例,也可以利用反射的方法将其分装,进一步降低耦合使得新的模式的将入更加便捷,可以自己动手实现一下
switch ( radarType )
{
case RadarType.Base:
return new BaseRadarFactory();
case RadarType.Type1:
return new RadarFactory1();
case RadarType.Type2:
return new RadarFactory2();
case RadarType.Type3:
return new RadarFactory3();
case RadarType.Type4:
return new RadarFactory4();
case RadarType.Type5:
return new RadarFactory5();
}
return null;
}
}
对于组件的开发和使用,我们需要明白一个观点,组件一定要有自己固定的数据格式,需要外界转化成对应的数据格式才可以使用,否则人人都将根据自己的需要求该组件的中的代码,而且随着组件的复杂度提升,修改的难度也大幅提升,不符合关闭修改,放开拓展的设计模式。因此需要一个代理/中介者来对数据进行处理并输出对应的数据格式。
利用泛型运行更多类型的输入,方便数据的接入
public void Inject( IList datas )
{
var radardata = RadarDataProxy.Convert2RD(datas);
RadarBaseData.Adddata(radardata);
OnEnable();
}
public void Inject( IList[] datas )
{
var radardatas = RadarDataProxy.Convert2RD(datas);
RadarBaseData.Adddata(radardatas);
OnEnable();
}
利用代理处理数据并返回固定格式,代理利用反射的方法,获取固定类型中某一个属性值或者是字段的值,根据自己的使用情况来做适当的调整。当然你也拓展其他适应自己项目的方法。
public class RadarDataProxy
{
public static RadarData Convert2RD(IList datas)
{
RadarData data = new RadarData();
Type type = typeof(T);
PropertyInfo[] infos = type.GetProperties();
foreach(var v in datas)
{
foreach (var info in infos)
{
if (info.Name.Equals("value"))
data.AddData((float)info.GetValue(v,null));
}
}
return data;
}
public static IList Convert2RD( IList[] datas )
{
IList result = new List();
foreach (var data in datas)
result.Add(Convert2RD(data));
return result;
}
// 拓展适应自己项目的适配方法
}
public class RMExampleData
{
public float value{get;set;}
public RMExampleData(float value)
{
this.value = value;
}
}
IList radarthree = new List()
{
new RMExampleData(0.0f),
new RMExampleData(0.1f),
new RMExampleData(0.2f),
new RMExampleData(0.3f),
new RMExampleData(0.4f),
new RMExampleData(0.5f),
new RMExampleData(0.6f),
new RMExampleData(0.7f),
new RMExampleData(0.8f),
new RMExampleData(0.9f),
new RMExampleData(1f),
};
RadarMap6.Inject(radarthree);
Inspector面板没有重写所以开启来比较杂乱,自己配置一下就熟悉啦,再有不懂评论区留言或者是邮箱我。
更多使用的方法在实例代码中可以看到,实例代码在文章结尾。
- SpringGUI中每个组件都是重新开发的基础方法用来绘制,我逐渐意识到我们可以将常用的方法封装起来作为以后的基类,加快绘制GUI的速度。
- SpringGUI中的组件基本都不具有与输入设备交互的属性,我将会注重交互这个部分为后续的组件添加与输入设备交互的功能。
- Unity自定义UI组件(十) 折线图
- Unity自定义UI组件(九) 颜色拾取器(下)
- Unity自定义UI组件(八) 颜色拾取器(上)
- Unity自定义UI组件(七)渐变工具、渐变色图片、渐变遮罩
- Unity自定义UI组件(六)日历、日期拾取器
- Unity自定义组件之(五) 目录树 UITree
- Unity自定义UI组件(四)双击按钮、长按按钮
- Unity自定义UI组件(三)饼图篇
- Unity自定义UI组件(二)函数图篇(下)
- Unity自定义UI组件(一)函数图篇(上)
- [Unity]PureMVC框架解读(下)
- [Unity]PureMVC框架解读(上)
- Github :https://github.com/ll4080333/UnityCodes
- CSDN : http://blog.csdn.net/qq_29579137
- 博客专栏 : http://blog.csdn.net/column/details/16329.html
- QQ群 : 593906968 有什么不懂的可以加群咨询互相学习
如果你想了解UGUI的更多拓展组件,欢迎关注我的博客,我会持续更新,支持一下我这个博客新手。如果以上文章对你有帮助,点个赞,让更多的人看到这篇文章,我们一起学习。如果有什么指点的地方欢迎在评论区留言,秒回复。