爲什麼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表演很奇怪？

回答

相關問題