I want to replicate the same user experience of writing text in the page as we do in the MS Paint. Like when we click on the raphael page, a box should appear with fixed length and gives room to enter text which should be added to the rahael page dynamically. As the text length increases than the preferred size, it should wraps down same as in MS Paint.
Asked
Active
Viewed 618 times
0
-
Did you try it by yourself? Show your code. – Roman Mar 31 '13 at 13:36
-
@oyatek what i have worked on is to write the text in jquery text box and then display it in the raphael paper. This is far from what i am now trying – user1595858 Mar 31 '13 at 14:32
1 Answers
0
First solution: Create .on('click') event handler to Raphael's container which will create a textarea on place of click. Style this textarea by CSS rules - absolute positioning to a place of click; set width-height; remove borders, make transparent background, to achieve an illusion that you're typing the text directly to Raphael's canvas. Then attach key listener to the textarea (listen "Enter" on "Ctrl+Enter" if you need Enter key for new line breaks). Enter key will create Raphael.Text element.
Second solution: After click on canvas - create a hidden textarea (set CSS {position: absolute; left: -9999px} to hide it, don't use {display: none}). Also create Raphael.Text object on place of click. Then as you type in, text will add to hidden textarea - read its value on each keypress and update Raphael's text object.
Roman
- 3,799
- 4
- 30
- 41
-
-
However, i have issue when there are multiple lines which i posted my question here http://stackoverflow.com/questions/15736485/raphael-multiple-line-in-text-to-shift-downward-rather-than-upward – user1595858 Apr 01 '13 at 01:31
-
I am sure you have got answer by now. but here is another snippet can make it easy - https://github.com/marmelab/Raphael.InlineTextEditing – Mutant Aug 07 '14 at 19:29