VerticalCenter 未按预期工作？

Question

我一直在尝试在 Flex 中的组内布置一些简单的形状，并且我似乎能够构建 VerticalCenter 无法完美居中事物的场景。如果运行下面的代码片段并将 HSlider 向左移动，您应该能够注意到菱形并不总是相对于矩形垂直居中。当菱形略大于矩形时，这一点尤其明显 - 在这种情况下，底部尖端伸出，而顶部尖端则不伸出。

我是否做了一些严重错误的事情，或者我只是违反了像素分辨率？或者还有什么？

希望有任何建议！

谢谢。

后编辑：添加另一个示例，甚至更简单，再次显示这一点。对我来说看起来像像素分辨率...

---- main.mxml ---

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300">

    <s:Group height="{hs.value}" width="80" verticalCenter="0" horizontalCenter="0">
        <s:Rect height="100%" width="100%">
            <s:fill>
                <s:SolidColor color="0x787878"/>
            </s:fill>
        </s:Rect>
        <local:diamond verticalCenter="0" height="100%"/>
    </s:Group>
    <s:HSlider maximum="40" value="30" id="hs"/>
</s:Application>

---- Diamond.mxml ------

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx">

    <s:Group height="100%" verticalCenter="0" scaleY="0.70">
        <s:Path verticalCenter="0"
                data="M 7.847 19.31 
                L 7.842 19.312 
                L 0 11.47 
                L 11.468 0 
                L 15.107 3.64 
                L 15.112 3.638 
                L 22.94 11.467 
                L 11.472 22.935 
                L 7.847 19.31 Z" >
            <s:fill>
                <s:LinearGradient rotation="90" scaleX="49.3475" x="11.47" y="-0.308">
                    <s:GradientEntry color="#FFD500" ratio="0"/>
                    <s:GradientEntry color="#F5A106" ratio="1"/>
                </s:LinearGradient>
            </s:fill>
        </s:Path>
    </s:Group>
</s:Group>

------------------ -------- 新示例 ----------------------

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="600" minHeight="400">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <s:Group horizontalCenter="0" verticalCenter="0" width="80" height="40">
        <s:Rect width="100%" height="100%">
            <s:fill>
                <s:SolidColor color="0xdddddd"/>                
            </s:fill>
        </s:Rect>

        <s:Rect height="33" width="80" verticalCenter="0">
            <s:fill>
                <s:SolidColor color="0xFFFF99"/>
            </s:fill>
        </s:Rect>
    </s:Group>
</s:Application>

内部矩形未在外部矩形中垂直居中。

Answer 1

在上一个示例中，您有一个 40 像素高的组，其中有一个 33 像素高的矩形，中间有 7 个像素，顶部和底部需要除以 2 (3.5)。

Flex 与 Flash 不同，对所有位置数字进行四舍五入，以获得更好的文本可读性和布局。如果您将内部矩形的高度更改为 32，它将完美居中。

本质上，不要使用小数位置。

Answer 2

在此语句中，

<testVerticalCenter:diamond verticalCenter="0" height="100%"/>

您如何定义名称空间 testVerticalCenter？