1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
BouncingSvgParticle = Utilities.createSubclass(BouncingParticle,
function(stage, shape)
{
BouncingParticle.call(this, stage);
this._shape = shape;
}, {
_applyClipping: function(stage)
{
if (stage.clip != "star")
return;
stage.ensureClipStarIsCreated();
this.element.setAttribute("clip-path", "url(#star-clip)");
},
_move: function()
{
var transform = "translate(" + this.position.x + ", " + this.position.y + ")";
if (this._shape != "circle")
transform += this.rotater.rotate(this.size.center);
this.element.setAttribute("transform", transform);
},
animate: function(timeDelta)
{
BouncingParticle.prototype.animate.call(this, timeDelta);
this._move();
}
});
BouncingSvgParticlesStage = Utilities.createSubclass(BouncingParticlesStage,
function()
{
BouncingParticlesStage.call(this);
}, {
_createDefs: function()
{
return Utilities.createSVGElement("defs", {}, {}, this.element);
},
_ensureDefsIsCreated: function()
{
return this.element.querySelector("defs") || this._createDefs();
},
_createClipStar: function()
{
var attrs = { id: "star-clip", clipPathUnits: "objectBoundingBox" };
var clipPath = Utilities.createSVGElement("clipPath", attrs, {}, this._ensureDefsIsCreated());
attrs = { d: "M.50,0L.38,.38L0,.38L.30,.60L.18,1L.50,.75L.82,1L.70,.60L1,.38L.62,.38z" };
Utilities.createSVGElement("path", attrs, {}, clipPath);
return clipPath;
},
ensureClipStarIsCreated: function()
{
return this.element.querySelector("#star-clip") || this._createClipStar();
},
particleWillBeRemoved: function(particle)
{
particle.element.remove();
}
});
|
