Feature Request | Possibility request for adding a particular word different color in text class

[hiren3897]

I am trying to add color to a single word in the whole text that the user inputs in the Text class. text attribute
but it changes the color of the whole text sentence and I am not finding any possible way to do that

Is it possible to change the color of a particular word in the whole text sentence?
Example: "Welcome to ADVR world" in this sentence inputted by the user I want to add a different color to "ADVR" and rest should be set to white color

I tried this setting props in .set({color: 'red', text: 'ADVR'}) method but it removes the other text and adds only ADVR with red color

I want the whole sentence in white and only ADVR in red.

Is it possible to do that

If Yes, please it would be a great help to me
Thank you in advance.
@gskinner

[danzen]

Hi @hiren3897 - that is something that I am sure we would all love. As far as I know, it is a limitation of text on the canvas. In ZIM (powered by CreateJS) we have a class that breaks words up into their letters and then coloring certain ones would be possible - for example: https://zimjs.com/createjs/textcolor.html. Others may have better answers. Also... this request is in the TweenJS Library and you probably want the EaselJS Library. We can most likely answer it here though. Cheers.

[owendwyer]

Hi Dan,

do you mind me asking a few questions?

When you break up the letters, do you then draw them as bitmap or as SVG?

Also, I'm still having trouble with text resolution. Your text looks clear irrespective of window size; is that something that is handled in the Frame class or in the LabelLetters class?

[hiren3897]

Hi @hiren3897 - that is something that I am sure we would all love. As far as I know, it is a limitation of text on the canvas. In ZIM (powered by CreateJS) we have a class that breaks words up into their letters and then coloring certain ones would be possible - for example: https://zimjs.com/createjs/textcolor.html. Others may have better answers. Also... this request is in the TweenJS Library and you probably want the EaselJS Library. We can most likely answer it here though. Cheers.

Thank you for your help this is what I want exactly.
As I am working on an angular project how can I integrate ZimJs with CreateJs Text class which I am already using in my project
to achieve what I want.
I am taking user input from user in TextArea Element and displaying it on Stage
So is it possible to get the text from the user then use ZIMjs to break and color the required text and then display on stage using createJs @danzen

[danzen]

Sorry folks - missed the messages on this. @owendwyer ZIM has a Label class that is a Container that holds the CreateJS Text object. When we do LabelLetters it is making a Label from each - so a bunch of CreateJS Text objects as vectors (unless cached). The crispness is coming from ZIM Retina which is just accommodating the devicePixelRatio. That is the cause for all that /stage.width stuff messing up CreateJS mouse position, etc. on Adobe export. We have adjusted for that with our version of CreateJS and hope to address it in the master one day.

@hiren3897 - you could look directly at the LabelLetters code and probably use it yourself - it is not too difficult - here is it - there are some ZIM specific things but perhaps you can get the gist of it. Or - go to the ZIM Docs at https://zimjs.com/docs.html and search for labelletters then press VIEW at the bottom of the entry to see the whole thing.

btw... in the next version of ZIM we are providing basic html to be used in the text for a LabelLetters and then parsing that to render color, font, size, underline, italic, bold etc. based on this request and others we have had. Cheers.

        that.labels = [];
	for (var i=0; i<that.numLetters; i++) {
		var letter = label.clone();
		that.labels.push(letter);
		letter.text = label.text[i];
		if (cache) letter.cache();
		letter.regX = align=="left"?0:(align=="right"?letter.width:letter.width/2);
		letter.regY = valign=="top"?0:(valign=="bottom"?letter.height:letter.height/2);
		letter.pos(-letter.width,0,zim.RIGHT, zim.TOP,this);
		letter.loc(null,0,this);
		if (i > 0) letter.mov(spacings[i - 1] ? spacings[i - 1] : 0);
	}