HTML and CSS Reference
In-Depth Information
destroy: function() {
if(this.destroyed) return false;
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');
Search WWH ::

Custom Search