javascript - 如何制作一个可以使用 Raphaël 写字的简单编辑器

Question

我想使用 Raphaël 制作一个新编辑器，然后添加更多想法，

所以第一步，我想用Raphaël实现写字

我能做什么？

有人给我一些想法

谢谢

Answer 1

首先，我不认为在 Raphael 中创建编辑器是最好的主意，标准的 html 和 javascript 就足够了。拉斐尔创造形状并使用SVG (Scalable Vector Graphics)所以这就是为什么我认为这不是最好的主意。但无论如何:

首先您需要熟悉 Raphael documentation 。完成此操作后，您会发现创建您想要的内容实际上非常简单。

1:创建用户将与之交互的 html 元素。

<div id="preview" style="width:100%; height: 300px; border: 1px solid #000;"></div>
<textarea name="textBlock" cols="85" rows="10">Edit your text here</textarea>

2:创建 Raphael 元素，我们最初将文本设置为空字符串。

var paper = Raphael("preview", "100%", "100%");
var t = paper.text("50%", 30, "");

3:将事件附加到您的元素，以便更新它。

$("textarea[name='textBlock']").bind("keyup", function() {
    t.attr({ text: $(this).val() });
});

这就是你想要的。每次按下键盘上的按键时，拉斐尔文本都会更新(当用户将手指从按键上移开时)。正如我之前提到的，如果它是一个像 stackoverflow 上出现的那样的编辑器，那么这不是您想要的最佳方法。存在某些限制，例如文本换行等，需要做更多的工作才能适应此框架。

如果您想查看整个源代码并使用它，jsFiddle here. 上有一个工作版本。