1

フレックスフレームワークの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になります。境界線が太くなる取得すると、大きな長方形が1つだけになるまで、内側に成長します。

境界線の各部分に均等に成長すると言うとき、つまり、長方形を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がこのように機能することが実際には記載されていません。さらにコードが必要な場合は、お知らせください。

よろしく
マーカス

4

1 に答える 1

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

私はこれを試しましたが、問題はありませんでした。ターゲットを送信するだけで、境界線が表示されます。

于 2012-07-31T14:52:00.660 に答える