Home :: GUI :: Utilities

  1. Introduction
  2. Reference
    1. Methods
      1. constructor
      2. init
      3. appendNode
      4. removeNode
      5. handleEvent
      6. SVGZoom
      7. SVGScroll
      8. update
    2. Properties
      1. svgNodes
      2. x_trans
      3. y_trans
      4. scale
  3. Example
  4. Revision History
  5. Download

Introduction

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.


Reference

Methods

constructor - new AntiZoomAndPan();

init();

appendNode(svgNode);

removeNode(svgNode);

handleEvent(e);

SVGZoom(e);

SVGScroll(e);

update();

Properties


Example

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.


Revision History

Version 1.2

  1. Removed dependency on viewBox object. The viewBox will not be taken into effect if the ViewBox object has not been loaded in the SVG document. I still haven't addressed the transformation problem mentioned in version 1.1 below.

Version 1.1

  1. Add initial support for viewBox; however, there is a problem in my transformation logic which requires you to use screen coordinates on elements that are managed by azap even when a viewBox viewport is in effect on the element.

Version 1.0

  1. Initial release of the AntiZoomAndPan object. Currently does not support SVG documents using a viewBox.

Download

AntiZoomAndPan.js