raphael - 如何允许在 raphael 对象中输入文本，比如 rect？

Question

我创建了一个 Raphael 矩形，如下所示： var rect1 = paper.rect(100,100,100,100)

现在，我希望当我单击矩形时会出现一个光标，并且允许用户键入/键入一些文本

我对 JS 和 Raphael 非常陌生。

Answer 1

这不是拉斐尔的自然用途。主要将其视为绘图库。如果您查看SVG 规范或 RaphaelJS 页面上的任何演示，您就会明白这一点。

但 Raphael 自然地与原生 Javascript 或 jQuery 集成。我会在您的矩形顶部放置一个无边框文本区域，并在用户单击该空间时激活（并聚焦）它，如下所示：

var paper = Raphael("canvas", 300, 300),
    rect1 = paper.rect(100,100,100,100).attr({fill: "#FFF"});

rect1.click(function(e) {
   $('#text').show(); 
   $('#text').focus(); 
});
​

http://jsfiddle.net/NtKKZ/

（请注意，您需要用白色填充矩形才能触发 click 事件。）