使用Raphaeljs进行定向的Onclick事件

Onclick event for rect using Raphaeljs

本文关键字：Onclick 事件 Raphaeljs 使用      更新时间：2023-09-26

我想画一个简单的矩形，上面有一些文字。由于形状上不能有文本，所以我为文本和矩形对象创建了一个具有相同坐标的集合。我需要在onclick事件上改变一些东西。因此，我使用了obj.node.onclick =语句并编写了一个处理程序。我的问题是，如果文本对象用于onclick事件处理程序得到调用，只有当我点击文本。如果我使用矩形的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覆盖在矩形上，并在上面写文字，但没有成功。我可以在firebug中看到div，但在网页上看不到!我已经给它的样式属性左上角的宽度和高度，以及声明的位置为绝对的。但没有成功。

请帮我一下。任何帮助都是感激的!

的故事

我尝试使用frontlayer backlayer解决方案。我克隆了后台并添加了一个点击处理程序。我根本没有使用"this"。事件从未被解雇!请帮帮我!故事

为按钮中的所有元素创建一个集合。然后向组添加单击(或鼠标向上)处理程序。注意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");
});

有两种方法可以做到这一点。在这两个中，我都只是为文本添加了一个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");};

我把这里的文本设置得很大，这样你就可以确保你点击的是文本而不是矩形

提供一个3层对象是很好的，因为你可以根据自己的喜好给后面的图层上色。前面的图层和后面的图层形状相同，但是不透明度为0，这样你就可以看到中间图层上的文字。我也不喜欢使用node来处理事件，而是使用本机可用的Raphael事件处理机制。下面的例子摘自我网站上的一个例子，我把它剪得更短，这样更容易理解。还需要注意的是，它是一个按钮，由一个前图层和一个后图层组成，两个图层之间夹着一个文本。它们也可以是矩形或圆角矩形。该功能包括鼠标over/mouseout的颜色反转…

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");

希望有帮助。

对于文本和矩形使用相同的处理程序，使用fill-opacity(0)如何?

您已经使用了Raphael (http://raphaeljs.com/reference.html#set)的set属性。你试过添加onclick吗?

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

考虑忽略文本节点上的指针事件，让它们传递给父节点。

svg text {
    pointer-events: none;
}

onmousedown在ie7、ie8和ie9中为我工作

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

我尝试了一些其他的方法，以及，抽象函数到一个变量，但它没有工作。在我的例子中，我不能在显示器上添加一个矩形，让人们点击它，这是一个糟糕的解决方案，有几个原因。

希望这对你有帮助!

相关文章：