如何通过按钮单击事件显示/隐藏raphael对象

Question

我想用按钮点击事件显示/隐藏我的raphael svg图

请知道如何做的人。请帮帮我

我尝试通过这种方式做，但它不起作用。

var p = Raphael(900,70,200,200);

p.circle(20,20,20); 
    $n("#shide").click(function(){
    p.hide();
    });

请知道如何做的人。请帮帮我 提前谢谢。

Answer 1

像这样：

var paper = Raphael(10, 50, 320, 200);

paper.circle(10, 10, 10, 10)
     .attr({fill: "#000"})
     .click(function () {
        this.hide();
     });

Answer 2

您最好使用绘图函数的返回值。

var element1 = p.circle(20,20,20);
var element2 = p.circle(99,99,20);
$n("#shide").click(function(){
    element1.hide();
    // element2.hide();
});

我也有一些关于这类问题的高级技能。当您使用ajax响应数据绘制圆圈或其他内容时，这些技能将非常有用。

function drawCircle() {
    var elementObj = {};
    $.ajax({url: '', dataType: 'json', method: 'post', data: yourData, success: function (data) {
        elementObj['circle1'] = p.circle(20,20,20);
        elementObj['circle2'] = p.circle(99,99,20);
    });
    return elementObj;
}

然后你这样称呼这个函数：

var ele = drawCircle();
var hoverInCb = function () {
    ele['circle1'] && ele['circle1'].show();
    ele['circle2'] && ele['circle2'].show();
};
var hoverOutCb = function () {
    ele['circle1'] && ele['circle1'].hide();
    ele['circle2'] && ele['circle2'].hide();
};

这些代码将起作用，因为返回的elementObj是对象的“链接”。在ajax请求获取数据之后，elementObj将填充数据，而外部的ele变量也将获取新数据。