Dealing with text

[Matias]

Hello all,
I am using CAAT with excellent results so far. One thing that I'm wondering is if there's an easier way to deal with text.
Currently I am manually calculating word wrap, I don't know how to change the font color, nor how to set a font shadow, etc.

Is there a way that I can use a div with CSS3 styles to create the text, and make it behave like an actor? Mainly because I want it to follow a path by nesting it inside of an ActorContainer.

Thanks in advance,
Matias

[hyperandroid]

I'm about to publish a new CAAT actor type: Label.

This actor allows for free flowing text, either constrained to a fixed width or not, as well as definition for styles.

I'm working on adding anchoring capabilities right now.

You should use it like this:

var label= new CAAT.UI.Label().

                    setBounds( 100,10,500,300).

                    setStyle( "default",    {

                        fontSize    : 32,

                        fill        : '#00b',

                        tabSize     : 100

                    }).

                    setStyle( "hyper", {

                        filled  : false,

                        stroked : true,

                        fontSize: 64,

                        bold    : true,

                        italic  : true,

                        strokeSize : 2,

                        fill    : '#0f0'

                    }).

                    setStyle( "hyper_", {

                        filled  : false,

                        stroked : true,

                        fontSize: 64,

                        strokeSize :.5,

                        stroke    : '#0ff',

                        alignment : "center"

                    }).

                    setStyle( "hyper2", {

                        fontSize: 32,

                        italic  : false,

                        strokeSize :1.5,

                        stroke : '#00b'

                    }).

                    setStyle( "right", {

                        alignment: "right"

                    }).

                    setText("<style=right>abcd<tab>def<tab>ghi</style><br>" +

                            "<style=hyper_>ibon</style><br><br><br>" +

                            "<b>bold<i>italic+bold</i></b><br>"+

                            "12345<fontsize=12>6789 <style=hyper>H<style=hyper2>y</style>p<style=hyper2>e</style>r",

400

                        ).

                    setVerticalAlignment( CAAT.UI.ALIGNMENT.CENTER).

                    setHorizontalAlignment( CAAT.UI.ALIGNMENT.CENTER );

The bounds setting is optional. The label will set its vertical/horizontal alignment to the set bounds.

The second parameter in method setText is optional. If you don't set it, CAAT will calculate automatically text's bounds based on free text flow. If set, the maximum text width will be 400 units and the text will flow differently.

Currently supported styles are:

            this.defaultFS  =   24;

            this.font       =   "Arial";

            this.fontSize   =   this.defaultFS;

            this.fill       =   '#000';

            this.stroke     =   '#f00';

            this.filled     =   true;

            this.stroked    =   false;

            this.strokeSize =   1;

            this.italic     =   false;

            this.bold       =   false;

            this.alignment  =   "left";

            this.tabSize    =   75;

which can be overriden by calling setStyle( "default", { place_your_overriden_styles_here } );

Styles can be nested and will be mixed appropriately.

Let me know if you need some extra text control.

Regards,

- i

[Txus Ordorika]

Hi hyerandroid,

I'm creating a personal web site with this library and it's great. Congrats!

> Let me know if you need some extra text control.

I'd be great if you could define some CSS3 transitions to certain text
and act as CAAT Actor, with those transitions applied. Not necessary,
but it'd save some time, and it's not that much effort.

Thank you
--
Txus Ordorika

"During times of universal deceit, telling the truth becomes a
revolutionary act."
-George Orwell-

[Greg]

Hi Ibon,

Is it possible to apply a drop shadow on a UI Label?

If not, what would you suggest to do?

Thanks,

Greg

[Greg]

I was able to apply a drop shadow but only to the entire canvas not specifically to my actor.

Here is my code:

ps: I am using CoffeeScript

#Alphabet.director.canvas.getContext('2d').save()

Alphabet.director.canvas.getContext('2d').shadowOffsetX = 2

Alphabet.director.canvas.getContext('2d').shadowOffsetY = 2  

Alphabet.director.canvas.getContext('2d').shadowBlur = 5

Alphabet.director.canvas.getContext('2d').shadowColor = "rgba(0, 0, 0, 0.8)"

letter = new Alphabet.Actors.Letter('a')

@scene.addChild letter.label

    

#Alphabet.director.canvas.getContext('2d').restore()

  

The first and last line are commented but with those 2 lines I tried to save the context before applying the drop shadow and restore the context when the letter is added to the scene.

Unfortunately the drop shadow is not applied anymore when I try this solution.

Does anyone has another idea?

Thanks,

Greg

[Igor]

This may be a little late, but I've had to do the same for my app, it works with the following code, however it's probably not exactly the kind of shadow you are expecting:

new CAAT.UI.Label().

            setStyle( "default",    {

                filled  : true,

                stroked : false,

                fontSize: 12,

                fill    : '#fff',

                alignment : 'left',

                font: 'Verdana',

                shadow: true,

                shadowBlur: 8,

                shadowColor: '#fff',

                shadowOffsetY: 8

            })

[hyperandroid]

Shadow is an style attribute.

You can set shadow color and offset.

See latest demos the 35 or 36 not sure which one.

For a label this should be the same than applying shadow for each text.

But, as a general paint method overwrite, you could do the following (w/o messing around with extension mechanism):

'''javascript

actor.__originalPaint= actor.paint;

actor.paint= function( director, time ) {

  var ctx= director.ctx;

  // modify your ctx attributes: shadow, whatever.

  this.__originalPaint( director, time ); 

}

'''

this should be enough to extend any actor paint capabilities.

but you could go further by overwriting CAAT.Foundation.Actor.prototype.paint and make all actors shadow enabled.

will anyway add the feature as Actor feature. 

Thanks.

- i