質問

Take the following code for a trapezoid class in Flex 4:

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" width="35" height="140">
    <s:Path data="m 0 34
            l 35 -34
            v 140
            l -35 -34">
        <s:stroke>
            <s:SolidColorStroke weight="1" color="0x000000"/>
        </s:stroke>
        <s:fill>
            <s:SolidColor color="0xCCCCCC"/>
        </s:fill>
    </s:Path>
</s:Group>

This produces the following image:

enter image description here

I can see the stroke element around the diagonal edges on the top and bottom, but not along the vertical edges to the left and right. Sorry, I am very new to making custom shapes like this in Flex. What's making the difference here? Thanks!

EDIT:

I haven't had time to look into one of the comments yet. However, a couple of experiments I've run:

1: Changing data to:

"m 1 34
l 33 -34
v 140
l -33 -34"

produced this result:

enter image description here

2: Changing data to:

"m 1 34
l 33 -34
v 140
l -20 -34"

produced this result:

enter image description here

In each of these two cases, the right edge went ahead and showed up, but the left one did not.

EDIT:

It may be worth mentioning that even in Flash Builder 4.6's Designer tab, the left edge is missing.

役に立ちましたか?

解決

Assuming the container Group is clipping its content, @Kodiaks answer is partly correct. However the reason the width should be 36 is not what he describes, but the fact that you have to account for the width of the stroke.
The stroke is drawn with its center over the real border of the shape, so a 1px border would be drawn 0.5px inside the shape and 0.5px outside. In this particular case the width becomes thus 36px (35 + 2*0.5).
You can verify that this is the real reason by setting the border weight to e.g. 4px; you'll see that you'll need a 39px container if you don't want to clip it.

Furthermore, if you don't want the stroke to be clipped on the left hand side, you'll have to draw the shape a bit more to the right (half the weight of the stroke to be exact).

And then there's one more little mistake: you didn't close the shape, causing the left hand border not to be drawn. Simply add a Z at the end of the data and the shape will be closed.

So here's the end result for a shape with border weight '4':

<s:Group width="39" height="140">
    <s:Path data="m 2 34
        l 35 -32
        v 140
        l -35 -34 z">
        <s:stroke>
            <s:SolidColorStroke weight="4" color="0x000000" />
        </s:stroke>
        <s:fill>
            <s:SolidColor color="0xCCCCCC"/>
        </s:fill>
    </s:Path>
</s:Group>

Note: as you can see, I also made some adjustments for the height; otherwise the corners will also be clipped.

他のヒント

If your shape starts at 0 and goes to 35, its width is not 35 but 36, the parent group is not wide enough to display the border strokes.

ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top