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

Activity

1. danzen commented on Oct 27, 2020

   

   danzen

   on Oct 27, 2020

   Contributor

   More actions

   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.

   🎉React with 🎉1Reacted by HIREN RATHOD
2. owendwyer commented on Oct 27, 2020

   

   owendwyer

   on Oct 27, 2020

   More actions

   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?
3. hiren3897 commented on Oct 27, 2020

   

   hiren3897

   on Oct 27, 2020

   Last edited by hiren3897

   Author

   More actions

   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
4. danzen commented on Nov 13, 2020

   

   danzen

   on Nov 13, 2020

   Last edited by danzen

   Contributor

   More actions

   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);
   	}