AntiZoomAndPan, aka. azap, is a JavaScript object used to make specific SVG nodes immune to zooming and panning. This code is used in the 2D Geometry section of this site.
constructor - new AntiZoomAndPan();
This method creates a new Mouser object. All initialization is handled by the init() method. All parameters for this method are described below
init() initialized all properties for this object. Event listeners are added to the top-most svg element so that zoom and pan events will be sent to this object.
appendNode() adds the specified SVG node to its list of managed nodes.
removeNode() removes the specified SVG node from its lists of managed ndoes.
handleEvent() dispatches the SVGZoom and SVGScroll events to the equivalently named methods.
SVGZoom() calls the update() method whenever the SVG document is zoomed.
SVGScroll() calls the update() method whenever the SVG document is scrolled.
update() calculates the transform that is need to prevent an object from being scaled or transformed. This transformation is applied to all nodes managed by this object.
svgNodes is an array of SVG nodes. This is the collection of all nodes that are being manages by this object.
x_trans is a number that is equivalent to the current x translation that azap is applying to the managed SVG nodes.
y_trans is a number that is equivalent to the current y translation that azap is applying to the managed SVG nodes.
scale is a number that is equivalent to the current scale that azap is applying to the managed SVG nodes.
The following example registers a <g> element with an AntiZoomAndPan object. Try panning and zooming the image. Notice that only the circle is effected by these actions.
This example recreates the last example but defines a viewBox on the root svg element. You may find it interesting to open this example in its own window and then resize the window. You will notice that the circle is resized according to the rules of the viewBox; however, the text remains visually uneffected.