题意:“让 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` 中提供该支持,预计不久后就会推出。”

Logo

汇聚全球AI编程工具,助力开发者即刻编程。

更多推荐