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>

我认为它应该是这样的（仅用于说明，而不是它应该是什么的精确图像，此插图中的边框正好在对象周围）

enter image description here

但我错了，因为边框确实覆盖了右侧和底部的某些物体部分。我的下一个想法是，边界的笔划不会在组件内部生长，而是在边界的每一侧以相等的部分生长。我的意思是，当它在组件内部生长并将其放置在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％。下图显示了我的意思。 enter image description here

边框内的黄线显示实际边框（当笔划为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);
        }

我尝试了这个并且没有问题，只需发送目标，你就会获得边界。

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

1 个答案: