[2] | 1 | /** |
---|
| 2 | * @fileoverview |
---|
| 3 | * |
---|
| 4 | * ECMAScript <a href="http://www.carto.net/papers/svg/resources/helper_functions.html">helper functions</a>, main purpose is to serve in SVG mapping or other SVG based web applications |
---|
| 5 | * |
---|
| 6 | * This ECMA script library is free software; you can redistribute it and/or |
---|
| 7 | * modify it under the terms of the GNU Lesser General Public |
---|
| 8 | * License as published by the Free Software Foundation; either |
---|
| 9 | * version 2.1 of the License, or (at your option) any later version. |
---|
| 10 | * |
---|
| 11 | * This library is distributed in the hope that it will be useful, |
---|
| 12 | * but WITHOUT ANY WARRANTY; without even the implied warranty of |
---|
| 13 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU |
---|
| 14 | * Lesser General Public License for more details. |
---|
| 15 | * |
---|
| 16 | * You should have received a copy of the GNU Lesser General Public |
---|
| 17 | * License along with this library (http://www.carto.net/papers/svg/resources/lesser_gpl.txt); if not, write to the Free Software |
---|
| 18 | * Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA |
---|
| 19 | * |
---|
| 20 | * Please report bugs and send improvements to neumann@karto.baug.ethz.ch |
---|
| 21 | * If you use these scripts, please link to the original (http://www.carto.net/papers/svg/resources/helper_functions.html) |
---|
| 22 | * somewhere in the source-code-comment or the "about" of your project and give credits, thanks! |
---|
| 23 | * |
---|
| 24 | * See <a href="js_docs_out/overview-summary-helper_functions.js.html">documentation</a>. |
---|
| 25 | * |
---|
| 26 | * @author Andreas Neumann a.neumann@carto.net |
---|
| 27 | * @copyright LGPL 2.1 <a href="http://www.gnu.org/copyleft/lesser.txt">Gnu LGPL 2.1</a> |
---|
| 28 | * @credits Bruce Rindahl, numerous people on svgdevelopers@yahoogroups.com |
---|
| 29 | */ |
---|
| 30 | |
---|
| 31 | //global variables necessary to create elements in these namespaces, do not delete them!!!! |
---|
| 32 | |
---|
| 33 | /** |
---|
| 34 | * This variable is a shortcut to the full URL of the SVG namespace |
---|
| 35 | * @final |
---|
| 36 | * @type String |
---|
| 37 | */ |
---|
| 38 | var svgNS = "http://www.w3.org/2000/svg"; |
---|
| 39 | |
---|
| 40 | /** |
---|
| 41 | * This variable is a shortcut to the full URL of the XLink namespace |
---|
| 42 | * @final |
---|
| 43 | * @type String |
---|
| 44 | */ |
---|
| 45 | var xlinkNS = "http://www.w3.org/1999/xlink"; |
---|
| 46 | |
---|
| 47 | /** |
---|
| 48 | * This variable is a shortcut to the full URL of the attrib namespace |
---|
| 49 | * @final |
---|
| 50 | * @type String |
---|
| 51 | */ |
---|
| 52 | var cartoNS = "http://www.carto.net/attrib"; |
---|
| 53 | |
---|
| 54 | /** |
---|
| 55 | * This variable is a alias to the full URL of the attrib namespace |
---|
| 56 | * @final |
---|
| 57 | * @type String |
---|
| 58 | */ |
---|
| 59 | var attribNS = "http://www.carto.net/attrib"; |
---|
| 60 | |
---|
| 61 | /** |
---|
| 62 | * This variable is a alias to the full URL of the Batik extension namespace |
---|
| 63 | * @final |
---|
| 64 | * @type String |
---|
| 65 | */ |
---|
| 66 | var batikNS = "http://xml.apache.org/batik/ext"; |
---|
| 67 | |
---|
| 68 | /** |
---|
| 69 | * Returns the polar direction from a given vector |
---|
| 70 | * @param {Number} xdiff the x-part of the vector |
---|
| 71 | * @param {Number} ydiff the y-part of the vector |
---|
| 72 | * @return direction the direction in radians |
---|
| 73 | * @type Number |
---|
| 74 | * @version 1.0 (2007-04-30) |
---|
| 75 | * @see #toPolarDist |
---|
| 76 | * @see #toRectX |
---|
| 77 | * @see #toRectY |
---|
| 78 | */ |
---|
| 79 | function toPolarDir(xdiff,ydiff) { |
---|
| 80 | var direction = (Math.atan2(ydiff,xdiff)); |
---|
| 81 | return(direction); |
---|
| 82 | } |
---|
| 83 | |
---|
| 84 | /** |
---|
| 85 | * Returns the polar distance from a given vector |
---|
| 86 | * @param {Number} xdiff the x-part of the vector |
---|
| 87 | * @param {Number} ydiff the y-part of the vector |
---|
| 88 | * @return distance the distance |
---|
| 89 | * @type Number |
---|
| 90 | * @version 1.0 (2007-04-30) |
---|
| 91 | * @see #toPolarDir |
---|
| 92 | * @see #toRectX |
---|
| 93 | * @see #toRectY |
---|
| 94 | */ |
---|
| 95 | function toPolarDist(xdiff,ydiff) { |
---|
| 96 | var distance = Math.sqrt(xdiff * xdiff + ydiff * ydiff); |
---|
| 97 | return(distance); |
---|
| 98 | } |
---|
| 99 | |
---|
| 100 | /** |
---|
| 101 | * Returns the x-part of a vector from a given direction and distance |
---|
| 102 | * @param {Number} direction the direction (in radians) |
---|
| 103 | * @param {Number} distance the distance |
---|
| 104 | * @return x the x-part of the vector |
---|
| 105 | * @type Number |
---|
| 106 | * @version 1.0 (2007-04-30) |
---|
| 107 | * @see #toPolarDist |
---|
| 108 | * @see #toPolarDir |
---|
| 109 | * @see #toRectY |
---|
| 110 | */ |
---|
| 111 | function toRectX(direction,distance) { |
---|
| 112 | var x = distance * Math.cos(direction); |
---|
| 113 | return(x); |
---|
| 114 | } |
---|
| 115 | |
---|
| 116 | /** |
---|
| 117 | * Returns the y-part of the vector from a given direction and distance |
---|
| 118 | * @param {Number} direction the direction (in radians) |
---|
| 119 | * @param {Number} distance the distance |
---|
| 120 | * @return y the y-part of the vector |
---|
| 121 | * @type Number |
---|
| 122 | * @version 1.0 (2007-04-30) |
---|
| 123 | * @see #toPolarDist |
---|
| 124 | * @see #toPolarDir |
---|
| 125 | * @see #toRectX |
---|
| 126 | */ |
---|
| 127 | function toRectY(direction,distance) { |
---|
| 128 | y = distance * Math.sin(direction); |
---|
| 129 | return(y); |
---|
| 130 | } |
---|
| 131 | |
---|
| 132 | /** |
---|
| 133 | * Converts degrees to radians |
---|
| 134 | * @param {Number} deg the degree value |
---|
| 135 | * @return rad the radians value |
---|
| 136 | * @type Number |
---|
| 137 | * @version 1.0 (2007-04-30) |
---|
| 138 | * @see #RadToDeg |
---|
| 139 | */ |
---|
| 140 | function DegToRad(deg) { |
---|
| 141 | return (deg / 180.0 * Math.PI); |
---|
| 142 | } |
---|
| 143 | |
---|
| 144 | /** |
---|
| 145 | * Converts radians to degrees |
---|
| 146 | * @param {Number} rad the radians value |
---|
| 147 | * @return deg the degree value |
---|
| 148 | * @type Number |
---|
| 149 | * @version 1.0 (2007-04-30) |
---|
| 150 | * @see #DegToRad |
---|
| 151 | */ |
---|
| 152 | function RadToDeg(rad) { |
---|
| 153 | return (rad / Math.PI * 180.0); |
---|
| 154 | } |
---|
| 155 | |
---|
| 156 | /** |
---|
| 157 | * Converts decimal degrees to degrees, minutes, seconds |
---|
| 158 | * @param {Number} dd the decimal degree value |
---|
| 159 | * @return degrees the degree values in the following notation: {deg:degrees,min:minutes,sec:seconds} |
---|
| 160 | * @type literal |
---|
| 161 | * @version 1.0 (2007-04-30) |
---|
| 162 | * @see #dms2dd |
---|
| 163 | */ |
---|
| 164 | function dd2dms(dd) { |
---|
| 165 | var minutes = (Math.abs(dd) - Math.floor(Math.abs(dd))) * 60; |
---|
| 166 | var seconds = (minutes - Math.floor(minutes)) * 60; |
---|
| 167 | var minutes = Math.floor(minutes); |
---|
| 168 | if (dd >= 0) { |
---|
| 169 | var degrees = Math.floor(dd); |
---|
| 170 | } |
---|
| 171 | else { |
---|
| 172 | var degrees = Math.ceil(dd); |
---|
| 173 | } |
---|
| 174 | return {deg:degrees,min:minutes,sec:seconds}; |
---|
| 175 | } |
---|
| 176 | |
---|
| 177 | /** |
---|
| 178 | * Converts degrees, minutes and seconds to decimal degrees |
---|
| 179 | * @param {Number} deg the degree value |
---|
| 180 | * @param {Number} min the minute value |
---|
| 181 | * @param {Number} sec the second value |
---|
| 182 | * @return deg the decimal degree values |
---|
| 183 | * @type Number |
---|
| 184 | * @version 1.0 (2007-04-30) |
---|
| 185 | * @see #dd2dms |
---|
| 186 | */ |
---|
| 187 | function dms2dd(deg,min,sec) { |
---|
| 188 | if (deg < 0) { |
---|
| 189 | return deg - (min / 60) - (sec / 3600); |
---|
| 190 | } |
---|
| 191 | else { |
---|
| 192 | return deg + (min / 60) + (sec / 3600); |
---|
| 193 | } |
---|
| 194 | } |
---|
| 195 | |
---|
| 196 | /** |
---|
| 197 | * log function, missing in the standard Math object |
---|
| 198 | * @param {Number} x the value where the log function should be applied to |
---|
| 199 | * @param {Number} b the base value for the log function |
---|
| 200 | * @return logResult the result of the log function |
---|
| 201 | * @type Number |
---|
| 202 | * @version 1.0 (2007-04-30) |
---|
| 203 | */ |
---|
| 204 | function log(x,b) { |
---|
| 205 | if(b==null) b=Math.E; |
---|
| 206 | return Math.log(x)/Math.log(b); |
---|
| 207 | } |
---|
| 208 | |
---|
| 209 | /** |
---|
| 210 | * interpolates a value (e.g. elevation) bilinearly based on the position within a cell with 4 corner values |
---|
| 211 | * @param {Number} za the value at the upper left corner of the cell |
---|
| 212 | * @param {Number} zb the value at the upper right corner of the cell |
---|
| 213 | * @param {Number} zc the value at the lower right corner of the cell |
---|
| 214 | * @param {Number} zd the value at the lower left corner of the cell |
---|
| 215 | * @param {Number} xpos the x position of the point where a new value should be interpolated |
---|
| 216 | * @param {Number} ypos the y position of the point where a new value should be interpolated |
---|
| 217 | * @param {Number} ax the x position of the lower left corner of the cell |
---|
| 218 | * @param {Number} ay the y position of the lower left corner of the cell |
---|
| 219 | * @param {Number} cellsize the size of the cell |
---|
| 220 | * @return interpol_value the result of the bilinear interpolation function |
---|
| 221 | * @type Number |
---|
| 222 | * @version 1.0 (2007-04-30) |
---|
| 223 | */ |
---|
| 224 | function intBilinear(za,zb,zc,zd,xpos,ypos,ax,ay,cellsize) { //bilinear interpolation function |
---|
| 225 | var e = (xpos - ax) / cellsize; |
---|
| 226 | var f = (ypos - ay) / cellsize; |
---|
| 227 | |
---|
| 228 | //calculation of weights |
---|
| 229 | var wa = (1 - e) * (1 - f); |
---|
| 230 | var wb = e * (1 - f); |
---|
| 231 | var wc = e * f; |
---|
| 232 | var wd = f * (1 - e); |
---|
| 233 | |
---|
| 234 | var interpol_value = wa * zc + wb * zd + wc * za + wd * zb; |
---|
| 235 | return interpol_value; |
---|
| 236 | } |
---|
| 237 | |
---|
| 238 | /** |
---|
| 239 | * tests if a given point is left or right of a given line |
---|
| 240 | * @param {Number} pointx the x position of the given point |
---|
| 241 | * @param {Number} pointy the y position of the given point |
---|
| 242 | * @param {Number} linex1 the x position of line's start point |
---|
| 243 | * @param {Number} liney1 the y position of line's start point |
---|
| 244 | * @param {Number} linex2 the x position of line's end point |
---|
| 245 | * @param {Number} liney2 the y position of line's end point |
---|
| 246 | * @return leftof the result of the leftOfTest, 1 means leftOf, 0 means rightOf |
---|
| 247 | * @type Number (integer, 0|1) |
---|
| 248 | * @version 1.0 (2007-04-30) |
---|
| 249 | */ |
---|
| 250 | function leftOfTest(pointx,pointy,linex1,liney1,linex2,liney2) { |
---|
| 251 | var result = (liney1 - pointy) * (linex2 - linex1) - (linex1 - pointx) * (liney2 - liney1); |
---|
| 252 | if (result < 0) { |
---|
| 253 | var leftof = 1; //case left of |
---|
| 254 | } |
---|
| 255 | else { |
---|
| 256 | var leftof = 0; //case left of |
---|
| 257 | } |
---|
| 258 | return leftof; |
---|
| 259 | } |
---|
| 260 | |
---|
| 261 | /** |
---|
| 262 | * calculates the distance between a given point and a given line |
---|
| 263 | * @param {Number} pointx the x position of the given point |
---|
| 264 | * @param {Number} pointy the y position of the given point |
---|
| 265 | * @param {Number} linex1 the x position of line's start point |
---|
| 266 | * @param {Number} liney1 the y position of line's start point |
---|
| 267 | * @param {Number} linex2 the x position of line's end point |
---|
| 268 | * @param {Number} liney2 the y position of line's end point |
---|
| 269 | * @return distance the result of the leftOfTest, 1 means leftOf, 0 means rightOf |
---|
| 270 | * @type Number |
---|
| 271 | * @version 1.0 (2007-04-30) |
---|
| 272 | */ |
---|
| 273 | function distFromLine(xpoint,ypoint,linex1,liney1,linex2,liney2) { |
---|
| 274 | var dx = linex2 - linex1; |
---|
| 275 | var dy = liney2 - liney1; |
---|
| 276 | var distance = (dy * (xpoint - linex1) - dx * (ypoint - liney1)) / Math.sqrt(Math.pow(dx,2) + Math.pow(dy,2)); |
---|
| 277 | return distance; |
---|
| 278 | } |
---|
| 279 | |
---|
| 280 | /** |
---|
| 281 | * calculates the angle between two vectors (lines) |
---|
| 282 | * @param {Number} ax the x part of vector a |
---|
| 283 | * @param {Number} ay the y part of vector a |
---|
| 284 | * @param {Number} bx the x part of vector b |
---|
| 285 | * @param {Number} by the y part of vector b |
---|
| 286 | * @return angle the angle in radians |
---|
| 287 | * @type Number |
---|
| 288 | * @version 1.0 (2007-04-30) |
---|
| 289 | * @credits <a href="http://www.mathe-online.at/mathint/vect2/i.html#Winkel">Mathe Online (Winkel)</a> |
---|
| 290 | */ |
---|
| 291 | function angleBetwTwoLines(ax,ay,bx,by) { |
---|
| 292 | var angle = Math.acos((ax * bx + ay * by) / (Math.sqrt(Math.pow(ax,2) + Math.pow(ay,2)) * Math.sqrt(Math.pow(bx,2) + Math.pow(by,2)))); |
---|
| 293 | return angle; |
---|
| 294 | } |
---|
| 295 | |
---|
| 296 | /** |
---|
| 297 | * calculates the bisector vector for two given vectors |
---|
| 298 | * @param {Number} ax the x part of vector a |
---|
| 299 | * @param {Number} ay the y part of vector a |
---|
| 300 | * @param {Number} bx the x part of vector b |
---|
| 301 | * @param {Number} by the y part of vector b |
---|
| 302 | * @return c the resulting vector as an Array, c[0] is the x part of the vector, c[1] is the y part |
---|
| 303 | * @type Array |
---|
| 304 | * @version 1.0 (2007-04-30) |
---|
| 305 | * @credits <a href="http://www.mathe-online.at/mathint/vect1/i.html#Winkelsymmetrale">Mathe Online (Winkelsymmetrale)</a> |
---|
| 306 | * see #calcBisectorAngle |
---|
| 307 | * */ |
---|
| 308 | function calcBisectorVector(ax,ay,bx,by) { |
---|
| 309 | var betraga = Math.sqrt(Math.pow(ax,2) + Math.pow(ay,2)); |
---|
| 310 | var betragb = Math.sqrt(Math.pow(bx,2) + Math.pow(by,2)); |
---|
| 311 | var c = new Array(); |
---|
| 312 | c[0] = ax / betraga + bx / betragb; |
---|
| 313 | c[1] = ay / betraga + by / betragb; |
---|
| 314 | return c; |
---|
| 315 | } |
---|
| 316 | |
---|
| 317 | /** |
---|
| 318 | * calculates the bisector angle for two given vectors |
---|
| 319 | * @param {Number} ax the x part of vector a |
---|
| 320 | * @param {Number} ay the y part of vector a |
---|
| 321 | * @param {Number} bx the x part of vector b |
---|
| 322 | * @param {Number} by the y part of vector b |
---|
| 323 | * @return angle the bisector angle in radians |
---|
| 324 | * @type Number |
---|
| 325 | * @version 1.0 (2007-04-30) |
---|
| 326 | * @credits <a href="http://www.mathe-online.at/mathint/vect1/i.html#Winkelsymmetrale">Mathe Online (Winkelsymmetrale)</a> |
---|
| 327 | * see #calcBisectorVector |
---|
| 328 | * */ |
---|
| 329 | function calcBisectorAngle(ax,ay,bx,by) { |
---|
| 330 | var betraga = Math.sqrt(Math.pow(ax,2) + Math.pow(ay,2)); |
---|
| 331 | var betragb = Math.sqrt(Math.pow(bx,2) + Math.pow(by,2)); |
---|
| 332 | var c1 = ax / betraga + bx / betragb; |
---|
| 333 | var c2 = ay / betraga + by / betragb; |
---|
| 334 | var angle = toPolarDir(c1,c2); |
---|
| 335 | return angle; |
---|
| 336 | } |
---|
| 337 | |
---|
| 338 | /** |
---|
| 339 | * calculates the intersection point of two given lines |
---|
| 340 | * @param {Number} line1x1 the x the start point of line 1 |
---|
| 341 | * @param {Number} line1y1 the y the start point of line 1 |
---|
| 342 | * @param {Number} line1x2 the x the end point of line 1 |
---|
| 343 | * @param {Number} line1y2 the y the end point of line 1 |
---|
| 344 | * @return interSectPoint the intersection point, interSectPoint.x contains x-part, interSectPoint.y the y-part of the resulting coordinate |
---|
| 345 | * @type Object |
---|
| 346 | * @version 1.0 (2007-04-30) |
---|
| 347 | * @credits <a href="http://astronomy.swin.edu.au/~pbourke/geometry/lineline2d/">P. Bourke</a> |
---|
| 348 | */ |
---|
| 349 | function intersect2lines(line1x1,line1y1,line1x2,line1y2,line2x1,line2y1,line2x2,line2y2) { |
---|
| 350 | var interSectPoint = new Object(); |
---|
| 351 | var denominator = (line2y2 - line2y1)*(line1x2 - line1x1) - (line2x2 - line2x1)*(line1y2 - line1y1); |
---|
| 352 | if (denominator == 0) { |
---|
| 353 | alert("lines are parallel"); |
---|
| 354 | } |
---|
| 355 | else { |
---|
| 356 | var ua = ((line2x2 - line2x1)*(line1y1 - line2y1) - (line2y2 - line2y1)*(line1x1 - line2x1)) / denominator; |
---|
| 357 | var ub = ((line1x2 - line1x1)*(line1y1 - line2y1) - (line1y2 - line1y1)*(line1x1 - line2x1)) / denominator; |
---|
| 358 | } |
---|
| 359 | interSectPoint["x"] = line1x1 + ua * (line1x2 - line1x1); |
---|
| 360 | interSectPoint["y"] = line1y1 + ua * (line1y2 - line1y1); |
---|
| 361 | return interSectPoint; |
---|
| 362 | } |
---|
| 363 | |
---|
| 364 | /** |
---|
| 365 | * reformats a given number to a string by adding separators at every third digit |
---|
| 366 | * @param {String|Number} inputNumber the input number, can be of type number or string |
---|
| 367 | * @param {String} separator the separator, e.g. ' or , |
---|
| 368 | * @return newString the intersection point, interSectPoint.x contains x-part, interSectPoint.y the y-part of the resulting coordinate |
---|
| 369 | * @type String |
---|
| 370 | * @version 1.0 (2007-04-30) |
---|
| 371 | */ |
---|
| 372 | function formatNumberString(inputNumber,separator) { |
---|
| 373 | //check if of type string, if number, convert it to string |
---|
| 374 | if (typeof(inputNumber) == "Number") { |
---|
| 375 | var myTempString = inputNumber.toString(); |
---|
| 376 | } |
---|
| 377 | else { |
---|
| 378 | var myTempString = inputNumber; |
---|
| 379 | } |
---|
| 380 | var newString=""; |
---|
| 381 | //if it contains a comma, it will be split |
---|
| 382 | var splitResults = myTempString.split("."); |
---|
| 383 | var myCounter = splitResults[0].length; |
---|
| 384 | if (myCounter > 3) { |
---|
| 385 | while(myCounter > 0) { |
---|
| 386 | if (myCounter > 3) { |
---|
| 387 | newString = separator + splitResults[0].substr(myCounter - 3,3) + newString; |
---|
| 388 | } |
---|
| 389 | else { |
---|
| 390 | newString = splitResults[0].substr(0,myCounter) + newString; |
---|
| 391 | } |
---|
| 392 | myCounter -= 3; |
---|
| 393 | } |
---|
| 394 | } |
---|
| 395 | else { |
---|
| 396 | newString = splitResults[0]; |
---|
| 397 | } |
---|
| 398 | //concatenate if it contains a comma |
---|
| 399 | if (splitResults[1]) { |
---|
| 400 | newString = newString + "." + splitResults[1]; |
---|
| 401 | } |
---|
| 402 | return newString; |
---|
| 403 | } |
---|
| 404 | |
---|
| 405 | /** |
---|
| 406 | * writes a status text message out to a SVG text element's first child |
---|
| 407 | * @param {String} statusText the text message to be displayed |
---|
| 408 | * @version 1.0 (2007-04-30) |
---|
| 409 | */ |
---|
| 410 | function statusChange(statusText) { |
---|
| 411 | document.getElementById("statusText").firstChild.nodeValue = "Statusbar: " + statusText; |
---|
| 412 | } |
---|
| 413 | |
---|
| 414 | /** |
---|
| 415 | * scales an SVG element, requires that the element has an x and y attribute (e.g. circle, ellipse, use element, etc.) |
---|
| 416 | * @param {dom::Event} evt the evt object that triggered the scaling |
---|
| 417 | * @param {Number} factor the scaling factor |
---|
| 418 | * @version 1.0 (2007-04-30) |
---|
| 419 | */ |
---|
| 420 | function scaleObject(evt,factor) { |
---|
| 421 | //reference to the currently selected object |
---|
| 422 | var element = evt.currentTarget; |
---|
| 423 | var myX = element.getAttributeNS(null,"x"); |
---|
| 424 | var myY = element.getAttributeNS(null,"y"); |
---|
| 425 | var newtransform = "scale(" + factor + ") translate(" + (myX * 1 / factor - myX) + " " + (myY * 1 / factor - myY) +")"; |
---|
| 426 | element.setAttributeNS(null,'transform', newtransform); |
---|
| 427 | } |
---|
| 428 | |
---|
| 429 | /** |
---|
| 430 | * returns the transformation matrix (ctm) for the given node up to the root element |
---|
| 431 | * the basic use case is to provide a wrapper function for the missing SVGLocatable.getTransformToElement method (missing in ASV3) |
---|
| 432 | * @param {svg::SVGTransformable} node the node reference for the SVGElement the ctm is queried |
---|
| 433 | * @return CTM the current transformation matrix from the given node to the root element |
---|
| 434 | * @type svg::SVGMatrix |
---|
| 435 | * @version 1.0 (2007-05-01) |
---|
| 436 | * @credits <a href="http://www.kevlindev.com/tutorials/basics/transformations/toUserSpace/index.htm">Kevin Lindsey (toUserSpace)</a> |
---|
| 437 | * @see #getTransformToElement |
---|
| 438 | */ |
---|
| 439 | function getTransformToRootElement(node) { |
---|
| 440 | try { |
---|
| 441 | //this part is for fully conformant players (like Opera, Batik, Firefox, Safari ...) |
---|
| 442 | var CTM = node.getTransformToElement(document.documentElement); |
---|
| 443 | } |
---|
| 444 | catch (ex) { |
---|
| 445 | //this part is for ASV3 or other non-conformant players |
---|
| 446 | // Initialize our CTM the node's Current Transformation Matrix |
---|
| 447 | var CTM = node.getCTM(); |
---|
| 448 | // Work our way through the ancestor nodes stopping at the SVG Document |
---|
| 449 | while ( ( node = node.parentNode ) != document ) { |
---|
| 450 | // Multiply the new CTM to the one with what we have accumulated so far |
---|
| 451 | CTM = node.getCTM().multiply(CTM); |
---|
| 452 | } |
---|
| 453 | } |
---|
| 454 | return CTM; |
---|
| 455 | } |
---|
| 456 | |
---|
| 457 | /** |
---|
| 458 | * returns the transformation matrix (ctm) for the given dom::Node up to a different dom::Node |
---|
| 459 | * the basic use case is to provide a wrapper function for the missing SVGLocatable.getTransformToElement method (missing in ASV3) |
---|
| 460 | * @param {svg::SVGTransformable} node the node reference for the element the where the ctm should be calculated from |
---|
| 461 | * @param {svg::SVGTransformable} targetNode the target node reference for the element the ctm should be calculated to |
---|
| 462 | * @return CTM the current transformation matrix from the given node to the target element |
---|
| 463 | * @type svg::SVGMatrix |
---|
| 464 | * @version 1.0 (2007-05-01) |
---|
| 465 | * @credits <a href="http://www.kevlindev.com/tutorials/basics/transformations/toUserSpace/index.htm">Kevin Lindsey (toUserSpace)</a> |
---|
| 466 | * @see #getTransformToRootElement |
---|
| 467 | */ |
---|
| 468 | function getTransformToElement(node,targetNode) { |
---|
| 469 | try { |
---|
| 470 | //this part is for fully conformant players |
---|
| 471 | var CTM = node.getTransformToElement(targetNode); |
---|
| 472 | } |
---|
| 473 | catch (ex) { |
---|
| 474 | //this part is for ASV3 or other non-conformant players |
---|
| 475 | // Initialize our CTM the node's Current Transformation Matrix |
---|
| 476 | var CTM = node.getCTM(); |
---|
| 477 | // Work our way through the ancestor nodes stopping at the SVG Document |
---|
| 478 | while ( ( node = node.parentNode ) != targetNode ) { |
---|
| 479 | // Multiply the new CTM to the one with what we have accumulated so far |
---|
| 480 | CTM = node.getCTM().multiply(CTM); |
---|
| 481 | } |
---|
| 482 | } |
---|
| 483 | return CTM; |
---|
| 484 | } |
---|
| 485 | |
---|
| 486 | /** |
---|
| 487 | * converts HSV to RGB values |
---|
| 488 | * @param {Number} hue the hue value (between 0 and 360) |
---|
| 489 | * @param {Number} sat the saturation value (between 0 and 1) |
---|
| 490 | * @param {Number} val the value value (between 0 and 1) |
---|
| 491 | * @return rgbArr the rgb values (associative array or object, the keys are: red,green,blue), all values are scaled between 0 and 255 |
---|
| 492 | * @type Object |
---|
| 493 | * @version 1.0 (2007-05-01) |
---|
| 494 | * @see #rgb2hsv |
---|
| 495 | */ |
---|
| 496 | function hsv2rgb(hue,sat,val) { |
---|
| 497 | var rgbArr = new Object(); |
---|
| 498 | if ( sat == 0) { |
---|
| 499 | rgbArr["red"] = Math.round(val * 255); |
---|
| 500 | rgbArr["green"] = Math.round(val * 255); |
---|
| 501 | rgbArr["blue"] = Math.round(val * 255); |
---|
| 502 | } |
---|
| 503 | else { |
---|
| 504 | var h = hue / 60; |
---|
| 505 | var i = Math.floor(h); |
---|
| 506 | var f = h - i; |
---|
| 507 | if (i % 2 == 0) { |
---|
| 508 | f = 1 - f; |
---|
| 509 | } |
---|
| 510 | var m = val * (1 - sat); |
---|
| 511 | var n = val * (1 - sat * f); |
---|
| 512 | switch(i) { |
---|
| 513 | case 0: |
---|
| 514 | rgbArr["red"] = val; |
---|
| 515 | rgbArr["green"] = n; |
---|
| 516 | rgbArr["blue"] = m; |
---|
| 517 | break; |
---|
| 518 | case 1: |
---|
| 519 | rgbArr["red"] = n; |
---|
| 520 | rgbArr["green"] = val; |
---|
| 521 | rgbArr["blue"] = m; |
---|
| 522 | break; |
---|
| 523 | case 2: |
---|
| 524 | rgbArr["red"] = m; |
---|
| 525 | rgbArr["green"] = val; |
---|
| 526 | rgbArr["blue"] = n; |
---|
| 527 | break; |
---|
| 528 | case 3: |
---|
| 529 | rgbArr["red"] = m; |
---|
| 530 | rgbArr["green"] = n; |
---|
| 531 | rgbArr["blue"] = val; |
---|
| 532 | break; |
---|
| 533 | case 4: |
---|
| 534 | rgbArr["red"] = n; |
---|
| 535 | rgbArr["green"] = m; |
---|
| 536 | rgbArr["blue"] = val; |
---|
| 537 | break; |
---|
| 538 | case 5: |
---|
| 539 | rgbArr["red"] = val; |
---|
| 540 | rgbArr["green"] = m; |
---|
| 541 | rgbArr["blue"] = n; |
---|
| 542 | break; |
---|
| 543 | case 6: |
---|
| 544 | rgbArr["red"] = val; |
---|
| 545 | rgbArr["green"] = n; |
---|
| 546 | rgbArr["blue"] = m; |
---|
| 547 | break; |
---|
| 548 | } |
---|
| 549 | rgbArr["red"] = Math.round(rgbArr["red"] * 255); |
---|
| 550 | rgbArr["green"] = Math.round(rgbArr["green"] * 255); |
---|
| 551 | rgbArr["blue"] = Math.round(rgbArr["blue"] * 255); |
---|
| 552 | } |
---|
| 553 | return rgbArr; |
---|
| 554 | } |
---|
| 555 | |
---|
| 556 | /** |
---|
| 557 | * converts RGB to HSV values |
---|
| 558 | * @param {Number} red the hue value (between 0 and 255) |
---|
| 559 | * @param {Number} green the saturation value (between 0 and 255) |
---|
| 560 | * @param {Number} blue the value value (between 0 and 255) |
---|
| 561 | * @return hsvArr the hsv values (associative array or object, the keys are: hue (0-360),sat (0-1),val (0-1)) |
---|
| 562 | * @type Object |
---|
| 563 | * @version 1.0 (2007-05-01) |
---|
| 564 | * @see #hsv2rgb |
---|
| 565 | */ |
---|
| 566 | function rgb2hsv(red,green,blue) { |
---|
| 567 | var hsvArr = new Object(); |
---|
| 568 | red = red / 255; |
---|
| 569 | green = green / 255; |
---|
| 570 | blue = blue / 255; |
---|
| 571 | myMax = Math.max(red, Math.max(green,blue)); |
---|
| 572 | myMin = Math.min(red, Math.min(green,blue)); |
---|
| 573 | v = myMax; |
---|
| 574 | if (myMax > 0) { |
---|
| 575 | s = (myMax - myMin) / myMax; |
---|
| 576 | } |
---|
| 577 | else { |
---|
| 578 | s = 0; |
---|
| 579 | } |
---|
| 580 | if (s > 0) { |
---|
| 581 | myDiff = myMax - myMin; |
---|
| 582 | rc = (myMax - red) / myDiff; |
---|
| 583 | gc = (myMax - green) / myDiff; |
---|
| 584 | bc = (myMax - blue) / myDiff; |
---|
| 585 | if (red == myMax) { |
---|
| 586 | h = (bc - gc) / 6; |
---|
| 587 | } |
---|
| 588 | if (green == myMax) { |
---|
| 589 | h = (2 + rc - bc) / 6; |
---|
| 590 | } |
---|
| 591 | if (blue == myMax) { |
---|
| 592 | h = (4 + gc - rc) / 6; |
---|
| 593 | } |
---|
| 594 | } |
---|
| 595 | else { |
---|
| 596 | h = 0; |
---|
| 597 | } |
---|
| 598 | if (h < 0) { |
---|
| 599 | h += 1; |
---|
| 600 | } |
---|
| 601 | hsvArr["hue"] = Math.round(h * 360); |
---|
| 602 | hsvArr["sat"] = s; |
---|
| 603 | hsvArr["val"] = v; |
---|
| 604 | return hsvArr; |
---|
| 605 | } |
---|
| 606 | |
---|
| 607 | /** |
---|
| 608 | * populates an array such that it can be addressed by both a key or an index nr, |
---|
| 609 | * note that both Arrays need to be of the same length |
---|
| 610 | * @param {Array} arrayKeys the array containing the keys |
---|
| 611 | * @param {Array} arrayValues the array containing the values |
---|
| 612 | * @return returnArray the resulting array containing both associative values and also a regular indexed array |
---|
| 613 | * @type Array |
---|
| 614 | * @version 1.0 (2007-05-01) |
---|
| 615 | */ |
---|
| 616 | function arrayPopulate(arrayKeys,arrayValues) { |
---|
| 617 | var returnArray = new Array(); |
---|
| 618 | if (arrayKeys.length != arrayValues.length) { |
---|
| 619 | alert("error: arrays do not have the same length!"); |
---|
| 620 | } |
---|
| 621 | else { |
---|
| 622 | for (i=0;i<arrayKeys.length;i++) { |
---|
| 623 | returnArray[arrayKeys[i]] = arrayValues[i]; |
---|
| 624 | } |
---|
| 625 | } |
---|
| 626 | return returnArray; |
---|
| 627 | } |
---|
| 628 | |
---|
| 629 | /** |
---|
| 630 | * Wrapper object for network requests, uses getURL or XMLHttpRequest depending on availability |
---|
| 631 | * The callBackFunction receives a XML or text node representing the rootElement |
---|
| 632 | * of the fragment received or the return text, depending on the returnFormat. |
---|
| 633 | * See also the following <a href="http://www.carto.net/papers/svg/network_requests/">documentation</a>. |
---|
| 634 | * @class this is a wrapper object to provide network request functionality (get|post) |
---|
| 635 | * @param {String} url the URL/IRI of the network resource to be called |
---|
| 636 | * @param {Function|Object} callBackFunction the callBack function or object that is called after the data was received, in case of an object, the method 'receiveData' is called; both the function and the object's 'receiveData' method get 2 return parameters: 'node.firstChild'|text (the root element of the XML or text resource), this.additionalParams (if defined) |
---|
| 637 | * @param {String} returnFormat the return format, either 'xml' or 'json' (or text) |
---|
| 638 | * @param {String} method the method of the network request, either 'get' or 'post' |
---|
| 639 | * @param {String|Undefined} postText the String containing the post text (optional) or Undefined (if not a 'post' request) |
---|
| 640 | * @param {Object|Array|String|Number|Undefined} additionalParams additional parameters that will be passed to the callBackFunction or object (optional) or Undefined |
---|
| 641 | * @return a new getData instance |
---|
| 642 | * @type getData |
---|
| 643 | * @constructor |
---|
| 644 | * @version 1.0 (2007-02-23) |
---|
| 645 | */ |
---|
| 646 | function getData(url,callBackFunction,returnFormat,method,postText,additionalParams) { |
---|
| 647 | this.url = url; |
---|
| 648 | this.callBackFunction = callBackFunction; |
---|
| 649 | this.returnFormat = returnFormat; |
---|
| 650 | this.method = method; |
---|
| 651 | this.additionalParams = additionalParams; |
---|
| 652 | if (method != "get" && method != "post") { |
---|
| 653 | alert("Error in network request: parameter 'method' must be 'get' or 'post'"); |
---|
| 654 | } |
---|
| 655 | this.postText = postText; |
---|
| 656 | this.xmlRequest = null; //@private reference to the XMLHttpRequest object |
---|
| 657 | } |
---|
| 658 | |
---|
| 659 | /** |
---|
| 660 | * triggers the network request defined in the constructor |
---|
| 661 | */ |
---|
| 662 | getData.prototype.getData = function() { |
---|
| 663 | //call getURL() if available |
---|
| 664 | if (window.getURL) { |
---|
| 665 | if (this.method == "get") { |
---|
| 666 | getURL(this.url,this); |
---|
| 667 | } |
---|
| 668 | if (this.method == "post") { |
---|
| 669 | postURL(this.url,this.postText,this); |
---|
| 670 | } |
---|
| 671 | } |
---|
| 672 | //or call XMLHttpRequest() if available |
---|
| 673 | else if (window.XMLHttpRequest) { |
---|
| 674 | var _this = this; |
---|
| 675 | this.xmlRequest = new XMLHttpRequest(); |
---|
| 676 | if (this.method == "get") { |
---|
| 677 | if (this.returnFormat == "xml") { |
---|
| 678 | this.xmlRequest.overrideMimeType("text/xml"); |
---|
| 679 | } |
---|
| 680 | this.xmlRequest.open("GET",this.url,true); |
---|
| 681 | } |
---|
| 682 | if (this.method == "post") { |
---|
| 683 | this.xmlRequest.open("POST",this.url,true); |
---|
| 684 | } |
---|
| 685 | this.xmlRequest.onreadystatechange = function() {_this.handleEvent()}; |
---|
| 686 | if (this.method == "get") { |
---|
| 687 | this.xmlRequest.send(null); |
---|
| 688 | } |
---|
| 689 | if (this.method == "post") { |
---|
| 690 | //test if postText exists and is of type string |
---|
| 691 | var reallyPost = true; |
---|
| 692 | if (!this.postText) { |
---|
| 693 | reallyPost = false; |
---|
| 694 | alert("Error in network post request: missing parameter 'postText'!"); |
---|
| 695 | } |
---|
| 696 | if (typeof(this.postText) != "string") { |
---|
| 697 | reallyPost = false; |
---|
| 698 | alert("Error in network post request: parameter 'postText' has to be of type 'string')"); |
---|
| 699 | } |
---|
| 700 | if (reallyPost) { |
---|
| 701 | this.xmlRequest.send(this.postText); |
---|
| 702 | } |
---|
| 703 | } |
---|
| 704 | } |
---|
| 705 | //write an error message if neither method is available |
---|
| 706 | else { |
---|
| 707 | alert("your browser/svg viewer neither supports window.getURL nor window.XMLHttpRequest!"); |
---|
| 708 | } |
---|
| 709 | } |
---|
| 710 | |
---|
| 711 | /** |
---|
| 712 | * this is the callback method for the getURL() or postURL() case |
---|
| 713 | * @private |
---|
| 714 | */ |
---|
| 715 | getData.prototype.operationComplete = function(data) { |
---|
| 716 | //check if data has a success property |
---|
| 717 | if (data.success) { |
---|
| 718 | //parse content of the XML format to the variable "node" |
---|
| 719 | if (this.returnFormat == "xml") { |
---|
| 720 | //convert the text information to an XML node and get the first child |
---|
| 721 | var node = parseXML(data.content,document); |
---|
| 722 | //distinguish between a callback function and an object |
---|
| 723 | if (typeof(this.callBackFunction) == "function") { |
---|
| 724 | this.callBackFunction(node.firstChild,this.additionalParams); |
---|
| 725 | } |
---|
| 726 | if (typeof(this.callBackFunction) == "object") { |
---|
| 727 | this.callBackFunction.receiveData(node.firstChild,this.additionalParams); |
---|
| 728 | } |
---|
| 729 | } |
---|
| 730 | if (this.returnFormat == "json") { |
---|
| 731 | if (typeof(this.callBackFunction) == "function") { |
---|
| 732 | this.callBackFunction(data.content,this.additionalParams); |
---|
| 733 | } |
---|
| 734 | if (typeof(this.callBackFunction) == "object") { |
---|
| 735 | this.callBackFunction.receiveData(data.content,this.additionalParams); |
---|
| 736 | } |
---|
| 737 | } |
---|
| 738 | } |
---|
| 739 | else { |
---|
| 740 | alert("something went wrong with dynamic loading of geometry!"); |
---|
| 741 | } |
---|
| 742 | } |
---|
| 743 | |
---|
| 744 | /** |
---|
| 745 | * this is the callback method for the XMLHttpRequest case |
---|
| 746 | * @private |
---|
| 747 | */ |
---|
| 748 | getData.prototype.handleEvent = function() { |
---|
| 749 | if (this.xmlRequest.readyState == 4) { |
---|
| 750 | if (this.returnFormat == "xml") { |
---|
| 751 | //we need to import the XML node first |
---|
| 752 | var importedNode = document.importNode(this.xmlRequest.responseXML.documentElement,true); |
---|
| 753 | if (typeof(this.callBackFunction) == "function") { |
---|
| 754 | this.callBackFunction(importedNode,this.additionalParams); |
---|
| 755 | } |
---|
| 756 | if (typeof(this.callBackFunction) == "object") { |
---|
| 757 | this.callBackFunction.receiveData(importedNode,this.additionalParams); |
---|
| 758 | } |
---|
| 759 | } |
---|
| 760 | if (this.returnFormat == "json") { |
---|
| 761 | if (typeof(this.callBackFunction) == "function") { |
---|
| 762 | this.callBackFunction(this.xmlRequest.responseText,this.additionalParams); |
---|
| 763 | } |
---|
| 764 | if (typeof(this.callBackFunction) == "object") { |
---|
| 765 | this.callBackFunction.receiveData(this.xmlRequest.responseText,this.additionalParams); |
---|
| 766 | } |
---|
| 767 | } |
---|
| 768 | } |
---|
| 769 | } |
---|
| 770 | |
---|
| 771 | /** |
---|
| 772 | * Serializes an XML node and returns a string representation. Wrapper function to hide implementation differences. |
---|
| 773 | * This can be used for debugging purposes or to post data to a server or network resource. |
---|
| 774 | * @param {dom::Node} node the DOM node reference |
---|
| 775 | * @return textRepresentation the String representation of the XML node |
---|
| 776 | * @type String |
---|
| 777 | * @version 1.0 (2007-05-01) |
---|
| 778 | * @see getData |
---|
| 779 | */ |
---|
| 780 | function serializeNode(node) { |
---|
| 781 | if (typeof XMLSerializer != 'undefined') { |
---|
| 782 | return new XMLSerializer().serializeToString(node); |
---|
| 783 | } |
---|
| 784 | else if (typeof node.xml != 'undefined') { |
---|
| 785 | return node.xml; |
---|
| 786 | } |
---|
| 787 | else if (typeof printNode != 'undefined') { |
---|
| 788 | return printNode(node); |
---|
| 789 | } |
---|
| 790 | else if (typeof Packages != 'undefined') { |
---|
| 791 | try { |
---|
| 792 | var stringWriter = new java.io.StringWriter(); |
---|
| 793 | Packages.org.apache.batik.dom.util.DOMUtilities.writeNode(node,stringWriter); |
---|
| 794 | return stringWriter.toString(); |
---|
| 795 | } |
---|
| 796 | catch (e) { |
---|
| 797 | alert("Sorry, your SVG viewer does not support the printNode/serialize function."); |
---|
| 798 | return ''; |
---|
| 799 | } |
---|
| 800 | } |
---|
| 801 | else { |
---|
| 802 | alert("Sorry, your SVG viewer does not support the printNode/serialize function."); |
---|
| 803 | return ''; |
---|
| 804 | } |
---|
| 805 | } |
---|
| 806 | |
---|
| 807 | /** |
---|
| 808 | * Starts a SMIL animation element with the given id by triggering the '.beginElement()' method. |
---|
| 809 | * This is a convenience (shortcut) function. |
---|
| 810 | * @param {String} id a valid id of a valid SMIL animation element |
---|
| 811 | * @version 1.0 (2007-05-01) |
---|
| 812 | */ |
---|
| 813 | //starts an animtion with the given id |
---|
| 814 | //this function is useful in combination with window.setTimeout() |
---|
| 815 | function startAnimation(id) { |
---|
| 816 | document.getElementById(id).beginElement(); |
---|
| 817 | } |
---|