Raphael.js示例

时间:2017-03-07 02:26:33

标签: raphael

  sorry for the lousy copy&paste code. as it is the first time i am using stackoverflow. In raphael.js example below. it is strange that before this line

this.cx = this.cx || 300; 一旦你打印出this.cx =“undefined”。这是圆圈,在非常好的时候.cx应该等于100px。曾经我在console.log(这个);在this.cx = this.cx ||之前300;元素对象中的cx等于100px而不是“undefined”。任何人都可以帮忙解释一下吗?

paper.rect(0,0,500,500).attr({fill: "#1a1a1a"})
    var targets = paper.set();
    targets.push(paper.circle(300, 100, 20),
       paper.circle(300, 150, 20),
       paper.circle(300, 200, 20),
       paper.circle(300, 250, 20),
       paper.circle(300, 300, 20),
       paper.circle(300, 350, 20),
       paper.circle(300, 400, 20),
       paper.circle(300, 450, 20));
    targets.attr({fill: "#000", stroke: "#fff", "stroke-dasharray": "-", opacity: .2});
    var labels = paper.set();
    labels.push(paper.text(330, 100, "linear (default)"),
                paper.text(330, 150, ">"),
                paper.text(330, 200, "<"),
                paper.text(330, 250, "<>"),
                paper.text(330, 300, "bounce"),
                paper.text(330, 350, "elastic"),
                paper.text(330, 400, "backIn"),
                paper.text(330, 450, "backOut"));
    labels.attr({font: "12px Fontin-Sans, Arial", fill: "#fff", "text-anchor": "start"});
    var movers = paper.set();
    movers.push(paper.circle(100, 100, 20),
                paper.circle(100, 150, 20),
                paper.circle(100, 200, 20),
                paper.circle(100, 250, 20),
                paper.circle(100, 300, 20),
                paper.circle(100, 350, 20),
                paper.circle(100, 400, 20),
                paper.circle(100, 450, 20));
    movers.attr({fill: "#000", stroke: "#fff", "fill-opacity": 0});
    movers[0].click(function () {
        this.cx = this.cx || 300;
        this.animate({cx: this.cx, "stroke-width": this.cx / 100, fill: this.cx - 100 ? "hsb(0, .75, .75)" : "#000", "fill-opacity": +!!(this.cx - 100)}, 1000);
        console.log(movers[0].attr('fill-opacity'));
        this.cx = this.cx == 300 ? 100 : 300;
    });
    movers[1].click(function () {
        _this.cx = this.cx || 300_;
        this.animate({cx: this.cx, "stroke-width": this.cx / 100, fill: this.cx - 100 ? "hsb(.1, .75, .75)" : "#000", "fill-opacity": +!!(this.cx - 100)}, 1000, ">");
        this.cx = this.cx == 300 ? 100 : 300;
    });
    movers[2].click(function () {
        this.cx = this.cx || 300;
        this.animate({cx: this.cx, "stroke-width": this.cx / 100, fill: this.cx - 100 ? "hsb(.2, .75, .75)" : "#000", "fill-opacity": +!!(this.cx - 100)}, 1000, "<");
        this.cx = this.cx == 300 ? 100 : 300;
    });
    movers[3].click(function () {
        this.cx = this.cx || 300;
        this.animate({cx: this.cx, "stroke-width": this.cx / 100, fill: this.cx - 100 ? "hsb(.3, .75, .75)" : "#000", "fill-opacity": +!!(this.cx - 100)}, 1000, "<>");
        this.cx = this.cx == 300 ? 100 : 300;
    });
    movers[4].click(function () {
        this.cx = this.cx || 300;
        this.animate({cx: this.cx, "stroke-width": this.cx / 100, fill: this.cx - 100 ? "hsb(.4, .75, .75)" : "#000", "fill-opacity": +!!(this.cx - 100)}, 1000, "bounce");
        this.cx = this.cx == 300 ? 100 : 300;
    });
    movers[5].click(function () {
        this.cx = this.cx || 300;
        this.animate({cx: this.cx, "stroke-width": this.cx / 100, fill: this.cx - 100 ? "hsb(.5, .75, .75)" : "#000", "fill-opacity": +!!(this.cx - 100)}, 1000, "elastic");
        this.cx = this.cx == 300 ? 100 : 300;
    });
    movers[6].click(function () {
        this.cx = this.cx || 300;
        this.animate({cx: this.cx, "stroke-width": this.cx / 100, fill: this.cx - 100 ? "hsb(.6, .75, .75)" : "#000", "fill-opacity": +!!(this.cx - 100)}, 1000, "backIn");
        this.cx = this.cx == 300 ? 100 : 300;
    });
    movers[7].click(function () {
        this.cx = this.cx || 300;
        this.animate({cx: this.cx, "stroke-width": this.cx / 100, fill: this.cx - 100 ? "hsb(.7, .75, .75)" : "#000", "fill-opacity": +!!(this.cx - 100)}, 1000, "backOut");
        this.cx = this.cx == 300 ? 100 : 300;
    });

1 个答案:

答案 0 :(得分:0)

这可能是因为'this'将是一个Raphael对象,而不是一个简单的圆形对象,因此它将有一个包装器。

你可能想要什么,更像是......

this.attr('cx', this.attr('cx') || 300)

如您想要获取并设置属性,而不是Raphael对象上的直接键。