This example shows how to scale objects on mouse-over. Move mouser cursor over a symbol, it should then be scaled. On symbols are applied mouse events like onmouseover, onmouseout. Those events start functions (defined in an external script-file) that act on the symbol touched by the cursor. Also check mouse-over effects for reference. |
Right-click, save ...
Scaling is done with the following code:
function scaleObject(evt,factor) { //reference to the currently selected object var element = evt.getTarget(); //query old transform value (we need the translation value) var curTransform = element.getAttribute("transform"); curTransform = new String(curTransform); //Wert in ein String umwandeln //no fear from Regular expressions ... just copy it, I copied it either ... var translateRegExp=/translate\(([-+]?[\d.]+)(\s*[\s,]\s*)([-+]?[\d.]+)\)\s*/; //This part extracts the translation-value from the whole transform-string if (curTransform.length != 0) { var result = curTransform.match(translateRegExp); if (result == null || result.index == -1) { oldTranslateX = 0; oldTranslateY = 0; } else { oldTranslateX = result[1]; oldTranslateY = result[3]; } //concatenate the string again, add scale-factor var newtransform = "translate(" + oldTranslateX + " " + oldTranslateY + ") " + "scale(" + factor + ")"; } //set transform-factor element.setAttribute('transform', newtransform); }
In order to scale symbols we first have to get a reference to the object and the current translation factor. This is done by the lines var element = evt.getTarget(); and var curTransform = element.getAttribute("transform");. Afterwards we do a pattern matching with regular expressions to extract only the translation parts. Finally we concatenate the translation strings with the scale-factor and set it with the method element.setAttribute('transform', newtransform);. In order to trigger the function we use the following codes along with the symbol instantiation:
<use id="Zurich" transform="translate(682500 53500)" onmouseover="scaleObject(evt,2)" onmouseout="scaleObject(evt,1)" xlink:href="#symbolRect"/ >
In order to query the translation factor we have to instantiate the symbols using a transform attribute. We use the events onmouseover to scale the symbols and onmouseout to reset the transformation. The function scaleObject() takes the object reference and the scale-factor as argument.
Last modified:
Tuesday, 10-Dec-2019 21:41:35 CET
© carto:net (andreas neumann & andré m. winter) original URL for reference: https://old.carto.net/papers/svg/samples/scale_symbols.shtml |