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

本文介绍了如何允许在 raphael 对象中输入文本，比如 rect?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I have created a Raphael rect like below:var rect1 = paper.rect(100,100,100,100)

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

Now, I want that as I click on the rect a cursor appears and user is allowed to type/key in some text

我对 JS 和 Raphael 非常陌生.

I am very very new to JS and Raphael.

推荐答案

这不是 Raphael 的自然用法.主要将其视为绘图库.如果您查看 SVG 规范或任何演示在 RaphaelJS 页面上，你就会明白.

That's not a natural use of Raphael. Think of it primarily as a drawing library. If you look through the SVG specifications or any of the demos on the RaphaelJS page, you'll get the idea.

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

But Raphael integrates naturally with native Javascript or jQuery. I would place a borderless textarea on top of your rectangle and activate (and focus) it when the user clicks on the space, like so:

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/

(请注意，您需要用白色填充矩形以触发点击事件.)

(Note that you need to fill the rectangle with white in order for the click event to fire.)

这篇关于如何允许在 raphael 对象中输入文本，比如 rect?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！