How to make the shape of middle words in the banner unchange

Help and discussion regarding skinning, themes, and other artistic content.

Moderators: CEGUI MVP, CEGUI Team

iversion
Just popping in
Just popping in
Posts: 18
Joined: Sat Jun 24, 2006 05:03

How to make the shape of middle words in the banner unchange

Postby iversion » Thu Aug 17, 2006 14:26

Now I want to make the image as a banner of the window, which I expect is just like the image as following:
Image

And I divide the banner into three parts: two ends which are very short in length, and the middle one which has some words painted on it.
And I define a widget in the looknfeel by myself:

Code: Select all

<WidgetLook name="TaharezLook/StaticImageBanner">
        <Property name="FrameEnabled" value="False" />
        <Property name="BackgroundEnabled" value="False" />
        <NamedArea name="WithFrameImageRenderArea">
            <Area>
                <Dim type="LeftEdge" ><ImageDim imageset="TaharezLook" image="StaticLeft" dimension="Width" /></Dim>
                <Dim type="TopEdge" ><ImageDim imageset="TaharezLook" image="StaticTop" dimension="Height" /></Dim>
                <Dim type="RightEdge" >
                    <UnifiedDim scale="1" type="RightEdge">
                        <DimOperator op="Subtract">
                            <ImageDim imageset="TaharezLook" image="StaticRight" dimension="Width" />
                        </DimOperator>
                    </UnifiedDim>
                </Dim>
                <Dim type="BottomEdge" >
                    <UnifiedDim scale="1" type="BottomEdge">
                        <DimOperator op="Subtract">
                            <ImageDim imageset="TaharezLook" image="StaticBottom" dimension="Height" />
                        </DimOperator>
                    </UnifiedDim>
                </Dim>
            </Area>
        </NamedArea>
        <NamedArea name="NoFrameImageRenderArea">
            <Area>
                <Dim type="LeftEdge" ><AbsoluteDim value="0" /></Dim>
                <Dim type="TopEdge" ><AbsoluteDim value="0" /></Dim>
                <Dim type="Width" ><UnifiedDim scale="1" type="Width" /></Dim>
                <Dim type="Height" ><UnifiedDim scale="1" type="Height" /></Dim>
            </Area>
        </NamedArea>
        <ImagerySection name="normal">
            <FrameComponent>
                <Area>
                    <Dim type="LeftEdge" ><AbsoluteDim value="0" /></Dim>
                    <Dim type="TopEdge" ><AbsoluteDim value="0" /></Dim>
                    <Dim type="Width" ><UnifiedDim scale="1" type="Width" /></Dim>
                    <Dim type="Height" ><UnifiedDim scale="1" type="Height" /></Dim>
                </Area>
                <Image type="LeftEdge" imageset="TaharezLook" image="BannerLeft" />
                <Image type="RightEdge" imageset="TaharezLook" image="BannerRight" />
                <Image type="Background" imageset="TaharezLook" image="BannerMiddle" />
            </FrameComponent>
        </ImagerySection>
        <StateImagery name="Enabled" >
            <Layer>
                <Section section="normal" />
            </Layer>
        </StateImagery>
        <StateImagery name="Disabled" />
        <StateImagery name="EnabledFrame">
            <Layer>
                <Section look="TaharezLook/StaticShared" section="frame" />
            </Layer>
        </StateImagery>
        <StateImagery name="DisabledFrame">
            <Layer>
                <Section look="TaharezLook/StaticShared" section="frame" />
            </Layer>
        </StateImagery>
        <StateImagery name="EnabledBackground">
            <Layer>
                <Section look="TaharezLook/StaticShared" section="background" />
            </Layer>
        </StateImagery>
        <StateImagery name="DisabledBackground">
            <Layer>
                <Section look="TaharezLook/StaticShared" section="background" />
            </Layer>
        </StateImagery>
    </WidgetLook>


But the effect turn out that the words in the middle one is out of shape. The middle one image is stretched so that that the words become wide.
What I want to know is whether there is ways to keep the shape of the middle one image inchange, and just the two ends image strent to fill the background?
Thank you in advance!

Xirnohn
Not too shy to talk
Not too shy to talk
Posts: 23
Joined: Thu Jun 22, 2006 13:32
Location: Hungary, Debrecen
Contact:

Postby Xirnohn » Thu Aug 17, 2006 16:41

Maybe you can make a new StaticText with the new images. There you can define TextArea and make it Horz and Vert centered.
With this new StaticText you can change the text in the banner.

Xir.


Return to “Skins and Themes”

Who is online

Users browsing this forum: No registered users and 11 guests