位置计算

本节的内容可以参考示例文件"数据看板.Table"中的窗口"径向仪表相对位置计算"。

我们以上一页的六个个径向仪表的排列效果为例说明,看看相对定位的位置计算。

首先假设仪表控件的大小设置为宽600 * 高400,单位为像素。

其次,我们按2行3列的方式排列6个仪表。

基于上面2点,我们开始计算6个仪表的位置。由于仪表大小是按照宽和高中较小的一个值计算的,控件的高400比宽600小,所以我们需要以400像素为基准进行计算。

高400需要排2行,那么我们就按一行占一半考虑,按比例也就是每一行仪表直径为0.5。两行仪表的上下和中间还需要留出一定的间距,综合考虑,每一行仪表直径取0.46,那么每一行仪表半径Radius 属性也就是0.23。

1、添加一个空白径向仪表,把Radius设置为0.23,为了方便查看效果,我们给这个仪表添加一个Rectangle、一个Ellipse、一个Marks

2、仪表的半径为0.23,那么换算为像素就是400*0.23=92,直径就是184。2个仪表直径加起来就是368,仪表之外剩余的空间就是400-368=32,上中下3个间距设置为一样都是32 / 3 ≈ 10.667,换算为比例就是10.667 /400 ≈ 0.0267,加上半径的比例,也就是第一行仪表PointerOriginY值为0.0267 + 0.23 = 0.2567,第二行仪表PointerOriginY 值为0.2567 + 0.23 +0.23+ 0.0267 = 0.7434。

3、接着来计算3列的位置。由于仪表的直径是固定的,所以3列一共占用的宽度为184*3=552,剩余的空间就是600-552=48。3列中间就有2个间隔,加上左右就是4个间隔,那么每个间隔的大小就是48 /4=12像素。那么第一列仪表中心点就是第一个间隔加上半径就是92 + 12= 104,换算为比例就是104/ 600≈0.17333。也就是第一列仪表PointerOriginX  的值是0.17333

以此类推,第二列仪表PointerOriginX的值是:104 + 12 + 184 = 300 / 600 = 0.5;第三列仪表  PointerOriginX 的值是:300+12 + 184 = 496 / 600 = 0.8267

有心的用户应该可以注意到,计算行位置的时候,使用的是把像素转换为比例进行求和计算。而计算列位置的时候是按像素进行求和计算,最后再得出比例。 2种方法都可以计算,但是因为控件高400为小边,仪表是优先按小边计算的,所以小边按比例计算比较方便,而大边的比例是依赖小边的计算结果的,按比例计算稍微麻烦,所以使用像素计算更方便和准确。