Rectangle

Rectangle的定位

通过前面Ellipse的说明，可以看出不管是径向仪表还是线性仪表，他们的形状的定位方法基本是一样的。主要的区别在于，径向仪表是按半径Radius 计算，而线性仪表是按AxisLength 和BaseFactor 进行计算。而Rectangle也是如此，尽管布局里比Ellipse多了一些属性，但是基本对定位没有什么影响。所以这里就不再重复说明，基本可以参考Ellipse的用法。

提示：以下设置使用的相对定位，使用布局组的属性，不要使用ViewPort组的属性。

示例一、径向仪表的Rectangle：

下面示例给给径向仪表添加一个Rectangle形状，使之位于16宫格的左上四个宫格的范围之内，并且Rectangle边框和四宫格边框重叠，效果如图蓝色Rectangle：

1、先设置大小，让形状在中间的四个宫格显示为合适的大小。我们知道四宫格的大小为宽300*高200，单位为像素。仪表半径Radius值为0.46，换算为像素就是400*0.46=184，那么高200换算回比例就是200 / 184 ≈ 1.087 ，按100为比例换算就是108.7。同样的方法计算宽度为300 / 184 ≈ 1.63 * 100 =163.。如下图蓝色Rectangle（Height= 108.7；Width =163)：

再次提示：计算大小的时候，如果是整数，比例参照为半径，也就是100等于半径的长度，如果你用负数设置大小，比例参照则为直径，-1等于直径的长度，也无需强记，总之参照比例不是半径就是直径。

2、然后需要把中心点从A移到B，也就是 CenterPointX需要左移150像素，移动距离为换算为比例就是(184-150) / 368 ≈ 0.0924 ；CenterPointY需要上移100像素，换算为比例就是(184-100) / 368 ≈ 0.2283。

再次提示：CenterPointX和CenterPointY计算时的比例参照为直径，且原点为左上角。

由于仪表相对于仪表控件会有定位控制，而形状相对于仪表又另有定位控制。因此形状的相对定位其实是同时受仪表控件和仪表的位置与大小的影响，所以计算也就麻烦多了。如果我们把仪表整个缩放到左上的四宫格，那么可以设置仪表的PointerOriginX=0.25、PointerOriginY=0.25、Radius=0.25，可得到下图左边的效果。在把蓝色Rectangle的Width设置为300，就是下图右边的效果：

由于形状的宽和高都是受仪表的半径影响的，而仪表的半径又会受仪表控件的大小边影响，所以细心的用户会发现，上面的窗口当改变了大小后，蓝色Rectangle就无法很好的完整显示到四宫格里了。所以如果要实现更好的效果，正方形以及圆形之外的形状定位建议使用线性仪表控制。

示例二、线性仪表的Rectangle：

下面示例给给线性仪表添加一个Rectangle形状，使之位于16宫格的左上四个宫格的范围之内，并且Rectangle边框和四宫格边框重叠，效果如图蓝色Rectangle：

1、同样先设置大小。仪表的高度BaseFactor 为0.82，换算为像素就是400*0.82= 328，四宫格高度为200像素，换算为小数比例就是200 / 328 ≈0.6098，换算为100单位就是60.98；仪表的宽度一样按仪表的BaseFactor进行计算，四宫格宽度为300像素，换算为小数比例就是300 / 328 ≈ 0.9146，换算为100单位就是91.46。所以蓝色Rectangle形状布局里的的Height= 0.6098，Width= 0.9146，效果如下：

2、同样把中心点从A移到B，也就是 CenterPointX 需要左移150像素，仪表的宽度AxisLength 比例是0.9，换算为像素是600*0.9=540，一半就是270，减去150后换算比例就是：(270-150) / 540 ≈ 0.2222；CenterPointY 需要上移100像素，仪表的宽度BaseFactor 比例是0.82，换算为像素是400*0.82=328，一半就是164，减去100后换算比例就是：(164-100) / 328≈ 0.1951；

由于线性仪表的形状一样会同时受到仪表控件和仪表的双重影响，所以当窗口大小发生变化后，形状的大小和位置仍然无法准确的在这个四宫格里完美显示。

下面我们对仪表的大小和位置进行控制，设置仪表的AxisLength=0.5、BaseFactor=0.5、AxisStart=0、BaseOrigin=0，效果如：

这时不管窗口如何变化，上面的形状的定位都完美的跟随四宫格的大小变化。

总结一下：

1、如果要跟随窗口大小进行变化，优先按仪表进行定位控制

2、按仪表定位比按形状定位简单，所以如果不是特别需要，建议先按仪表相对控件定位，再控制里面的形状相对仪表进行定位。

3、如果是宽和高一样的仪表，比如正方形或者是圆形，考虑使用径向仪表。如果是宽和高不一样的仪表，考虑使用线性仪表。