Style

Assistant

Startseite
Screenshot
Kurzanleitung
Download
Kurse & Infos
>Tipps & Tricks<
Unterstützer
TMXtensions
?Freeware!
About TM
E-Mail
Made with CSS
Valid HTML 4.01!
Stand: 07.12.2002

Tipps & Tricks – Tipp 96
Zur Übersicht

96. SVG – Skalierung und Verschiebung ermitteln (21.09.2002)

Der Tipp 80 widmete sich u. a. Funktionen zum Anzeigen von so genannten Tooltips, deren Anwendung sich auch bereits in mehreren Projekten des Autors bewährt hat. Ein etwas unschöner Nebeneffekt tritt beim Skalieren (Zoomen) bzw. beim Verschieben der Grafik auf: Die Tooltips werden mitskaliert und ihre Position ist nicht mehr in unmittelbarer Nähe des Mauszeigers angesiedelt oder sie verschwinden gar völlig aus dem Sichtfeld. Deshalb ergab sich der Wunsch, die Tooltips bei Skalierung und/oder Verschiebung auszulassen.

Ein Zoomen der Grafik kann über den Event-Handler onzoom festgestellt werden, welcher dem svg-Wurzelelement zugeordnet wird. Der aktuelle Skalierungsfaktor steht in der Eigenschaft currentScale zur Verfügung, die zum documentElement-Objekt gehört. Die Verschiebung in x- bzw. y-Richtung (Translation) liefert das Objekt currentTranslate, welches die Eigenschaften x und y besitzt. 


      // Zugriff auf das Wurzelelement-Objekt
      svgdoc=document.documentElement;

      // Skalierungsfaktor
      curzoom=svgdoc.currentScale;

      // Verschiebungs-Objekt
      curtrans=svgdoc.currentTranslate;

      // x-Verschiebung
      ctx=curtrans.x;

      // y-Verschiebung
      cty=curtrans.y;
Die ermittelten Werte lassen sich entsprechend weiter verarbeiten. Zur Vermeidung der Skalierung wird dem Tooltip-Objekt (Gruppe aus Rechteck- und Text-Element mit der ID tooltip) der reziproke Wert des Skalierungsfaktors zugewiesen:


      function ZoomControl()
      {
        var curzoom;
        curzoom=svgdoc.currentScale;
        svgdoc.getElementById("tooltip")
         .setAttribute("transform","scale("+1/curzoom+")"); // eine Zeile
      }


      Aufruf der Funktion:
      <svg ... onzoom="ZoomControl()">
Die Funktion ShowTooltip() wurde folgendermaßen erweitert (Ermitteln der jeweils aktuellen Werte von ctx bzw. cty und deren Subtraktion von den Tooltip-Koordinaten):


      function ShowTooltip(e,txt)
      {
        var ttrelem, ttrelem, posx, posy, curtrans, ctx, cty;
        ttrelem=svgdoc.getElementById("ttr");
        tttelem=svgdoc.getElementById("ttt");
        tttelem.childNodes.item(0).setData(txt);
        posx=e.getClientX();
        posy=e.getClientY();
        curtrans=svgdoc.currentTranslate;
        ctx=curtrans.x;
        cty=curtrans.y;
        ttrelem.setAttribute("x",posx-ctx);
        ttrelem.setAttribute("y",posy-cty-20);
        tttelem.setAttribute("x",posx-ctx+5);
        tttelem.setAttribute("y",posy-cty-8);
        ttrelem.setAttribute("width",tttelem.getComputedTextLength()+10);
        tttelem.setAttribute("style","fill: #0000CC; font-size: 11px;
         visibility: visible"); // eine Zeile
        ttrelem.setAttribute("style","fill: #FFFFCC; stroke: #000000;
         stroke-width: 0.5px; visibility: visible"); // eine Zeile
      }
Die genannten Funktionen sind im Code-Update 1.02 des PHP-Moduls SVG::PHP enthalten und können auch direkt im Livebeispiel in Aktion betrachtet werden. Hinweis: Im ASV erscheint durch die Kombination "Strg+Mauszeiger" ein Auswahlrechteck zur Skalierung, während "Alt+Mauszeiger" Verschiebungen ermöglicht.