raphael - 如何使用按钮单击事件显示/隐藏 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变量也会得到新的数据。