我正在尝试绘制一个带有一些文本的简单Rectangle。由于形状上没有文字,我正在创建一个具有相同文本和矩形对象坐标的集合。我需要在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覆盖rect并在其上写文本但没有成功。我可以在firebug中看到div而不是在网页上!我给它左上角宽度和高度的样式属性以及将位置表示为绝对值。但没有成功。
请帮我解决这个问题。 任何帮助表示赞赏! 卡维塔
我尝试使用前层背板解决方案。我克隆了后备层并添加了一个点击处理程序。我根本没有使用'this'。这件事永远不会被解雇! 请在这件事上给予我帮助! 卡维塔
答案 0 :(得分:14)
为按钮中的所有元素创建一个集合。然后向该组添加一个单击(或鼠标)处理程序。请注意,rects必须有填充,否则它们不会获得鼠标事件。对于透明按钮,请使用不透明度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");
});
答案 1 :(得分: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");};
我在这里制作的文字非常大,所以你可以确定你点击文字而不是矩形。
答案 2 :(得分:2)
实际上提供3层对象很好,因为您可以按照自己喜欢的方式为背层着色。前层与后层的形状相同,但它的不透明度为零,因此您可以在中间层上看到文本。 我也不喜欢使用node来处理事件,而是使用原生的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");
希望有所帮助。
答案 3 :(得分:1)
使用fill-opacity
为0的文本和rect使用相同的处理程序怎么样?
答案 4 :(得分:1)
您使用了Raphael的set
属性(http://raphaeljs.com/reference.html#set)。您是否尝试过添加onclick
?
group.click(function(event) {
c2.attr({fill: "red"});
});
答案 5 :(得分:0)
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();
};
我也尝试了其他一些方法,将函数抽象为变量,但它没有用。在我的情况下,我不能在显示器上添加一个矩形,让人们点击它,由于几个原因,这是一个糟糕的解决方案。
希望这有帮助!
答案 6 :(得分:0)
考虑忽略文本节点上的指针事件,并让它们传递给父矩形。
svg text {
pointer-events: none;
}