split text with canvas

[fr3d]

Hello,

I am trying to use splitText with text on a canvas. The js is exported from flash CC.

 

(lib.download_free_app = function() {

this.initialize();

 

this.text = new cjs.Text("download free app", "16px 'Proxima Nova Rg'", "#6D1930");

this.text.lineHeight = 16;

this.text.setTransform(88,168);

 

this.addChild(this.text);

}).prototype = p = new cjs.Container();

p.nominalBounds = new cjs.Rectangle(0.3,0,122.2,23.5);

 

 

mySplitText = new SplitText(download_free_app, {type:"chars,words"});

 

I am getting an error:

TypeError: 'undefined' is not a function (evaluating 't.getElementsByTagName("*")')

 

Any idea?

Thank you,

fred

[Carl]

Hi and welcome to the GreenSock forums.

 

SplitText is only designed to work on DOM elements. It relies on many DOM-related calculations and javascript methods to create new text elements and position them properly.

SplitText takes the raw text from an HTML element and breaks it into a bunch of <div> tags with specific css styles applied to ensure proper positioning and display.

 

In the realm of canvas and easelJS, you are using a vastly different set of tools where the fundamental concepts of SplitText simply don't apply. Elements that are drawn onto a canvas don't use CSS for positioning, nor are they technically DOM elements. 

 

In the SplitText docs we try very hard to make it clear how and where SplitText works. 

If you feel there is room for offering more clarity in regards to canvas, please let us know.

[fr3d]

Hi,

I am new with canvas so thank you for the clarification.

fred