On cocos creator, I want to show the dialog, in a way like Typed.js. Basically showing the letters as if someone is typing them.
The problem is that I have a Label of a determined width, and, when there is a word near the end of the size of the Label, it starts writing on a line, and finishes writing on another line.
I would like that word to start writing it at the start of the next line, but I don't know how to do it.
The thing that I have tried:
RichText for Cocos creator, to make the part of the sentence that stills needs to be written transparent, but RichText on cocos creator cannot be transparent.
Try to write the word before rendering it, and then check the size of the Label, to see if the dimension has changed, so I will have to set the last word on a new line, but the Label size is not updated until rendered, and I want it before rendering.
Any idea on how to accomplish this?
found a solution, and it's to first put all the words on the scene, without showing them, and then calculate the size of every word, then, calculate at witch word the sentence would break, and add a line break before that word. I don't know if it's the most optimized approach, but it works and I don't know any other way to do it.
Related
Some aspects of HTML5 and especially Canvas seem to have remain in the pre-word-processor software era, in the 60's when only typewriters existed.
(This issue) For one, you can't make a word or a sentence bold, or underline it inside a text on the same pass, simply and efficiently.
Filltext just fills canvas with a single piece of text and a single style and that's it.
(BTW, a second one is the lack of text-justifying function on both sides for canvas, so I had to made such a function myself using JavaScript.
A third, is a bug that prevents changing multiple custom fonts on subsequent canvas operations unless you have pre-use them(!) after initiation (I discovered that workaround after a lot of struggle).
So I'm thinking of two workarounds:
Locate the set of words you want to change the style, calculate the start x,y position and the total length using 'measureText', do the first pass replacing them with spaces, then do a second pass and only write those words with a different style inside the empty space.
Embed 2 or more styles on the same custom font and same language, like they were different languages in Unicode.
Is there another workaround?
I'm asking in case I'm missing something, or someone out there has a decent idea.
I am using a customized textbox which should maintain the same width for a textbox while splitting a long word into a new line (I have modified the solution initially proposed by one of the library's maintainers). You can find the code in the following link.
The _wrapLine function is overridden.
https://jsfiddle.net/njofce/0qfb3snm/
The problem is, when the word is too long, it splits into lines, but the cursor is not correctly positioned.
Any ideas to fix this?
Thanks in advance
I am building a simple WYSIWYG editor, many out there are way to complex to integrate, or does not give the user good feedback.
I can do what I want with the OnSelectionChanged event, but that seems to be too wide of a net, the event fires more often than I want/need. What I would like is an event that fires if say the font changed, or bold changed at the current cursor location.
for example, if I have a line of text "this has a BOLD in the lin^e" and the cursor is at the '^', then click or move the cursor towards the word Bold, I do not need the event to fire until it hits the word that is bolded, or other change (text color, size, style...).
Currently, in the event code, it calls the queryCommandState, and looks to see what parts of the toolbar buttons become highlighted, in this example the "B" gets highlighted, when it hits Bold, just like a normal text editor, like Word.
My concern with the round trip time, looking for a couple of things is not bad, but when I look at all the formatting, (bold, underline, size, color, style...) it starts to add up. I thought about putting an escape hatch in, but it still needs to go through and look at what is the current values and then compare it to the last state, so I do not gain anything.
Is there a better event option than the one i am using, such as some kind of stylechanged event, or an event that fire when it sees a tag change.
Thanks,
Dave
I think that you should revisit your premise that integrating a wysiwyg editor is way too complex and that building one is a reasonable alternative.
I've included one js file from a cdn and added this single line of javascript to transform a textarea into a rich text editor, with nice visual feedback regarding formatting options.
CKEDITOR.replace('editor1');
https://codepen.io/anon/pen/GyWGvY
I'm currently trying to create a speech bubble using FabricJS. The user should be able to write text into it and the text should be inside the speech bubble. I'd post an image, but I don't have enough reputation, yet. So this is basically about fitting text into an image.
What I'm doing is load the image, then create the text and put them both into a group, so the user can move them around together.
However, the problem is: When the text is too long, it'll continue to go outside the bubble instead of having linebreaks.
What I could do now is check the width of the text, and if it is too much, add some line breaks by figuring out words where to use it. I doubt that'd work pretty good though and it isn't very efficient.
Is there another solution for this?
Thank you!
Is there a way in which I can detect when specifically text is being hovered over, rather than the entire div/span?
You can use the event.target that triggered the hover over event, assuming you have access to the event object.
EDIT:
This is overkill, but can be fun:
When you hover over a span/div, you can split all the text in it and wrap each character with span tags that serve LITERALLY no other purpose other than to tell you which word or letter has been hovered over.
I can't see any useful reason to do this, but if you have such a desire, then this is a temporary and relatively quick (text-length depending) way to determine which letter or letters someone is hovering over in a set of text.
I did this for another project where the desire was to trigger a way to do translations of certain specific words in a 'very' length text document so that people learning a language could save words for later translation - if this is close to your context, then this might work, otherwise, please explain more.