为什么Flex的SolidColorStroke表演很奇怪？

我必须解决有关Flex框架的SolidColorStroke的问题。该场景很简单，我们有一个可见的对象，我们想要一个边框。我构建了一个绘制Rect的图形组件。这个矩形定义如下为什么Flex的SolidColorStroke表演很奇怪？

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以这种方式工作。如果您需要更多代码，请告诉我。

亲切的问候
马库斯

来源

2012-07-30 mvieghofer

奇数。在Flash Pro中创建的对象的正常渲染或通过绘制API（'drawCircle'等）正好渲染名义边框上的描边;所以在名义边界的任何一边都有50％。请注意，'width'和'height'属性会考虑边界范围。 – 2012-07-31 16:21:19

感谢您的回答，我也认为应该向各方增长50％。我花了大概一天的时间来找出上述解决方案，因为这真是一个奇怪的行为。我需要通过borderThickness * 1.5来扩展宽度和高度。 – mvieghofer 2012-07-31 19:36:35

<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); 
     }

我尝试这样做，没有任何问题，只是给目标，你就会得到边界。

来源

2012-07-31 14:52:00 Alex

<！ - 正常情况下，边界内部增长，因此例如：顶部应该等于中风的重量 - > 这也是我的第一意图。但似乎这没有奏效。我对右侧，左侧，顶部或底部属性也没有任何价值（它们为空）。我只有x和y坐标，宽度和高度。 – mvieghofer 2012-07-31 19:42:43

答案已更新！ – Alex 2012-08-01 06:31:16

谢谢，该方法可行！我仍然不知道中风会增加75％到内侧和25％，但是您的方法可以满足我的需求，而且我比我的版本更喜欢它。 – mvieghofer 2012-08-01 08:34:25

为什么Flex的SolidColorStroke表演很奇怪？

回答

相关问题