为什么 Flex SolidColorStroke 表现得那么奇怪？

Question

我必须解决一个关于 flex 框架的 SolidColorStroke 的问题。场景很简单，我们有一个可见的对象，我们希望它周围有一个边框。我构建了一个绘制Rect 的图形组件。该 Rect 定义如下

object; // the object which should get the border, defined somewhere outside, 
        // just fyi


var borderThickness:Number = 10;    
rect.x = object.x - borderThickness;
rect.y = object.y - borderThickness;
rect.width = object.width + (borderThickness * 2);
rect.height = object.height + (borderThickness * 2);
rectStroke.weight = borderThickness;

//the MXML code
<s:Rect id="rect">
  <s:stroke>
    <s:SolidColorStroke id="rectStroke" />
  </s:stroke>
</s:Rect>

我认为它应该是这样的（只是为了说明，而不是它应该是什么的确切图像，这个插图中的边框正好在对象周围）

但我错了，因为边框确实覆盖了右侧和底部对象的某些部分。我的下一个想法是，边框的笔画不会在组件内部增长，而是在边框的每一侧等分。我的意思是，当它在组件内部生长并将其放置在 x = 0, y = 0 的位置时，在我的边框左侧示例中，宽度将从 0 到 10。边框越厚得到，它越长到里面，直到只有一个大矩形。

当我说边框的每个部分均等增长时，我的意思是，如果您将矩形放在 x = 0，y = 0 并且边框为 10px 厚，则边框的左侧从 -5 变为 5 . 我希望我的意思很清楚。

所以，正如我之前所说，我认为边框对笔画的两个部分都是一样的。所以我把宽高的计算改成：

rect.width = object.width + borderThickness;
rect.height = object.height + borderThickness;

现在对象的宽度和高度只是增加了borderThickness（每边的一半borderThickness）。我认为现在边框应该完全适合对象（正如我对我的第一个版本所期望的那样......）。

它看起来比第一个版本更好，但仍然覆盖了对象右侧和左侧的一些部分。

经过长时间思考为什么它不能按预期工作后，我找到了一个适合我的解决方案。似乎笔画在两侧没有增长到相等的部分，似乎向内增长了 75%，向外增长了 25%。下图显示了我的意思。

边框内的黄线显示实际边框（当笔划为 1px 时）。您可以看到它现在正好位于笔划的中间，但 75% 来自内部，25% 来自外部。

我的问题是，有人遇到过类似的行为吗？有谁知道为什么会这样。我使用正确吗？还是我做错了什么？

Adobe 的文档并没有真正告诉您 SolidColorStroke 以这种方式工作。如果您需要更多代码，请告诉我。

亲切的问候
马库斯

Answer 1

<s:Group width="250" height="250" x="50" y="50">
    <!--Normally borders grows inside so for ex: top should be equal to -weight of the stroke -->
    <s:Rect top="-10" left="-10" right="-10" bottom="-10">
        <s:stroke>
            <s:SolidColorStroke weight="10" color="0x00FF00"/>
        </s:stroke>
    </s:Rect>

    <s:Rect top="0" left="0" right="0" bottom="0">
        <s:stroke>
            <s:SolidColorStroke weight="1"/>
        </s:stroke>
    </s:Rect>
</s:Group>

AS方法：

        private function drawSimpleBorders(obj:UIComponent, tickness:Number = 5):void
        {
            var gr:Graphics = obj.graphics;

            gr.lineStyle(tickness,0,alpha);

            var k:Number = tickness/2;

            gr.drawRect(-k,-k, obj.width+tickness, obj.height+tickness);
        }

我试过了，没有问题，只需发送目标，你就会得到边框。