中文XML论坛--[求助]请大虾们帮我翻译下这个程序的注释，以及程序说明。

程序：
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events"
     width="100%" height="100%" shape-rendering="optimizeSpeed" zoomAndPan="enable" onload="init(evt)" onmousedown="grab(evt)" onmousemove="drag(evt)" onmouseup="drop(evt)">
<title>Puzzle</title>
<desc>Puzzle</desc>

var svgNS = "http://www.w3.org/2000/svg";
var xlinkNS="http://www.w3.org/1999/xlink";

var svgDocument = null;
var svgRoot = null;
var canvas = null;
var background = null; //to receive mouse event on drag
var dragImage = null;

var imageList = new Array();

var trueCoords = null;
var grabPoint = null;
var orgPoint = null;
var swapFlag = false; //Swap happen or not

//In order to keep all points is integer, imageWidth will be round to imageCol * 4 and imageHeight round to imageRow * 4
//For example, if imageCol = 3, 400%(3*4)=4, imageWidth will be round to 400-4=396.
var imageWidth = 400;
var imageHeight = 400;

var imageRow = 3; //You can change from Row and column number from 1 to 10
var imageCol = 3;
var rowUnit; //Height of each row
var colUnit; //Width of each column

var MIN_MERGE_DISTANCE = 5; //Merge distance
var MIN_ROTATE_DISTANCE = 2; //Rotate distance

var CANVAS_ID = "canvas";
var BACKGROUND_ID = "background";
var IMAGE_SOURCE = "1.jpg"; //Source file
var OUTLINE_ID = "outline";
var OUTLINE_STROKE = "silver";
var OUTLINE_STROKE_WIDTH = 2;

var blockList = new Array();
for(var i = 0; i < imageRow; i++)
{
  for(var j = 0; j < imageCol; j++)
  {
   var block = new Block(i, j);
   block.topEdge = parseInt( hEdgesStr.substr(i*imageCol + j, 1) );
   block.bottomEdge = parseInt( hEdgesStr.substr( (i+1)*imageCol + j, 1) );

   block.leftEdge = parseInt( vEdgesStr.substr(i* (imageCol + 1) + j, 1) );
   block.rightEdge = parseInt( vEdgesStr.substr(i* (imageCol + 1) + j + 1, 1) );

   //alert(i + " " + j + ": " + block.topEdge + " " + block.rightEdge + " " + block.bottomEdge +  " " + block.leftEdge);
   blockList[blockList.length] = block;
  }
}

//alert(blockList.length);
return blockList;
}

function createOutline()
{
//Outline path
var groups = svgDocument.getElementById(CANVAS_ID);
if(groups != null)
{
  var lastGroup = groups.lastChild;
  var path = svgDocument.createElementNS(svgNS, "path");
  path.setAttributeNS(null, "id", OUTLINE_ID);
  path.setAttributeNS(null, "d", "M 0 0");
  path.setAttributeNS(null, "fill", "none");
  path.setAttributeNS(null, "stroke", OUTLINE_STROKE);
  path.setAttributeNS(null, "stroke-width", OUTLINE_STROKE_WIDTH);
  path.setAttributeNS(null, "point-events", "none");
  lastGroup.appendChild(path);
}
}

function showOutline(pathStr)
{
var path = svgDocument.getElementById(OUTLINE_ID);
if(path != null)
{
path.setAttributeNS(null,"d", pathStr);
}
}

function roundSize()
{
if( imageRow > 10)
  imageRow = 10;
if( imageCol > 10 )
  imageCol = 10;

imageWidth = imageWidth - imageWidth % ( imageCol * 4 );
imageHeight = imageHeight - imageHeight % ( imageRow * 4 );

rowUnit = imageHeight / imageRow;  //Row part unit
colUnit = imageWidth / imageCol; //Col part unit
}

function matrixToStr(matrix)
{
var transformStr = "matrix(" + matrix.a + "," + matrix.b + "," + matrix.c + ","
+ matrix.d + "," + matrix.e + "," + matrix.f + ")";
return transformStr;
}

//Get image object by SVG node id
function getImageObject(id)
{
var index = id.indexOf("_");
var str = id.substr(index+1);
index = str.indexOf("_");

var row = parseInt(str.substr(0,index));
var col = parseInt(str.substr(index+1));

//Search specific block in image object region
for(var i=0; i<imageList.length; i++)
{
if( (imageList[i] != null) && (imageList[i].region.hasBlock(row, col) ))
return imageList[i];
}

return null;
}

