svg zoom-skalierung

[micha]

hallo,

ich will in einem SVG-frameset den zoom auf den mittelpunkt des aktuellen fensterausschnittes bringen. durch klicken auf einen link in einem fremden frameset. da ich keine website habe hier kurz das skript:

// button ZoomIn
var theSVGDoc;
var theActualTransX;
var theActualTransY;
var clientX;
var clientY;
var transX = 0;
var transY = 0;

function Init2(evt){
    //theSVGDoc = evt.target();
    var theSVGMap = top.window.frames.item("mainFrame").document.karte.getSVGDocument();
    var theSVGDoc = theSVGMap.getDocumentElement();

// weitergehend
    var viewbox = new String(theSVGDoc.getAttribute("viewBox"));
    var viewboxes = viewbox.split(' ');
    var ulXCorner = viewboxes[0];
    var ulYCorner = viewboxes[1];
    var width = viewboxes[2] - ulXCorner;
    var height = viewboxes[3] - ulYCorner;
    var pixWidth = theSVGDoc.getAttribute('width');
    var pixHeight = theSVGDoc.getAttribute('height');
    //bildschirmauflösung
    clientX = 1280;
    clientY = 1024;
    }

function action_ZoomIn() {

// massstab ermitteln, berechnen und setzen
    var theSVGMap = top.window.frames.item("mainFrame").document.karte.getSVGDocument();
    var theSVGDoc = theSVGMap.getDocumentElement();
    var theActualScale = theSVGDoc.getCurrentScale();
    var ZIELScale = theActualScale * 2;
    theSVGDoc.currentScale=ZIELScale;

// translation ermitteln, berechnen und setzen
    var theActualTrans = theSVGDoc.getCurrentTranslate();
    theActualTransX = theActualTrans.getX();
    theActualTransY = theActualTrans.getY();
    alert(theActualTransX + ' ' + theActualTransY);

transX += (-clientX + theActualTransX) / (4 * theActualScale);
    transY += (-clientY + theActualTransY) / (4 * theActualScale);
    transString = 'translate('+transX+','+transY+')';

theSVGDoc.currentTranslate.x = transX;
    theSVGDoc.currentTranslate.y = transY;

//test mit group
    //group = theSVGDoc.getElementById('theWholeMap');
    //group.setAttribute('transform',transString);
}

init2 wird mit laden des mainframes aufgerufen. die funktion action_ZoomIn() nach klicken des links. in der svg-datei, die gezoomt werden soll steht im svg-element:
<svg width="100%" height="100%" viewBox="4512000 -5735000 180000 180000" id="saxony">.

dieser string soll nicht geändert werden.

das hereinzoomen funktioniert einfach aber der verschiebevektor läßt sich einfach nicht festlegen. mir ist auch noch nicht so recht klar, wie ich die aktuelle auflösung der grafik bestimme und was die negativen rückgabewerte beim abrufen der translation bedeuten.

ziel ist es immer in die mitte des aktuellen bildes positiv zu zoomen.

vielleicht hat ja einer von euch das problem gelöst.

micha

[Thomas Meinike]

Hallo,

das hereinzoomen funktioniert einfach aber der verschiebevektor läßt sich einfach nicht festlegen. mir ist auch noch nicht so recht klar, wie ich die aktuelle auflösung der grafik bestimme und was die negativen rückgabewerte beim abrufen der translation bedeuten.

ziel ist es immer in die mitte des aktuellen bildes positiv zu zoomen.

Eine SVG-Grafik kann beliebig groß sein. viewBox bestimmt den sichtbaren Ausschnitt (x,y der linken oberen Ecke sowie Breite und Hoehe des gewaehlten Rechteckausschnitts).

getCurrentTranslate() und getCurrentScale() geben die aktuelle Verschiebung bzw. Skalierung zurueck. Mit diesen Parametern und den aktuellen Fenstermaßen (window.innerWidth bzw. window.innerHeight) sollten sich die jeweiligen viewBox-Parameter berechnen und zuweisen lassen.

Dein konkretes Problem bedarf wohl etwas mehr Erlaeuterung (vielleicht in Form von vorher/nachher-Skizzen).

MfG, Thomas

[micha]

hallo thomas,

ich weiß zwar mit dem begriff vorher-nachher-skizze nichts anzufangen, versuche aber das mal so:

will über einen button (das berühmte frameset kennst du ja) :-) einen zoom auf einen svg-graphik zentriert ausführen lassem. einen positiven als auch negativen zoom. wenn ich den viewbox-parameter ändere geht mir die initial-einstellung verloren. aus diesem grunde bleibt nur die zuweisunng einer translation auf das SVG-element resp. die translation der gruppe. aber dies ist erschwerdend auch noch vom aktuellen zoom-faktor abhängig. das zusammenspiel der ganzen parameter bei der berechnung der zuzuweisenden translation ist mir auch nicht so recht klar.

micha

[Thomas Meinike]

Hallo,

will über einen button (das berühmte frameset kennst du ja) :-) einen zoom auf einen svg-graphik zentriert ausführen lassem.

Es gibt also einen Fixpunkt, der sich immer in der Mitte des aktuellen Fensters befinden soll (z. B. der Mittelpunkt eines Kreises)?

Eine allgemeingueltige Komplettloesung kann ich nicht anbieten, aber es stehen zur Verfuegung:

die Fensterparameter window.innerWidth und window.innerHeight
die aktuelle Ausdehnung der Grafik svgroot.getBBox().width und svgroot.getBBox().height
die aktuelle Skalierung und Verschiebung svgroot.getCurrentScale() und svgroot.getCurrentTranslate().x bzw. svgroot.getCurrentTranslate().y

Bestimme einen zentralen Punkt, dessen x- und y-Koordinaten in die Mitte der aktuellen Anzeige gerueckt werden.

MfG, Thomas

[micha]

hallo thomas,

danke für deine wertvollen tipps. innerWidth/innerHeight funktioniert bei mir nicht, (ich bin der meinung das geht nur unter netscape, bin mir aber nicht sicher) da ich den ie benutze.

wie auch immer... svg ist doch nicht so toll wie angenommen. ;-)

micha

[Thomas Meinike]

Hallo,

innerWidth/innerHeight funktioniert bei mir nicht, (ich bin der meinung das geht nur unter netscape, bin mir aber nicht sicher) da ich den ie benutze.

Ich meinte nicht die Abfrage im Browser, sondern im SVG-Dokument selbst und das funktioniert mit dem ASV problemlos.

wie auch immer... svg ist doch nicht so toll wie angenommen. ;-)

Ich behaupte das Gegenteil ;-).

Vielleicht solltest Du auch mal bei den Leuten von http://www.carto.net vorbeischauen, die Kartografie mit SVG betreiben und viel mit Zoom und Translate machen.

MfG, Thomas