Using Animator to Resize Text?

[Kilkonie]

I was just toying around and thought this would work:

<canvas height="100" width="500">
&nbsp;&nbsp;<text fontsize="25" height="50" width="300" bgcolor="#ffcccc" resize="true" name="item"
&nbsp;&nbsp;&nbsp;fgcolor="#175DDE" onclick="this.TestResize.doStart()">Where to Begin
&nbsp;&nbsp;&nbsp;&nbsp;<animator name="TestResize" attribute="textsize" from="25" to="5" duration="1000" start="false"/>
&nbsp;&nbsp;</text>
</canvas>

Is there some sort of font invalidation that I'm missing, or is there something even more obvious?

Thanks!

[adam]

There's a little bug in your program:
<animator name="TestResize" attribute="textsize" from="25" to="5" duration="1000" start="false"/>

You meant:
<animator name="TestResize" attribute="fontsize" from="25" to="5" duration="1000" start="false"/>

but sadly, that still won't work because there's a bug with setting fontsize after an LzText has inited. Instead, you want to wrap your text in a view that stretches and effect that view's width and height.

[Kilkonie]

Even if I do this and have a resizable view - what causes the font to have a size relative to its container?

<canvas layout="axis: y">
&nbsp;&nbsp;<view width="300" bgcolor="#666699" height="60" layout="spacing: 30">
&nbsp;&nbsp;&nbsp;<text resize="true" fgcolor="white">
&nbsp;&nbsp;&nbsp;&nbsp;This is a test.
&nbsp;&nbsp;</text>
&nbsp;</view>
</canvas>

This will make a view with text; but the size seems unrelated. Should I be catching some resizement event in the view (making a derived view) and then forcing the text resize? Is there some re-extenting function that I'm missing?

Thanks for your help.

[adam]

You need to tell the view to stretch its contents


<canvas layout="axis: y">
<view width="300" bgcolor="#666699" height="60" stretches="both">


note that you also don't need the layout.

[Grig]

<canvas>

<font src="helmetr.ttf" name="myfont"/>


<view name="tview" height="100" width="100" stretches="both" font="myfont" bgcolor="yellow">
<text name="t" bgcolor="white" resize="true" height="100" width="100">Here's some text.</text>
</view>

<button>Set to current size
<method event="onclick">
canvas.tview.setHeight(tview.height);
canvas.tview.setWidth(tview.width);
</method>
</button>

<button>Resize
<method event="onclick">
canvas.tview.setHeight(50);
canvas.tview.setWidth(50);
</method>
</button>

<simplelayout/>

</canvas>

[senshi]

I don't know if this is useful for your problem, but it shows a way to resize text through animation (see this thread's topic).
I had to create runtime-specific workarounds, as "fontsize" is supposed to be non-editable after <text> creation (it's mainly a problem about adjusting the "height" after "fontsize" has been changed).
In DHTML, you'll see initially some flicker, but after you've once resized your text, OpenLaszlo provides some text caching-mechanism, which remedies this flicker-effect.


<canvas debug="true" >

<class name="mytextclass" extends="text" >
<event name="onfontsize" /><!-- LPP-2273 -->
<method name="setFontSize" args="fs" >
super.setFontSize.apply( this, arguments );
if( this["onfontsize"] ){
this.onfontsize.sendEvent( fs );
}
</method>
</class>

<view>
<simplelayout axis="y" spacing="10" />

<button text="Let it 'grow'" onclick="txt.grow.doStart()" />
<button text="Let it 'shrink'" onclick="txt.shrink.doStart()" />

<mytextclass id="txt" fontsize="8" text="Hello World!" >
<animator name="grow" attribute="fontsize" to="26" duration="1000" start="false" motion="easeboth" />
<animator name="shrink" attribute="fontsize" to="8" duration="1000" start="false" motion="easeboth" />

<handler name="onfontsize" >
var h;
if( $dhtml ){
/* LzTextSprite#getTextfieldHeight() will return a wrong value
* (actually, LzTextSprite won't update the field "fieldHeight" after fontsize has changed)
* as a workaround, we'll directly use LzTextSprite#getTextSize(..)
*/
h = this.sprite.getTextSize( this.text ).height;
} else {
/* single-line text disables flash-autosizing,
* so to get the proper height, we'll temporarily enable autosizing
*/
var mcref = this.sprite.getMCRef();
mcref.autoSize = true;
h = mcref._height;
mcref.autoSize = false;
}
this.setHeight( h );
</handler>
</mytextclass>
</view>

</canvas>

[Grig]

I am writing a 3D text explorer. Currently I just change the font size to make the text smaller, but I get a visual skip in continuity since 1 font size is such a large jump visually. Thx.