function getTrueCoords(evt)
{
var newScale = svgRoot.currentScale;
var translation = svgRoot.currentTranslate;
trueCoords.x = (evt.clientX - translation.x)/newScale;
trueCoords.y = (evt.clientY - translation.y)/newScale;
}

//Swap selected SVG node to last one
function swapImage(id1, id2)
{
var group1, clip1, path1, image1;
var group2, clip2, path2, image2;

var group1Id = "group" + id1;
var clip1Id = "clip" + id1;
var path1Id = "path" + id1;
var image1Id = "image" + id1;

group1 = svgDocument.getElementById(group1Id);
clip1 = svgDocument.getElementById(clip1Id);
path1 = svgDocument.getElementById(path1Id);
image1 = svgDocument.getElementById(image1Id);

var group2Id = "group" + id2;
var clip2Id = "clip" + id2;
var path2Id = "path" + id2;
var image2Id = "image" + id2;

group2 = svgDocument.getElementById(group2Id);
clip2 = svgDocument.getElementById(clip2Id);
path2 = svgDocument.getElementById(path2Id);
image2 = svgDocument.getElementById(image2Id);

swapNodeAttribute(group1, group2, "id");
swapNodeAttribute(group1, group2, "transform");
swapNodeAttribute(clip1, clip2, "id");
swapNodeAttribute(path1, path2, "id");
swapNodeAttribute(path1, path2, "d");
swapNodeAttribute(image1, image2, "id");
swapNodeAttribute(image1, image2, "clip-path");

}

function swapNodeAttribute(node1, node2, attrName)
{
var value1 = node1.getAttributeNS(null, attrName);
var value2 = node2.getAttributeNS(null, attrName);
node1.setAttributeNS(null, attrName, value2);
node2.setAttributeNS(null, attrName, value1);
}

//Search neighbours in image list
function getNeighbourImage()
{
for(var i=0; i<imageList.length; i++)
{
  if( (dragImage == imageList[i]) || (imageList[i] == null) )
   continue;

  if(dragImage.checkNeighbour(imageList[i]) == true)
  {
   //Return neighbour and remove it from image list
   var newImage = imageList[i];
   imageList[i] = null;
   return newImage;
  }
}

return null;
}

function gameOver()
{
alert("Game Over!");
}

///
/// Block and Region class
///
function Block(row, col)
{
//Data
this.row = row;
this.col = col;

this.topEdge = 0;
this.rightEdge = 0;
this.bottomEdge = 0;
this.leftEdge = 0;
}

function Region()
{
//Data
this.blocks = new Array();

//Methods
this.addBlock = addBlock;
this.hasBlock = hasBlock; //Test contain one specific block or not
this.mergeRegion = mergeRegion;
this.getPathStr = getPathStr;
this.getOutline = getOutline;
this.isNeighbour = isNeighbour; //Test other region has neighbour block or not
}

function addBlock(block)
{
this.blocks[this.blocks.length] = block;
}

function hasBlock(row, col)
{
for(var i = 0; i<this.blocks.length; i++)
{
if( (this.blocks[i].row == row) && (this.blocks[i].col == col) )
return true;
}

return false;
}

function mergeRegion(newRegion)
{
if( (newRegion == null) || (newRegion.blocks == null) )
  return;

//Copy all block from new region
for(var i = 0; i<newRegion.blocks.length; i++)
{
  this.blocks[this.blocks.length] = newRegion.blocks[i];
}
}

function isNeighbour(newRegion)
{
if(newRegion.blocks == null)
  return false;

var block1, block2;
for(var i = 0; i<this.blocks.length; i++)
{
  block1 = this.blocks[i];
  for(var j = 0; j<newRegion.blocks.length; j++)
  {
   block2 = newRegion.blocks[j];

   //Same row, previous or next col is neighbour
   if( (block1.row == block2.row) && (Math.abs(block1.col - block2.col) == 1) )
    return true;

   //Same col, previous or next row is neighbour
   if( (block1.col == block2.col) && (Math.abs(block1.row - block2.row) == 1) )
    return true;
  }
}

return false;
}

///
/// ImageObject class begin
///
function ImageObject(id, parentId, angle, region)
{
//Data
this.id = id;
this.parentId = parentId;

this.angle = angle;
this.region = region;

//Methods
this.create = create; //Create SVG node and show
this.updateImage = updateImage; //Update position and rotate status
this.updatePath = updatePath; //Update clip path after merge with other images
this.hide = hide; //Hide svg node
this.deleteFromCanvas = deleteFromCanvas; //Delete svg node
this.enableEvent = enableEvent; //Enable/Disable svg mouse event

this.checkNeighbour = checkNeighbour; //Check image neighbour or not
this.mergeImage = mergeImage;

}

