HTML and CSS Reference
In-Depth Information
},
destroy: function() {
if(this.destroyed) return false;
this._super();
this.parent.svg.removeChild(this.svg);
}
});
The
init
method of
Q.SVGSprite
doesn't do anything particularly special except set some defaults on
the
shape
and
color
of the default object. It then calls
createShape
to create the element. Finally, it calls
setTransform
to set the transform property on the SVG element.
The
set
method is a helper method that accepts hash properties and uses
setAttribute
to set each of
them. Although there is some overhead with this and it probably shouldn't be used during each step, it does
provide a convenient way to set multiple properties at once in a jQuery-like fashion.
The
createShape
method is perhaps the most interesting. The meat of the method is a
switch
statement
that looks at the
p.shape
property and creates the appropriate type of SVG element.
For a
block
shape, it creates a
<rect>
element and sets the
width
and
height
properties on it. For a
circle
shape, it creates a
<circle>
element and sets the radius. It sets the center
x
and
y
location to
0
as
the element will be moved with the
transform
property. Finally, for the
polygon
shape, it needs to create a
string of points to pass in to the
points
attribute.
After
createShape
has created the element, the
createShape
method looks at the
fill
and
out-
line
properties to set the fill and the stroke.
The
setTransform
method again looks a good deal like the method of the same name from
Q.DOMSprite
. Its main job is to see if any of the property attributes have changed since the last frame and
update the transform of the SVG element appropriately. To do this it first crafts a
translate
transform fol-
lowed by a
rotate
transform set to rotate around the center of the object. The order here is important because
changing the order of the two would result in a rotation around the point 0,0, which would lead to all sorts of
problems down the road.
Creating an SVG Stage
The last bit of SVG functionality needed for the engine is to create an SVG-aware stage class that can act as a
container for
Q.SVGSprite
.
To keep different stages separate, the
SVGStage
class creates its own child
<svg>
element that sits inside
of the primary SVG element. The class also exposes methods to move the viewport around. The code for
Q.SVGStage
is shown in
Listing 14-6
and should be added before the final closing curly brace at the end of
quintus_svg.js
.
Listing 14-6:
Q.SVGStage
Q.SVGStage = Q.Stage.extend({
init: function(scene) {
this.svg = document.createElementNS(SVG_NS,'svg');
this.svg.setAttribute('width',Q.width);
this.svg.setAttribute('height',Q.height);
