var publishTable="JAVASCRIPT EXAMPLES : SVG MATRIX TRANSFORMATION REFERENCE
"
var basicTable
function writeBasicTable()
{
var lastUpdate=document.lastModified
var lastSplit=lastUpdate.split(" ")
lastUpdateSpan.innerText=lastSplit[0]
basicTable="
"+
""+
""+
"SVG MATRIX TRANSFORMATION BASICS"+
"
"
basicTable+="
"
var reSp=/ /g //--replaces space with underscore---
for(i=0;i"+basic+" "+format+""
basicTable+="
"
exampleDiv.innerHTML=basicTable+exampleTable
}
var basicArray=new Array();
basicArray[0]='Matrix Values'+
'@Each matrix value is associated with one or more transformations'+
'@
'+
'Following each transformation, getCTM() returns the resulting matrix, as displayed above'+
'@Rotate, scale and skew are about the element center point. First translate the element coordinates to its center, then translate back.'
basicArray[2]='getCTM'+
'@myCTM=element.getCTM()
'+
'The kids have been rotated by 45 degrees about the center of their bounding box'+
'@Following transformations, this returns the current transformation matrix object for an element.'+
'@The a-f values are extracted: a=myCTM.a, b=myCTM.b, c=myCTM.c, d=myCTM.d, e=myCTM.e, f=myCTM.f'
basicArray[3]='Bounding Box'+
'@A rectangle that encloses an element. Our Ghost element, the kids bounding box in white is shown, with its center point in red'+
'@
Click to move the kids
'+
'The kids are translated. Its bounding box is then requested, but does not follow their translation.'+
'@When an element is created, its bounding box is born and locked at its origin and size, no matter what transformations may occur to the element.'
basicArray[4]='SVG Wrapper'+
'@Provides a bounding box for transformed elements. Tracks the element through transformations.'+
'@
Click for svg wrapper: '+
'
'+
'The wrapper bounding box, Oracle, is shown in blue, with its center point. It has followed the kid\'s translation.'+
'@After an element is transformed its bounding box is not valid in the current coordinate system. The SVG wrapper, however does track the element\'s current width, height, and x,y values. '
basicArray[5]='Appending Transforms'+
'@Transforms are \'additive\'. Each transform request is appended to the current transform matrix. This append then is set as the element\'s transform attribute value, thereby creating a new transform matrix.'+
'@
Add a transform '+
''+
'
'+
'
Translate:
'+
'
'+
''+
'
'+
'
Rotate:
'+
'
'+
''+
'
'+
'
Scale:
'+
'
'+
''+
'
'+
'
Skew(x,y):
'+
'
'+
''+
'
'+
'
'+
''+
'
'+
'
'+
'@The appended transforms, and evolving matrix are displayed in the Source textarea above.'
basicArray[6]='Translation Changes'+
'@After an element has been transformed, further translations to other locations are accomplished by adding the values to the e & f values of the matrix.'+
'@The kids have been scaled, rotated, skewed, each from the original bounding box center point, plus it was translated.
'+
'
'+
'@The SVG wrapper center point is used as the reference point for translations to a specific point. '
basicArray[7]='Transform History'+
'@Resetting the rotation, scale, and skew transforms to their default values employs a transform history attribute. Each transformation is recorded within this attribute for the element.'+
'@The kids have been scaled, rotated, skewed, each from the original bounding box center point, plus it was translated.
'+
' '+
' '+
''+
'
'+
'@The history attribute is played back, extracting the specified transform without disturbing the others or the element\'s location. That specific transform can then be re-applied.'
basicArray[8]='Rotation Changes'+
'@After an element has been transformed, further rotations can be added, and/or rotation can be reset to (0) then re-applied.'+
'@The kids have been scaled, rotated, skewed, each from the original bounding box center point, plus it was translated.
'+
' '+
'
'+
'@The original bounding box center point is used as the reference to add rotation. '
basicArray[9]='Scaling Changes'+
'@After an element has been transformed, further scaling can be added, and/or scale can be reset to (1) then re-applied.'+
'@The kids have been scaled, rotated, skewed, each from the original bounding box center point, plus it was translated.
'+
' '+
'
'+
'@The original bounding box center point is used as the reference to add scaling. '
basicArray[10]='Skewing Changes'+
'@After an element has been transformed, further skews can be added, and/or shewX, skewY can be reset to (0) then re-applied.'+
'@The kids have been scaled, rotated, skewed, each from the original bounding box center point, plus it was translated.
'+
' '+
' Note: the skew angles are in radians
'+
'@The original bounding box center point is used as the reference to add skews. '
basicArray[11]='Transform Strategy'+
'@It substantially simplifies transforms if an element is initially created with its bounding box center at (0,0).'+
' The symbols are "The Machines", each being a path created with their centers at the origin(0,0). '+
'@
Transform Random Elements '+
''+
''+
''+
' '+
'
'+
'The machines are placed in a grid (A-G thru 1-7). All transforms are accomplished within each grid location'+
'@Each element includes its transformHistory attribute that tracks its transforms. Following each selection, the current values for each changed machine symbol are shown in the Source textarea above.'
basicArray[12]='Building Transformable Elements'+
'@Prior to creating an SVG element for transforms, its construction with a bounding box center point, located at (0,0), can be computed.'+
'@Elements above are shown in their current bounding boxes. Select \'run\' to rebuild them with a bounding box center at the origin. '+
'
The elements will be rebuilt, then translated back to their original positions.'+
'@Create elements in the svg document, then run similar functions to rebuild them so their bounding box center is at the origin(0,0)'
/*
basicArray[]='methodName'+
'@myElem.methodName(prop)'+
'@this describes what it provides'+
'@this describes its advantages if used'
*/
var exampleArray=[];
exampleArray[0]="" //--blank---
/*
exampleArray[0]="example description"+
"@ what you have to do to participate"+
"@ What was demonstrated in the example"
*/