Wie konvertiert man Bildschirmkoordinaten in einem skalierten SVG in den Dokumentenbereich?

8

Ich benutze das SVG-Jquery-Plugin von Keith Wood, nicht die HTML5-Leinwand.

Ich definiere mein Svg-Bild so, dass ich mein Svg-Dreieck-Bild an seinen div-Container anpassen kann:

%Vor%

Aber wie passe ich dann die Koordinatensysteme an?

Ich möchte die Mausposition an einem Punkt über dem Dreieck erfassen und einen Kreis an diesen X Y -Koordinaten zeichnen, aber der Kreis wird an einer anderen Stelle gezeichnet, da die Koordinatensysteme nicht übereinstimmen.

Also würde ein Kreis bei Punkt 10,10 gezeichnet werden, aber zum Beispiel bei 50,60 liegen.

Wie gehen Menschen damit um?

Danke.

Endgültige Lösung: Verwenden Sie das JQuery-Plugin zum Zeichnen des Kreises und getScreenCTM () zum Berechnen der Punkte.

Vielleicht benötige ich das JQuery-Plugin nicht mehr, aber es reicht jetzt. Konnte nicht sehen, wie man es nur mit dem Plugin macht.

%Vor%     
Jon 04.03.2014, 21:44
quelle

2 Antworten

9

Siehe Ссылка Es ist mein Beispielcode. Für diese Verwendung ist die getScreenCTM-Methode sehr nützlich.

%Vor%     
defghi1977 04.03.2014, 23:48
quelle
4

Wenn Sie die Funktion getScreenCTM() für das SVG-Element aufrufen, wird die Transformationsmatrix zurückgegeben, die zum Konvertieren von Dokumentkoordinaten in Bildschirmkoordinaten verwendet wird. Sie möchten die Transformationsmatrix für die andere Richtung, also rufen Sie inverse() für das Matrixobjekt auf.

%Vor%

Jetzt können Sie ein Punktobjekt transformieren, um die endgültige Konvertierung durchzuführen:

%Vor%

Arbeitsdemo hier

    
Paul LeBeau 05.03.2014 00:01
quelle

Tags und Links