使用 Raphaeljs 进行矩形的 Onclick 事件答案

【问题标题】：Onclick event for rect using Raphaeljs使用 Raphaeljs 进行矩形的 Onclick 事件
【发布时间】：2014-10-28 01:28:48
【问题描述】：

我正在尝试绘制一个带有一些文字的简单矩形。由于形状上不能有文本，我正在为文本和矩形对象创建一个具有相同坐标的集合。我需要在 onclick 事件上更改一些内容。因此，我使用了 obj.node.onclick = 语句并编写了一个处理程序。我的问题是，如果文本对象用于 onclick，则仅当我单击文本时才会调用事件处理程序。如果我使用 rect 进行 onclick，我必须只点击边框区域。我的要求是点击可以连同其中的文字一起出现在形状的整个区域。

   var paper = Raphael(10, 10, 320, 200);
var group = paper.set();
var c1 = paper.path("M35 60 L35 90");
var c2 = paper.rect(10, 10, 50, 50,10);
group.push(c2);
group.push(paper.text(35, 35, "Hello"));

c2.attr("fill", "blue");
c2.node.onclick = function () { c2.attr("fill", "red");};

我尝试使用 div 覆盖在矩形上并在其上写入文本但没有成功。我可以在萤火虫中看到 div，但在网页上看不到！我已经为它提供了左上角宽度和高度的样式属性，并将位置声明为绝对位置。但没有成功。

请帮我解决这个问题。任何帮助表示赞赏！卡维塔

我尝试使用前层后层解决方案。我克隆了 backlayer 并向它添加了一个点击处理程序。我根本没有使用“这个”。该事件从未被解雇！请在这件事上给予我帮助！卡维塔

【问题讨论】：

标签： javascript jquery raphael

【解决方案1】：

为按钮中的所有元素创建一个集合。然后向组中添加一个单击（或 mouseup）处理程序。请注意，矩形必须有填充，否则它们不会获得鼠标事件。对于透明按钮，请使用 opacity 0。

var paper = Raphael(10, 10, 320, 200);
var group = paper.set();
var COLOR_NORMAL = 'blue';
var COLOR_HOVER = 'red';
var background = paper.rect(10, 10, 50, 50,10).attr({
    fill: COLOR_NORMAL
});
var label = paper.text(35, 35, "Hello");

group.push(background);
group.push(label);

group.attr({
    cursor: 'pointer',
}).mouseover(function(e) {
    background.attr('fill', COLOR_HOVER);
}).mouseout(function(e) {
    background.attr('fill', COLOR_NORMAL);
}).mouseup(function(e) {
    alert("clicked");
});

【讨论】：

【解决方案2】：

这里有两种方法可以做到这一点。在他们两个中，我只是为文本添加了一个 onclick。换句话说，矩形和文本的 onclick 相同。

1) 只需在末尾添加这一行

group[group.length - 1].node.onclick = function () { c2.attr("fill", "red");};

2) 或者，您可以创建另一个变量 c3，如 c2，并以相同的方式附加 onclick。这是您所有代码的外观。

var paper = Raphael(10, 10, 320, 200);
var group = paper.set();
var c1 = paper.path("M35 60 L35 90");
var c2 = paper.rect(10, 10, 50, 50,10);
var c3 = paper.text(35, 35, "Hello").attr({"font-size":36});
group.push(c2);
group.push(c3);

c2.attr("fill", "blue");
c2.node.onclick = function () { c2.attr("fill", "red");}; 
c3.node.onclick = function () { c2.attr("fill", "red");};

我在这里把文本做得很大，这样你就可以确定你点击的是文本而不是矩形。

【讨论】：

我真的不希望文本变大。但我需要点击整个矩形区域！至于解决方案1，我认为它做同样的事情，但避免使用变量。

【解决方案3】：

