关于 Flex 边框绘制的一个细节

 

以上图片的对应代码：

<s:BorderContainer x="56" y="54" width="300" height="300">
    <s:borderStroke>
        <s:SolidColorStroke color="blue" alpha="1" weight="15" joints="miter" />
    </s:borderStroke>
    <s:Rect width="300" height="300" x="0" y="0">
        <s:stroke>
            <s:SolidColorStroke color="yellow" alpha="0.5" weight="15" joints="miter" />
        </s:stroke>
    </s:Rect>
</s:BorderContainer>

 

 

 

<s:BorderContainer x="578" y="54" width="330" height="330">
   <s:borderStroke>
      <s:SolidColorStroke color="blue" alpha="1" weight="15" joints="miter" />
      </s:borderStroke>
      <s:Rect width="300" height="300" x="0" y="0">
         <s:stroke>
            <s:SolidColorStroke color="yellow" alpha="0.5" weight="15" joints="miter" />
         </s:stroke>
      </s:Rect>
</s:BorderContainer>

 

 

结论：

Flex 中三种描边的方式：

• 采用 flash.display.Graphics 直接绘制
• 采用 mx.graphics.IStroke 设定笔触
• 采用 spark.primitives 包直接指定几何图形

所使用的描边方式都是居中。而 bordercontainer 因为是容器，所以的描边方式是在内部。在绝对位置布局情况下，计算位置时需要注意这个细节.