Fit FabricJS text into an image (speech bubble) - javascript

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!

Related

Three.js - Dynamically "build/draw" TextGeometry

I want to simulate 3D text being drawn out or built inside my scene. The idea is to take the final score from a game and display it dynamically at the end of the game. If you don't know what I mean, imagine somebody graffiti-ing/tagging some numbers on a wall. The numbers don't pop in like they would if you typed them, but are constructed by building up each number.
Reference for graffiti-ing
I'm pretty sure that I want to use TextGeometry for this but I have absolutely no idea how I would go about making it appear dynamically and there aren't really any examples of this.
My only thought would be to hide each vertex in the TextGeometry and then make each vertex visible with a delay in between but I have no idea if that is anywhere near the right way to do it.
I know that it's possible to animate a line being drawn, but I'm going to need to use TextGeometry as I am using a specific font.
This JSFiddle is a great example of what I want, but with text instead of a line.
I don't have any code for this as I have no idea where to start, thanks in advance for your suggestions, any links/references/code examples are appreciated!

Make paper.js PointText editable with a cursor

I'm using an image annotation tool for a website I'm working on, and I need to type text onto the canvas using the paper.js PointText object. That part is pretty easy. I'd also like to be able to type with a visible cursor, and edit, create/change multiple lines, save it, and edit it again.
It's the part with typing with a cursor and editing in the middle of it that I'm wondering if it is even possible. Right now, I can type and delete letters, but only at the end of the text I've already created. I want to edit in the middle without deleting anything.
I'm not posting much code because my question is theoretical, and I haven't been able to find any code to try, except for the jQuery attribute contentEditable.
$(text).attr('contentEditable');
where text is a paper.PointText(position) object at position event.point.
Thanks!
You can try placing a contenteditable div over the canvas when you click on the PointText.
Here's an example:
http://jsfiddle.net/maitreyjukar/jz9Lu7wf/3/
Currently paper.js does not support word-wrap for PointText. They might provide support for it in AreaText which, hopefully, should be available shortly.

Javascript to outline a png image?

I have a map which is a png file. I use getBoundingClientRect() with 2 div containers to check for overlapping divs througout my game. (Works fine to check for collison).
I was wondering if it's possible to outline a specific part of an image or wherever the transparency starts so I can then add a onclick event to that part of the div so the user cannot click outside of the map.
Hope this kind of makes sense.. If you need any more information let me know. Thanks
I think this is what you are looking for:
http://www.outsharked.com/imagemapster/
You add an area tag with the coords you need, then you can apply something over it. I recommend you this plugin since it's very powerful, easy to use.

Is there a way to add an outline to a shape in x3dom

I just want to put an outline on a box I am hovering over. I remember seeing a tutorial on this before but now I can't seem to find anything on it. Any help would be greatly appreciated!
As far as I know there is no outline attribute for a 3d shape in x3d.
You could maybe do a trick by having two boxes, the second one (the bigger one, maybe different color) being the "outline" of the first one. I would put the two in a Switch node. On mouse over display the bigger one.
Or maybe another solution (easier) is to change the size parameter of your box. You can do this by routing a SFVec3f value to the scale of your box or by writing a bit of javascript code.

Replace blinking text cursor with custom char

I'm creating something like MySQL cmd and to have complete design, I want to replace insertion point (that blinking line) with underline sing. Any tips?
If you were hoping this would be easy, the bad news is that there simply isn't a quick and simple way to do this -- the text cursor is not something you can just change with a couple of lines of javascript or CSS.
If you really want to do this, you're going to need to write your own entire text input system in javascript -- display the cursor yourself, wait for key presses, print them to the screen, handle anything like word-wrapping manually.... it's a fair bit of work.
Fortunately, others have already done this work and made it available to share, so I suggest your best starting point would be to take a look at some existing examples and see how they've done it.
Here's one I found with a quick bit of googling: http://terminal.jcubic.pl/. There are plenty of others you could try as well though.
Hope that helps.
This is what you need to do.
Make input text field invisible, so usable but invisible.
copy its content
render it to another div.
and and add a custom box or whatever...
Styling text input caret
Hide textfield blinking cursor
How about:
textarea{
cursor:url(underlineimage.png),auto;
}
Replace textarea with whatever element you want the cursor to be changed on. You will need to create a custom image of what you want your cursor to look like.

Categories