实际上提供一个 3 层对象很好，因为您可以根据自己的喜好为背面层着色。前层与后层的形状相同，但不透明度为零，因此您可以看到中间层上的文本。我也不喜欢使用节点来处理事件，而是使用本机可用的 Raphael 事件处理机制。下面的示例取自我网站上的示例之一，我已将其进一步删减，以便更容易理解。另请注意，它是一个由前层和后层圆圈组成的按钮，两层之间夹有一个文本。它们可以很容易地成为矩形/圆角矩形。该功能包括在鼠标悬停/鼠标悬停时反转颜色...

button = function (paper, xpos, ypos, r, labeltext) 
{

this.backLayer = paper.circle(xpos, ypos, r).attr({ fill: "#FFFF00", 'fill-opacity': 0  , stroke: "#FF0000",'stroke-width':5, 'stroke-opacity':0});

/*The text automatically centres itself as this is the default text positioning for Raphael text*/
this.label = paper.text(xpos, ypos, labeltext).attr({fill:'#ff0000', 'font-size':18});

/*Now we make a copy for the front layer and we also make the back layer opaque. So that you can see it's yellow fill*/
this.frontLayer = this.backLayer.clone();
this.backLayer.attr({'fill-opacity': 1, 'stroke-opacity':1});

/*Now make the back layer and the text referencable for the mouseover, mouseout and click event of the front layer*/ 
this.frontLayer.backLayer= this.backLayer;
this.frontLayer.label = this.label;

/*Add a preferred cursor by referencing the underlying DOM object of the frontLayer*/
this.frontLayer.node.style.cursor = 'pointer';

/*Now you can interact with the lower layers behind the invisible covering layer ( frontLayer ) in it's event methods*/
this.frontLayer.mouseover(
function (e) {
    this.backLayer.animate({ fill: "#FF0000", stroke: "#FFFF00" }, 1000);
    this.label.animate({ fill: "#FFFF00" }, 1000);
    }
);  
this.frontLayer.mouseout(
function (e) {
    this.backLayer.animate({ fill: "#FFFF00", stroke: "#FF0000" }, 1000);
    this.label.animate({ fill: "#FF0000" }, 1000);
    }
);
this.frontLayer.click(      
function (e) {
        alert("Creating loads of custom buttons is easy\n\nYou made this one with the following specification:\n"+
        "Button Text      : "+this.label.attr("text")+"\n"+
        "Button Centre @ X: "+this.backLayer.attr("cx")+"\n"+
        "Button Centre @ Y: "+this.backLayer.attr("cy")+"\n"+
        "Button Radius    : "+this.backLayer.attr("r"));
    }

);  
}
/*Create the button*/
rappyButton = new button(paper, 250, 200, 75, "Raphael");

希望有所帮助。

【讨论】：

我已经用这个解决方案的结果更新了这个问题。没用：（

【解决方案4】：

对于文本和矩形使用相同的处理程序，使用 0 的 fill-opacity 怎么样？

【讨论】：

【解决方案5】：

您使用了 Raphael (http://raphaeljs.com/reference.html#set) 的 set 属性。您是否尝试将 onclick 添加到其中？

group.click(function(event) {
    c2.attr({fill: "red"});
});

【讨论】：

【解决方案6】：

考虑忽略文本节点上的指针事件并让它们传递到父矩形。

svg text {
    pointer-events: none;
}

【讨论】：

这似乎是一个不错的解决方案。虽然有什么缺点？如果我想允许用户选择/复制文本怎么办？有什么办法可以打开双击并允许复制。

【解决方案7】：

onmousedown 在 IE 7,8 和 9 中为我工作

            st[0].onclick = function () {
                myFunc(dataObj);
                st.toFront();
                R.safari();
            };
            st[0].onmousedown = function () {
                myFunc(dataObj);
                st.toFront();
                R.safari();
            };

我也尝试了一些其他方法，将函数抽象为变量，但没有奏效。在我的情况下，我无法在显示屏上添加一个矩形并让人们点击它，这是一个糟糕的解决方案，原因有很多。

希望这会有所帮助！

【讨论】：