Make paper.js PointText editable with a cursor
“让 paper.js 的 `PointText` 可编辑并带有光标。”
题意:“让 paper.js 的 `PointText` 可编辑并带有光标。”
问题背景:
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.
“我正在为一个网站使用图像注释工具,并且需要使用 `paper.js` 的 `PointText` 对象在画布上输入文本。这部分很简单。我还希望能够显示光标进行输入,并且可以编辑、创建/更改多行、保存并再次编辑。”
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
.
“我没有发布太多代码,因为我的问题是理论性的,除了 jQuery 的 `contentEditable` 属性外,我还没有找到任何可以尝试的代码。”
$(text).attr('contentEditable');
where text
is a paper.PointText(position)
object at position event.point
.
“`text` 是一个位于 `event.point` 位置的 `paper.PointText(position)` 对象。”
Thanks!
问题解决:
You can try placing a contenteditable
div over the canvas when you click on the PointText
.
“你可以尝试在点击 `PointText` 时,在画布上放置一个 `contenteditable` 的 div。”
Here's an example: https://jsfiddle.net/maitreyjukar/jo2mvzu7/latest
“这是一个示例: https://jsfiddle.net/maitreyjukar/jo2mvzu7/latest”
Currently paper.js
does not support word-wrap
for PointText
. They might provide support for it in AreaText
which, hopefully, should be available shortly.
“目前,`paper.js` 不支持 `PointText` 的自动换行功能。他们可能会在 `AreaText` 中提供该支持,预计不久后就会推出。”
更多推荐
所有评论(0)