如何将动画片段放在textarea上以使其看起来像是文本的一部分?

时间:2022-01-12 19:37:23

Take a look at this demo, how do they accomplish the Inline Changes feature? To me it looks like they are floating a movieclip over the textarea.

看看这个演示,他们如何完成内联更改功能?对我来说,看起来他们正在将一个电影剪辑放在textarea上。

What I can't figure out is how they anchored the movieclip to stay in the correct position. If you type something before the movieclip it moves position along with the text, the movieclips even move to the next line when the text word wraps. Does anyone have an idea?

我无法弄清楚他们是如何将影片剪辑固定在正确位置的。如果在动画片段之前键入内容,它会随文本一起移动位置,当文本词包装时,动画片段甚至会移动到下一行。有没有人有想法?

1 个解决方案

#1


What I think they're doing is keeping track of the index the sprite is representing. Then they have a nice function that moves the sprite to the correct position given the size of the textbox and font. All you need to do after that is bind the positioning function to changes made to the textbox and you've got that effect. Doesn't seem too complicated, as there are already font size/position functions available.

我认为他们正在做的是跟踪精灵所代表的索引。然后他们有一个很好的功能,根据文本框和字体的大小将精灵移动到正确的位置。在此之后您需要做的就是将定位功能绑定到对文本框所做的更改,并且您已经获得了这种效果。似乎没有太复杂,因为已经有可用的字体大小/位置功能。

EDIT: Notice how you cannot type code in between the overlapping regions.

编辑:请注意如何在重叠区域之间键入代码。

#1


What I think they're doing is keeping track of the index the sprite is representing. Then they have a nice function that moves the sprite to the correct position given the size of the textbox and font. All you need to do after that is bind the positioning function to changes made to the textbox and you've got that effect. Doesn't seem too complicated, as there are already font size/position functions available.

我认为他们正在做的是跟踪精灵所代表的索引。然后他们有一个很好的功能,根据文本框和字体的大小将精灵移动到正确的位置。在此之后您需要做的就是将定位功能绑定到对文本框所做的更改,并且您已经获得了这种效果。似乎没有太复杂,因为已经有可用的字体大小/位置功能。

EDIT: Notice how you cannot type code in between the overlapping regions.

编辑:请注意如何在重叠区域之间键入代码。