function deleteFromCanvas()
{
var groupId = "group" + this.id;
var parentGroup = svgDocument.getElementById(this.parentId);
var group = svgDocument.getElementById(groupId);

if ((parentGroup != null) && (group != null) )
parentGroup.removeChild(group);
}

function hide()
{
var groupId = "group" + this.id;
var group = svgDocument.getElementById(groupId);
if(group != null)
{
group.setAttributeNS(null, "display", "none");
}
}

function mergeImage(newImage)
{
if( (newImage == null) || (newImage.region == null))
return;

//Merge image clip region
this.region.mergeRegion(newImage.region);
newImage.enableEvent(false);
newImage.hide();
}

function create()
{
var parentGroup = svgDocument.getElementById(this.parentId);
var group, clip, path, image;

var groupId = "group" + this.id;
var clipId = "clip" + this.id;
var pathId = "path" + this.id;
var imageId = "image" + this.id;

group = svgDocument.getElementById(groupId);

if(group == null)
{
  //Create object, including group, clip-path and image
  group = svgDocument.createElementNS(svgNS, "g");
  parentGroup.appendChild(group);
  group.setAttributeNS(null, "id", groupId);
  //group.setAttributeNS(null, "opacity", "0.8");

  //Create clip and clip path
  clip = svgDocument.createElementNS(svgNS, "clipPath");
  clip.setAttributeNS(null,"id",clipId);
  path = svgDocument.createElementNS(svgNS, "path");
  path.setAttributeNS(null,"id",pathId);
  //path.setAttributeNS(null,"fill","none");
  //path.setAttributeNS(null,"stroke","none");
  clip.appendChild(path);

  //Create image
  image = svgDocument.createElementNS(svgNS, "image");
  image.setAttributeNS(null, "id", imageId);
  image.setAttributeNS(null, "width", imageWidth);
  image.setAttributeNS(null, "height", imageHeight);
  image.setAttributeNS(null, "preserveAspectRatio", "none");
  image.setAttributeNS(xlinkNS, "xlink:href", IMAGE_SOURCE);
  var urlClip = "url(#" + clipId + ")";
  image.setAttributeNS(null, "clip-path", urlClip);

  //Add clip and image to group
  group.appendChild(clip);
  group.appendChild(image);
}

group.setAttributeNS(null, "display", "inline");
}

function updatePath()
{
var pathId = "path" + this.id;
path = svgDocument.getElementById(pathId);

if(path != null)
path.setAttributeNS(null,"d", this.region.getPathStr());
}

function enableEvent(flag)
{
//Enable or disable mouse event
var elem = svgDocument.getElementById("image" + this.id);
if(elem == null)
  return;

if(flag)
  elem.setAttributeNS(null, "pointer-events", "all");
else
  elem.setAttributeNS(null, "pointer-events", "none");
}

///
/// ImageObject class finished
///

//
//Mouse event handlers
//

//Grab by mouse
function grab(evt)
{
if(evt.button != 0) //Left mouse button
  return;

var targetElement = evt.target;
if ( background == targetElement )
{
  //Do nothing about background
  return;
}

var id = targetElement.getAttributeNS(null, "id");
//alert(id);

dragImage = getImageObject(id);
if(dragImage == null)
{
  //alert("No drag");
  return;
}

//Swap svg node by id, move target to front(appendChild prove to be very slowly)
var canvas = svgDocument.getElementById(CANVAS_ID);
var lastId = canvas.lastChild.getAttributeNS(null, "id");

if( id.substr(5) == lastId.substr(5))
{
  swapFlag = false; // Front one, do not need swap
}
else
{
  //var lastImage = getImageObject(lastId);
  swapImage(id.substr(5), lastId.substr(5));
  swapFlag = true;
}

//Set selected flag
//canvas.lastChild.setAttributeNS(null, "opacity", "1");

//Remember old position
orgPoint.x = trueCoords.x;
orgPoint.y = trueCoords.y;

grabPoint.x = trueCoords.x;
grabPoint.y = trueCoords.y;

dragImage.enableEvent(false);
showOutline(dragImage.region.getOutline());
}

function drag(evt)
{
getTrueCoords(evt);

if (dragImage)
{
  var newX = trueCoords.x - grabPoint.x;
  var newY = trueCoords.y - grabPoint.y;

  dragImage.updateImage(newX, newY, 0, 0, 0);

  grabPoint.x = trueCoords.x;
  grabPoint.y = trueCoords.y;
}
}

// ]]>
</script>


	W 3 C h i n a ( since 2003 ) 旗下站点苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》	140.625ms