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;
});
答案 0 :(得分:0)
这可能是因为'this'将是一个Raphael对象,而不是一个简单的圆形对象,因此它将有一个包装器。
你可能想要什么,更像是......
this.attr('cx', this.attr('cx') || 300)
如您想要获取并设置属性,而不是Raphael对象上的直接键。